S'inscrire |

 
Avatar de A-gNa~
A-gNa~ est déconnecté Sexe Non renseigné 12/04
XP de A-gNa~ 58 Nombre total de messages de A-gNa~
Membre Habitué
  #1 (permalink)  
Vieux 09/12/2010, 12h18
Photoshop Créer un thème wordpress dans Photoshop (webdesign seulement)

En réponse à la demande faite ici

Comment créer un thème wordpress dans photoshop (webdesign seulement)



Original : How to create a wordpress theme in Photoshop trendyTUTS – Premium Photoshop & PSD to HTML Tutorials

Voici le résultat final:



Pour créer ce template j'ai utilisé:



Okay, commence le tutoriel. Ouvrez photoshop, reglez la couleur du background à : #dcdcdc et creez un nouveau documents aux dimensions : 1100x1570px.



Utilisez ensuite l'outil rectange pour créer ces zones. Pour chaqune d'entre elles, j'ai ajouter les dimensions et les couleurs utilisés. Voir l'image ci-dessous.



Etape1 – Création de la partie haute ~ logo et navigation


Avec l'outil texte (T) je vais ecrire “WordPress Theme” et l'annotation : “design by trendyTUTS”.

Pour le mot "WordPress", appliquez ces styles de claque.









Et pour le thème appliquez ces styles de claque.





Avec l'outil texte (T), créez les liens sur le coté droit:

Pour voir mes résultat et les sortes de polices que j'ai utilisés, regardez l'image ci-dessous.



Etape2 - Création de la partie de "mise en avant" (j'ai pas trouvé mieux )


Celle-ci est vraiment simple a créer. Sur le côté droit je vais ajouter des images avec quelques calques et sur le côté gauche, avec l'outil texte (T) je vais ajouter du texte. Voir l'image ci-dessous pour avoir une idée de la mise en forme.



Etape 3 – Création de la zone de contenu


Pour créer la zone de contenu, je selection d'abort l'outil rectangle et je créer cette zone (ndlr: avec un gris trés clair, ex: #EFEFEF)



Toujour avec l'outil rectangle, je vais créer une autre zone, celle-ci sera utilisé pour créer une ombre sur le haut de la zone créer dans l'étape précédente.



Ensuite, assurez vous d'avoir cette zone séléctionné et ajouter un masque de fusion sur votre calque. Voir l'image ci-dessous.




Ensuite, sélectionnez l'outil dégradé, assurez vous d'avoir la pallette par défaut de séléctionnée (Noir et blanc) et tracez une ligne similaire à celle-ci



Vous devriez avoir quelque chose comme cela maintenant:



Vous voyez la légère ombre que l'on a obtenu ? De la même façon je vais créer l'ombre sous la zone de contenu.


Ensuite, j'aimerai créez une autre ombre sympas, mais cette fois je vais la créée pour le coin gauche de la zone.

Tout d'abort je selectionne l'outil stylo (ndlr : la plume me semble quand même plus simple, mais bon c'est au choix) et je vais créer un réctangle allongé, comme ceci.



Ensuite je vais lui appliquée un flou (onglet Filtre>Flou>Flou Gaussien) et je selectionne une intensité de 3.5px, procédez de la même façon pour le reste des coins.

Voila mon résultat:



Ensuite je vais ajouter le contenu. Avec l'outil rectangle je créer une zone au dimensions suivantes: 291×285 et je lui applique ces style de calque:







Ensuite en utilisant l'outil texte je vais ajouter du texte (ndlr : -.-' ), je vais aussi utliser quelques images que je place dans la zone précedement créée :



Ensuite je vais sélectionner l'outil Rectangle arrondi réglé à 5px afin de créer un bouton auquel j'ajoute ces styles de calque :











Repetez cette étapes 5 fois pour obtenir le réusltat comme sur l'image ci-dessous.



Sur le coté droit je vais créer une Sidebar. Je l'a crée de la même façon que les blocs dans la zone de contenu.



Dans l'espace vide en bas, créez la pagination (ndlr : avec l'outil Rectangles arrondis et le style des boutons vus précédement)



Etape 4 – Création du footer (bas de page)


Et bien, le footer est déja créé. Avec l'outil Texte je vais ajouter le texte.

Voila mon résultat :



Voila mon résultat pour la page entière



(NDLR : pardon pour les fautes d’orthographe que j'aurais pu loupé :/ )
Réponse avec citation
TEAM
Avatar de Phil.Micro
Phil.Micro est déconnecté Phil.Micro est un Homme 06/02
XP de Phil.Micro 3 804 Nombre total de messages de Phil.Micro
-= CoAdmin =-
  #2 (permalink)  
Vieux 09/12/2010, 20h45
Beau travail !
Merci

(Images stockées sur notre FTP et Trad ajouté dans les Index)
Réponse avec citation
TEAM
Avatar de lorddavid
lorddavid est déconnecté Sexe Non renseigné 11/05
XP de lorddavid 647 Nombre total de messages de lorddavid
SerialCliker
  #3 (permalink)  
Vieux 10/12/2010, 16h56
Merci du tuto
En fait je pensais pas que c'était aussi simple de créer une page web...
Réponse avec citation
Réponse

Outils de la discussion

Config des règles de ce forum
Règles de messages
Vous ne pouvez pas créer de nouvelles discussions
Vous ne pouvez pas envoyer des réponses
Vous ne pouvez pas envoyer des pièces jointes
Vous ne pouvez pas modifier vos messages

Les balises BB sont activées : oui
Les smileys sont activés : oui
La balise [IMG] est activée : oui
Le code HTML peut être employé : oui
Trackbacks are oui
Pingbacks are oui
Refbacks are oui


A propos d'IK

Infographik alias IK est un forum d'entre-aide dans le domaine de l'infographie numerique
Depuis plus de 10 ans ce forum propose des tutoriaux un espace communautaire francophone.

We need You !

Faire un don permet de régler les frais de fonctionnement du site tel que l'hebergement, le ndd etc...
Faire un don

Fuseau horaire GMT +2. Il est actuellement 06h24.