So-Baka
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.



 
AccueilPortailRechercherDernières imagesS'enregistrerConnexion
Le Deal du moment : -37%
Promo : radiateur électrique d’appoint ...
Voir le deal
76.99 €

 

 [Moyen] Créer un webdesign

Aller en bas 
2 participants
AuteurMessage
Makino

Makino


Masculin Messages : 677
Date d'inscription : 01/07/2010
Age : 28
Localisation : Devant sont pc, derriere son ecran
Logiciel : Adobe Photoshop CS5

[Moyen] Créer un webdesign Empty
MessageSujet: [Moyen] Créer un webdesign   [Moyen] Créer un webdesign EmptyVen 9 Juil - 20:38

Bonjour,bonsoir; aujourd'hui je me lance dans un tutoriel qui vous permettra de faire un webdesign plutôt simple; enfin pas trop compliquez quoi :p

I-Ce que vous avez besoin :

-Photoshop CS4; (j'utiliserai cette version)
-Du temps
-Une connaissance de photoshop; savoir utiliser un style de calque; etc.
Et je pense que sa sera tout.


Tutoriel Video

A venir; peut être.

Le tutoriel

[align=justify]1.Tout d'abord il faut créer un nouveau document; ici j'ai pris comme dimension 1200*1400. Ensuite placez vos repaire comme ce-ci. Ici on va créer un menu horizontale.
[Moyen] Créer un webdesign Mini_8044161

Note: Pour placer un repaire; il faut déjà avoir la règle d'afficher pour cela faite ctrl+R ou Affichage/Règles. En suite prenez votre curseur de déplacement (v):[Moyen] Créer un webdesign 190913curseur_de_deplacement; puis partez de la règle d'en haut pour faire glisser votre repère.

2. En suite; prenez la couleur de votre choix; elle composera notre fond !
Pour ma part j'ai pris une couleur plutôt sombre.
[Moyen] Créer un webdesign Mini_8313292

A partir d'ici on va créer 4 groupes:

  1. Fond
  2. Header
  3. Menu
  4. Corps
  5. Footer

Mettez le calque 1 dans le groupe fond. On ne touche plus le groupe fond pour le moment.

3.On va maintenant touchez au groupe header.
Ici on va faire un header plutôt simple; on va prendre comme police Verdana , car tout le monde a cette police installer sur son ordinateur, et quand le site est visités il n'y a pas de problème d'affichage. Bref vous sélectionnez l'outil texte et commencer à créer le calque. Moi je met "Votre Site". Mettez ce texte en blanc avec une taille de 42 pixel.
[Moyen] Créer un webdesign Mini_6339063

Puis en va rajouter en plus petit ".com", on va le mettre en exposant. Comme ce-ci:
Spoiler:

En suite on va un peu plus personnaliser votre header:
Pour commencer vous allez prendre la première lettre de votre header et la mettre dans la couleur que vous voulez.
/!\Attention vous devrez gardez cette couleur elle va nous servir pour le menu./!\
Si votre texte est composé de deux mots vous ferez pareil pour la première lettre du deuxième mot.
Pour finir mettez ces deux lettres en 55 pixel.
[Moyen] Créer un webdesign Mini_8114533_3

Et enfin mettez le ".com" de la même couleur de ces deux lettres.
[Moyen] Créer un webdesign Mini_3029453_4

Voila; on a finit avec le header.

4)On va passer un menu; fermer le groupe "header" en cliquant sur la flèche.
Allez dans le groupe "menu". Puis créer deux nouveaux groupes :

  1. a
  2. a:hover

Le "a:hover" est du CSS. donc il sert que si vous voulez coder votre design; moi je conseil de le laisser. Bref allons dans le groupe "menu"; créer un nouveau calque qui sera en dessous des deux groupes. Puis prenez le rectangle de sélection et sélectionnez comme ce-ci:
[Moyen] Créer un webdesign Mini_186834

Puis remplissez le de blanc. Et mettez une "incrustation en dégradé" (Calque/Style de Calque/Incrustation en dégradé) , avec ces paramètres:
[Moyen] Créer un webdesign Mini_7487734_1

Pour que sa rende comme ce-ci:
[Moyen] Créer un webdesign Mini_4565054_2

En suite placez votre menu en créant plusieurs calque texte. Ce textes doivent être la couleur de votre fond:
[Moyen] Créer un webdesign Mini_6438974_3

En suite, on va passer au texte quand il va être survoler par vos visiteurs;
Dupliquez le groupes et nommer le a:hover.
Puis recoloriez tout vos calque texte avec la couleur de que vous avez mis lorsque vous avez fait le header (la couleur des deux lettre et du ".com"). Maintenant cachez tout vos claque "a:hover" sauf un. Et cachez le calque que ne vous avez pas cachez dans le groupe "a:hover" (si vous n'avez pas trop compris merci de me le dire :p).
Vous devrez arriver à sa:
[Moyen] Créer un webdesign Mini_4929664_4

5) Passons au corps du site. Allez dans le groupe corps et faire un nouveau groupe que vous appellerez "news".
Ensuite prenez l'outil Rectangle Arrondi([Moyen] Créer un webdesign 5190575_1). Puis faite comme vous le sentez moi j'ai fait quelque chose comme ce-ci :p :
[Moyen] Créer un webdesign Mini_2037175

Bien sur il faut qu'il soit blanc et que vous fait le même style de calque que pour le menu.
En suite prenez l'outil texte puis faite comme j'ai fait moi:
[Moyen] Créer un webdesign Mini_20665_2

Avec comme couleur; la couleur de fond et comme taille : 25 px.

En suite plus bas vous mettrez le texte plus bas comme ce-ci:
[Moyen] Créer un webdesign Mini_1821615_5

de couleur blanche avec une taille de 14 px.

On en a finit avec le corps.

6) Allez du courage ici c'est finit. En faites le footer est juste le copyright, mais on peut mettre autre chose. La je met juste le copyright! Vous allez sélectionné le comme ce-ci:
[Moyen] Créer un webdesign Mini_1396316_1

Puis le remplir de noir. En suite, baissez l'opacité de votre calque jusqu'a avoir ce que vous voulez.
Bien sur vous avez créer un nouveau calque qui est dans le dossier footer.
Et voilà on a terminé.



Ce tutoriel est créer par Makino; merci de ne pas copier sans mon autorisation.
Revenir en haut Aller en bas
http://makinop.x10.mx
Spanky

Spanky


Masculin Messages : 2160
Date d'inscription : 04/04/2010
Age : 28
Logiciel : Paint

[Moyen] Créer un webdesign Empty
MessageSujet: Re: [Moyen] Créer un webdesign   [Moyen] Créer un webdesign EmptyLun 12 Juil - 20:31

Merci pour le tuto, par contre t'aurais pu mettre le final non ? Arff

Edit en Moyen, on ne peut pas dire que c'est facile, ni difficile.
Revenir en haut Aller en bas
https://so-baka.1fr1.net/
 
[Moyen] Créer un webdesign
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [Moyen] Vecto + Typo
» [Moyen] Ichigo
» [Moyen] Let's ROCK !!!
» [Moyen] Jill Valentine
» [Moyen] Sign\' Sangoku

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
So-Baka :: Graphisme :: Partage :: Tutoriel :: Photoshop-
Sauter vers: