suleiman
14/03/2007, 14h59
Tout d'abord , je veus vous expliquer quleques choses pour faire un style fluide .
Fluide , c.a.d. , flexible , compatible sur toutes les résolutions du moniteur .
La largeur idéale est 777 px .
La hauteur n'a pas d'importance .
La résolution est 27.75 pixels/cm , c'est plus facile comme ca ,pour obtenir une image symétrique.
777 px / 27.75 px/cm = 28 cm .
http://www.rasarit.com/lesson/mon_style/mon_style_1.jpg
Maintenant , je ne veus pas vous expliquer comment faire un design , parceque c'est personal .
Mais je veus expliquer un peu quelques choses trés important pour obtenir un design sans fautes .
Voila mon design :
http://www.rasarit.com/lesson/mon_style/mon_design.jpg
Moi , je dois découper mon design en :
- 4 images fixes
- 4 images mobiles
http://www.rasarit.com/lesson/mon_style/decoupe.jpg
Comment decouper les images ?
Ils sont plusieures méthodes , mais j'utilise dans ce tuto la méthode la plus facile .
Utilisant : Rectangular Marquee Tool (M)
http://www.rasarit.com/lesson/mon_style/mon_style_2.jpg
1-Calculez la largeur du C et D
Clickez sur le design Ctrl+(+) pour agrandir la résolution jusqu'à 1600% .
Après fixez (M)
http://www.rasarit.com/lesson/mon_style/mon_style_3.jpg
faites un click Ctrl+C (copier) -> Allez en haut dans le menu du Photoshop et choisissez File => New .
http://www.rasarit.com/lesson/mon_style/mon_style_4.gif
Notez sur une feuille la LARGEUR .
Dans notre exemple c'est : 30 px .
2- Calculez la Hauteur du Fixe1 et Fixe2
C'est aproximativement la même chose comme pour C et D , mais maintenant ,
notre intêret et de savoir la Hauteur du partie Fixe .
Pour cela , utilisez (M) Rectangular Marquee Tool et tirez d'ou vous voulez jusqu'en haut
Maintenant le largeur n'a pas d'inportance .
http://www.rasarit.com/lesson/mon_style/mon_style_23.jpg
Après , clickez su Ctrl+C et allez sur File->New et voila .
http://www.rasarit.com/lesson/mon_style/mon_style_24.jpg
Notez sur une feuille la Hauteur .
Dans notre exemple c'est : 175 px .
Nous avons maintenat : Hauteur et largeur du Fixe1 et Fixe 2 .
Alors , encore une fois , utilisez (M) , mais maintenant avec les dimensions fixes .
http://www.rasarit.com/lesson/mon_style/mon_style_25.jpg
Width = 30px et Height = 175 px .
Fixez (M) en haut et à gauche (pour bien voir faites Ctrl+(+) pour agrandir la résolution jusqu'à 1600%)
http://www.rasarit.com/lesson/mon_style/mon_style_6.jpg
Faites Ctrl+x , pour découper cette partie , et allez : File -> New : Ok
http://www.rasarit.com/lesson/mon_style/mon_style_5.jpg
et faites Ctrl+v
et voila la première image
http://www.rasarit.com/lesson/mon_style/mon_style_7.jpg
Pour que vous sauvez cette image : Clickez : Shift+Ctrl+S
Ecrivez le nom : haut_gauche_fix
http://www.rasarit.com/lesson/mon_style/mon_style_8.jpg
http://www.rasarit.com/lesson/mon_style/mon_style_9.jpg
Répétez les étapes pour obtenir les 3 images fixes qui ont rester .
3- Les images mobil (pour les fonds)
Utilisez (M) Rectangular Marquee Tool avec les dimensions fixes : Height = 175 px (comme image fixe 1) ei width=1px
http://www.rasarit.com/lesson/mon_style/mon_style_12.jpg
Sauvez cette image comme : haut_fond
http://www.rasarit.com/lesson/mon_style/mon_style_11.jpg
Répétez cette étape pour bas_fond . N'oubliez pas que la Hauteur doit être = Hauteur de Fixe (3,4)
Utilisez (M) Rectangular Marquee Tool avec les dimensions fixes : Height = 30 px ei width= 30px (comme image fixe 1)
http://www.rasarit.com/lesson/mon_style/mon_style_3.jpg
Répétez cette étape pour obtenir l'image mobile droite .
4- Décupez le banner
Nous avons Largeur de design : 777px , Largeur de fixe 1 = Largeur de fixe 2 = 30 px .
Alors : Largeur de banner = 777 - 2*30 = 717 px .
Donc Utilisez (M) Rectangular Marquee Tool avec les dimensions fixes : Height = 175 px et width= 717px
http://www.rasarit.com/lesson/mon_style/mon_style_13.jpg
Répétez ça pour le banner en bas avec les dimonsions nécessaire .
Résultat
haut_droite_fixe : http://www.rasarit.com/lesson/mon_style/style/haut_droite_fixe.jpg
haut_gauche_fixe : http://www.rasarit.com/lesson/mon_style/style/haut_gauche_fixe.jpg
haut_fond : http://www.rasarit.com/lesson/mon_style/style/haut_fond.jpg
bas_droite_fixe : http://www.rasarit.com/lesson/mon_style/style/bas_droite_fixe.jpg
bas_gauche_fixe : http://www.rasarit.com/lesson/mon_style/style/bas_gauche_fixe.jpg
bas_fond : http://www.rasarit.com/lesson/mon_style/style/bas_fond.jpg
droite : http://www.rasarit.com/lesson/mon_style/style/droite.jpg
gauche :http://www.rasarit.com/lesson/mon_style/style/gauche.jpg
haut_banner :
http://www.rasarit.com/lesson/mon_style/style/haut_banner.jpg
bas_banner : http://www.rasarit.com/lesson/mon_style/style/bas_banner.jpg
Encadrez les images dand un "table" HTML
Le table doit être comme ca :
http://www.rasarit.com/lesson/mon_style/mon_style_17.jpg
C.A.D.
http://www.rasarit.com/lesson/mon_style/mon_style_20.jpg
Et voila
http://www.rasarit.com/lesson/mon_style/mon_style_19.jpg
Pour mettre les banners
http://www.rasarit.com/lesson/mon_style/mon_style_22.jpg
Le resultat :
http://www.rasarit.com/lesson/mon_style/mon_style_21.jpg
N.B.
Dans le folder du forum : forum/ .
Créez un nouveau folder et dénommez le : mon_style .
Dans mon_style c.a.d forum/mon_style créez un folder style et mettez dans ce folder les images coupés .
Jusqu'à maintenant c'est la première etape de : Comment faire son style .
Fluide , c.a.d. , flexible , compatible sur toutes les résolutions du moniteur .
La largeur idéale est 777 px .
La hauteur n'a pas d'importance .
La résolution est 27.75 pixels/cm , c'est plus facile comme ca ,pour obtenir une image symétrique.
777 px / 27.75 px/cm = 28 cm .
http://www.rasarit.com/lesson/mon_style/mon_style_1.jpg
Maintenant , je ne veus pas vous expliquer comment faire un design , parceque c'est personal .
Mais je veus expliquer un peu quelques choses trés important pour obtenir un design sans fautes .
Voila mon design :
http://www.rasarit.com/lesson/mon_style/mon_design.jpg
Moi , je dois découper mon design en :
- 4 images fixes
- 4 images mobiles
http://www.rasarit.com/lesson/mon_style/decoupe.jpg
Comment decouper les images ?
Ils sont plusieures méthodes , mais j'utilise dans ce tuto la méthode la plus facile .
Utilisant : Rectangular Marquee Tool (M)
http://www.rasarit.com/lesson/mon_style/mon_style_2.jpg
1-Calculez la largeur du C et D
Clickez sur le design Ctrl+(+) pour agrandir la résolution jusqu'à 1600% .
Après fixez (M)
http://www.rasarit.com/lesson/mon_style/mon_style_3.jpg
faites un click Ctrl+C (copier) -> Allez en haut dans le menu du Photoshop et choisissez File => New .
http://www.rasarit.com/lesson/mon_style/mon_style_4.gif
Notez sur une feuille la LARGEUR .
Dans notre exemple c'est : 30 px .
2- Calculez la Hauteur du Fixe1 et Fixe2
C'est aproximativement la même chose comme pour C et D , mais maintenant ,
notre intêret et de savoir la Hauteur du partie Fixe .
Pour cela , utilisez (M) Rectangular Marquee Tool et tirez d'ou vous voulez jusqu'en haut
Maintenant le largeur n'a pas d'inportance .
http://www.rasarit.com/lesson/mon_style/mon_style_23.jpg
Après , clickez su Ctrl+C et allez sur File->New et voila .
http://www.rasarit.com/lesson/mon_style/mon_style_24.jpg
Notez sur une feuille la Hauteur .
Dans notre exemple c'est : 175 px .
Nous avons maintenat : Hauteur et largeur du Fixe1 et Fixe 2 .
Alors , encore une fois , utilisez (M) , mais maintenant avec les dimensions fixes .
http://www.rasarit.com/lesson/mon_style/mon_style_25.jpg
Width = 30px et Height = 175 px .
Fixez (M) en haut et à gauche (pour bien voir faites Ctrl+(+) pour agrandir la résolution jusqu'à 1600%)
http://www.rasarit.com/lesson/mon_style/mon_style_6.jpg
Faites Ctrl+x , pour découper cette partie , et allez : File -> New : Ok
http://www.rasarit.com/lesson/mon_style/mon_style_5.jpg
et faites Ctrl+v
et voila la première image
http://www.rasarit.com/lesson/mon_style/mon_style_7.jpg
Pour que vous sauvez cette image : Clickez : Shift+Ctrl+S
Ecrivez le nom : haut_gauche_fix
http://www.rasarit.com/lesson/mon_style/mon_style_8.jpg
http://www.rasarit.com/lesson/mon_style/mon_style_9.jpg
Répétez les étapes pour obtenir les 3 images fixes qui ont rester .
3- Les images mobil (pour les fonds)
Utilisez (M) Rectangular Marquee Tool avec les dimensions fixes : Height = 175 px (comme image fixe 1) ei width=1px
http://www.rasarit.com/lesson/mon_style/mon_style_12.jpg
Sauvez cette image comme : haut_fond
http://www.rasarit.com/lesson/mon_style/mon_style_11.jpg
Répétez cette étape pour bas_fond . N'oubliez pas que la Hauteur doit être = Hauteur de Fixe (3,4)
Utilisez (M) Rectangular Marquee Tool avec les dimensions fixes : Height = 30 px ei width= 30px (comme image fixe 1)
http://www.rasarit.com/lesson/mon_style/mon_style_3.jpg
Répétez cette étape pour obtenir l'image mobile droite .
4- Décupez le banner
Nous avons Largeur de design : 777px , Largeur de fixe 1 = Largeur de fixe 2 = 30 px .
Alors : Largeur de banner = 777 - 2*30 = 717 px .
Donc Utilisez (M) Rectangular Marquee Tool avec les dimensions fixes : Height = 175 px et width= 717px
http://www.rasarit.com/lesson/mon_style/mon_style_13.jpg
Répétez ça pour le banner en bas avec les dimonsions nécessaire .
Résultat
haut_droite_fixe : http://www.rasarit.com/lesson/mon_style/style/haut_droite_fixe.jpg
haut_gauche_fixe : http://www.rasarit.com/lesson/mon_style/style/haut_gauche_fixe.jpg
haut_fond : http://www.rasarit.com/lesson/mon_style/style/haut_fond.jpg
bas_droite_fixe : http://www.rasarit.com/lesson/mon_style/style/bas_droite_fixe.jpg
bas_gauche_fixe : http://www.rasarit.com/lesson/mon_style/style/bas_gauche_fixe.jpg
bas_fond : http://www.rasarit.com/lesson/mon_style/style/bas_fond.jpg
droite : http://www.rasarit.com/lesson/mon_style/style/droite.jpg
gauche :http://www.rasarit.com/lesson/mon_style/style/gauche.jpg
haut_banner :
http://www.rasarit.com/lesson/mon_style/style/haut_banner.jpg
bas_banner : http://www.rasarit.com/lesson/mon_style/style/bas_banner.jpg
Encadrez les images dand un "table" HTML
Le table doit être comme ca :
http://www.rasarit.com/lesson/mon_style/mon_style_17.jpg
C.A.D.
http://www.rasarit.com/lesson/mon_style/mon_style_20.jpg
Et voila
http://www.rasarit.com/lesson/mon_style/mon_style_19.jpg
Pour mettre les banners
http://www.rasarit.com/lesson/mon_style/mon_style_22.jpg
Le resultat :
http://www.rasarit.com/lesson/mon_style/mon_style_21.jpg
N.B.
Dans le folder du forum : forum/ .
Créez un nouveau folder et dénommez le : mon_style .
Dans mon_style c.a.d forum/mon_style créez un folder style et mettez dans ce folder les images coupés .
Jusqu'à maintenant c'est la première etape de : Comment faire son style .