Faire une mise en page Web de blog élégante et simple en utilisant Photoshop
Ce tutoriel de création de sites Web vous montrera le processus de développement d'une maquette PSD d'une mise en page web de blog simple et propre. Nous allons créer le design de la page d'accueil du blog. La prochaine partie de ce tutoriel vous expliquera comment coder le PSD en HTML / CSS.
Série de tutoriel de mise en page Web de blogs élégants et simples
Ce tutoriel est la première partie d’une série de tutoriels en deux parties. Cette partie (partie 1) explique comment créer la maquette dans Photoshop. Le prochain tutoriel (partie 2) expliquera comment créer un modèle Web HTML / CSS pour la conception PSD.
- Partie 1: Créer une mise en page Web de blog élégante et simple à l'aide de Photoshop
- Partie 2: Conversion PSD / HTML : Mise en page Web CSS3 élégante et simple (* à venir)
Résultat final
Cliquez sur l'image ci-dessous pour voir le travail en pleine échelle.
Créer un nouveau document Photoshop
1 Allons droit au travail. Tout d’abord, ouvrez Adobe Photoshop (bien évidemment). J'utilise CS4, mais les autres versions de CS fonctionneront très bien. Commencez par créer un nouveau document (Ctrl / Cmd + N); faire le document 1046px par 1630px avec un fond blanc.
Créer un nouveau document Photoshop
Créer le fond
2 La couche d'arrière-plan par défaut de votre nouveau document Photoshop sera verrouillée et non modifiable. nous devons faire quelque chose à ce sujet. Double-cliquez sur la vignette de la couche d’arrière-plan dans le panneau Calques. cela ouvrira la boîte de dialogue Nouveau calque. Il vous suffira d'appuyer sur le bouton OK pour rendre le calque modifiable.
3 Cliquez à présent sur Ctrl / Cmd + clic sur la vignette du calque d’arrière-plan (par défaut, Photoshop le renomme en calque 0) dans le panneau Calques pour placer une sélection autour du fond.
4 Dans le panneau Outils, définissez la couleur d'arrière-plan sur une couleur bleue (# 45a0ac) et appuyez sur Ctrl / Cmd + Retour arrière, qui est le raccourci clavier permettant de remplir une sélection avec la couleur d'arrière-plan.
5 Votre calque d'arrière-plan devrait maintenant être une nuance de bleu foncé. Choisissez Filtre> Bruit> Ajouter du bruit tant que le calque Arrière-plan est toujours sélectionné. Modifiez le montant à 2%, puis appliquez le filtre.
Créer le fond
Définir certains guides Photoshop initiaux
6 Pour que notre travail reste aligné, définissez trois guides verticaux (Affichage> Nouveau guide) aux emplacements suivants: 60.5px, 505px et 955px.
Conseil: activez et désactivez la visibilité de vos guides Photoshop en appuyant sur Ctrl / Cmd +;.
Définissez également un guide horizontal à 40px.
Ajouter le nom du blog
8 Sélectionnez l'outil Texte horizontal (T) dans le panneau Outils, puis tapez le nom de votre blog en haut à gauche. Dans ce cas, j’ai utilisé le Museo Slab 500 de 65 pts. La couleur du texte doit être gris foncé (n ° 252525) pour créer un contraste bon mais subtil avec notre arrière-plan bleu foncé. En passant, vous pouvez définir toutes ces options de type dans la barre des options lorsque vous avez sélectionné l'outil de type horizontal.
9 Double-cliquez sur le calque de texte du nom de votre blog dans le panneau Calques pour accéder à la boîte de dialogue Styles de calque. Appliquez un style de calque Ombre portée et un style de calque Inner Shadow pour donner au texte un aspect typographique / incrusté.
Modifiez la couleur de l’ombre portée en bleu clair (# 3f9cb0), le mode de fusion à l’écran, ainsi que la distance et la taille en 1px.
Ajouter le nom du blog
Modifiez la distance et la taille de l’ombre intérieure en 2px.
Ajouter le nom du blog
10 Alignez le texte sur les guides comme je l'ai fait à l'aide de l'outil Déplacement (V) pour positionner votre texte.
Ajouter le nom du blog
Ajouter des liens au menu de navigation principal
11 En utilisant à nouveau l'Outil de texte horizontal, créez quatre liens (distincts) dans la barre de navigation en utilisant la même police qu'auparavant, mais cette fois, réduisez la taille de la police à 20 pts. Tapez-les dans des calques séparés. Dans ce tutoriel, les éléments de menu sont "Accueil", "À propos de", "Archives" et "Contact".
12 Alignez le lien de la 4ème barre de navigation ("Contact") avec le guide situé à l'extrême droite et le lien de la première barre de navigation ("Accueil") avec le guide situé à droite du nom du blog. Les deux autres liens devraient être quelque part entre eux.
13 Pour les aligner parfaitement, sélectionnez les 4 calques dans le panneau Calques. Ensuite, choisissez Calque> Aligner> Vertical.
14 Pour que les liens de la barre de navigation aient un espacement égal entre eux, sélectionnez les 4 calques dans le panneau Calques, puis choisissez Calque> Distribuer> Centres horizontaux.
Ajouter des liens au menu de navigation principal
15 Ajoutez un guide horizontal (Affichage> Nouveau guide) à 88px et déplacez les liens à l'aide de l'outil Déplacement (V) de sorte que le texte repose sur le guide.
Créer le fond de lien du menu de navigation active
16 Nous mettrons en surbrillance la page sur laquelle l'utilisateur se trouve avec un arrière-plan, une couleur de texte et une forme différents. L'arrière-plan aura la forme d'un "signet" (ce qui donne à notre mise en page web une forme de sémantique visuelle). Je vais vous montrer comment créer cette forme de "signet". Commencez par créer un nouveau calque (nommez-le "linkbg"). Sélectionnez l'outil Rectangle de sélection (M) dans le panneau Outils. Dans la barre des options de l'outil Rectangle de sélection, définissez l'option Style sur Taille fixe, puis définissez l'option Largeur sur 100px et l'option Hauteur 148px. Placez votre sélection sur le canevas quelque part autour de notre barre de menus de navigation.
17 Changez la couleur d’arrière-plan en gris foncé (# 252525) et appuyez sur Ctrl / Cmd + Retour arrière pour remplir la forme rectangulaire.
18 Sélectionnez maintenant l'outil Forme personnalisée (U) et définissez l'option Forme de la barre d'options sur Flèche 2 (forme personnalisée préemballée fournie avec Photoshop).
19 Dessinez la flèche sur votre toile à l'aide de l'outil Forme personnalisée, puis sélectionnez son calque dans le panneau Calques afin de pouvoir le faire pivoter vers le haut (Edition> Transformer> 90o CCW).
20 Cliquez avec le bouton droit sur le calque en forme de flèche et choisissez Rasteriser le calque pour le convertir en calque normal.
21 Dans le panneau Calques, modifiez l'ordre d'empilement des calques et assurez-vous que le calque avec flèche est au-dessus du calque gris "linkbg".
22 Sélectionnez le calque flèche et le calque "linkbg" dans le panneau Calques, puis choisissez Calque> Aligner> Centres horizontaux.
Créer le fond de lien du menu de navigation active
23 Ctrl / Cmd + clic sur la vignette du calque de flèche dans le panneau Calques pour placer une sélection autour de la flèche, basculer vers le calque "linkbg", puis appuyer sur Retour arrière ou Supprimer pour supprimer la zone située sous la sélection de flèche.
Après cela, vous n’avez plus besoin de la couche de flèche, vous pouvez donc supprimer la couche.
24 Vous devriez maintenant avoir l’arrière-plan du lien du menu de navigation actif, qui ressemble à un signet. Laissez-nous créer un style qui correspond à l'aspect de notre logo en appliquant les styles de calque Inner Glow, Color Overlay et Stroke.
La couleur de lueur interne doit être gris foncé (# 2e2e2e2).
Créer le fond de lien du menu de navigation active
La couche de couleur devrait être à nouveau gris foncé (# 252525). Vous n’avez pas nécessairement besoin de ce style de calque, car nous l’avons déjà rempli avec cette couleur plus tôt.
Créer le fond de lien du menu de navigation active
La couleur du trait doit être noire (# 000000).
Créer le fond de lien du menu de navigation active
Voici à quoi devrait ressembler notre indicateur de lien actif "Signet":
Créer le fond de lien du menu de navigation active
Styliser et positionner les liens du menu de navigation
25 Il est temps de donner à nos liens dans la barre de menus des styles. Tout d’abord, ajoutez un style de calque Ombre portée aux trois autres liens non actifs ("À propos de", "Archives" et "Contact").
Styliser et positionner les liens du menu de navigation
26 Ensuite, modifiez la couleur du texte du premier lien ("Accueil") en blanc (#ffffff) à l'aide de l'outil Texte horizontal (T).
27 Alignez le premier lien horizontalement avec la forme du signet en utilisant Calque> Aligner> Centres horizontaux. J'ai ajouté une petite forme vectorielle swoosh que j'ai créée dans Adobe Illustrator juste en dessous du texte "Maison", mais n'hésitez pas à l'ignorer.
Styliser et positionner les liens du menu de navigation
Créer un séparateur d'encart horizontal
28 Ajoutez un autre guide horizontal à 160px.
29 Sélectionnez l'outil Rectangle de sélection (M) et créez une sélection rectangulaire mince de 890x1px.
30 Ajoutez un nouveau calque (nommez-le "dividertop") et, dans le nouveau calque, appuyez sur Ctrl / Cmd + Retour arrière pour remplir le rectangle de n'importe quelle couleur.
31 Appliquez un style de calque Superposition de couleurs au calque "dividertop" de sorte que le rectangle soit légèrement plus clair que la couleur de notre fond bleu foncé (n ° 2c7c88).
Créer un séparateur d'encart horizontal
32 Alignez le rectangle à gauche et le guide supérieur à l’aide de l’outil Déplacement (V).
33 Dupliquez le calque et déplacez-le juste en dessous du rectangle d'origine. Renommez la couche en "dividerbottom".
34 Donnez-lui un style de calque Superposition de couleurs bleu clair (# 4fbaca).
Créer un séparateur d'encart horizontal
Liez les calques "dividertop" et "dividerbottom" en les sélectionnant simultanément dans le panneau Calques, en cliquant avec le bouton droit de la souris sur l'un d'entre eux, puis en choisissant Lier les calques dans le menu contextuel qui s'affiche. Cela les maintiendra ensemble de sorte que si nous devons les déplacer, les deux couches se déplaceront ensemble.
Créer un séparateur d'encart horizontal
Conception du fond de date de publication
35 Nous avons maintenant terminé avec la zone d’en-tête de notre mise en page web. Passons à la zone de contenu principale, en commençant par la date de la première entrée de blog. La première chose à faire: nous devons ajouter un autre guide horizontal à 210px.
36 Sélectionnez l'outil Rectangle arrondi (U) dans le panneau Outils et réglez le rayon sur 10 cm dans la barre des options.
37 Créez un rectangle arrondi de 75x150px avec l’outil Rectangle arrondi.
38 Appliquez un style de calque Inner Shadow au calque de forme rectangle arrondi, la couleur de l’ombre interne étant définie sur la couleur bleue (# 3793a0).
Conception du fond de date de publication
39 Appliquez également un style de calque Superposition de couleurs défini sur un bleu plus foncé que l'ombre intérieure (# 2c788).
Conception de l’arrière-plan de la date de publicationConception de l’arrière-plan de la date de publication
40 Donnez à la forme un trait en appliquant un style de calque Trait avec une couleur de trait d'un bleu plus foncé (# 1a5a64) que la couleur de l'ombre intérieure.
Conception du fond de date de publication
41 Renommez le calque de forme en "datebg" (qui signifie "arrière-plan de la date") pour que votre travail soit organisé, puis Rasterisez le calque (cliquez dessus avec le bouton droit de la souris, puis choisissez Rasterize Layer).
42 À l'aide de l'outil Rectangle de sélection, sélectionnez environ 1/3 du côté droit de la forme, puis supprimez la zone sélectionnée.
Conception du fond de date de publication
43 Toujours sur le calque "datebg", ajoutez un filtre de bruit via Filtre> Bruit> Ajouter du bruit; utilisez 2% pour l'option Montant.
Créer l'ombre verticale de la date de publication
44 Créez maintenant un nouveau calque pour l’ombre du fond de la date. À l’aide de l’outil elliptique (M), créez un ovale d’environ 17 pixels de large et 100 pixels de haut; Pour ce faire, la méthode la plus précise consiste à utiliser Taille fixe comme option de style de l’outil elliptique et de saisir les dimensions pour la largeur et la hauteur.
45 Placez la sélection à droite du fond de la date. Remplissez la sélection (Maj + F5) de noir (# 000000) et renommez le calque "ombre".
46 Appliquez un flou gaussien (Filtre> Flou> Flou gaussien) sur le calque "Ombre" en définissant l'option Rayon sur 3px.
47 À l'aide de l'outil Rectangle de sélection, sélectionnez la moitié droite de l'ombre ovale floue, puis supprimez cette moitié en appuyant sur la touche Retour arrière ou Supprimer.
48 Terminez l’ombre en baissant l’opacité du calque à 55%.
Conception du fond de date de publication
Ajouter le texte de la date, le titre du blog et les métadonnées
49 Une fois l’arrière-plan de la date terminé, il est temps d’ajouter la date de publication de l’entrée de blog. Obtenez l’outil de type horizontal (T) dans le panneau Outils et écrivez votre date à l’aide de Museo Slab 500. Le jour numérique doit avoir une taille de police d’environ 42 pts et le mois (situé sur une nouvelle ligne sous le jour numérique) doit être à 20 pts. . J'ai choisi d'écrire "13 APR" avec APR sur une nouvelle ligne.
50 Alignez correctement les ombres semi-ovales (calque "shadow"), l’arrière-plan de la date (calque "datebg") et le calque de type de date à l’aide des commandes Déplacer l’outil et Alignement des calques précédemment utilisées.
51 Pour le titre du message, j'ai choisi la police Georgia, d'une taille de 35 points. Pour les métadonnées (auteur, nombre de commentaires), j'ai utilisé Trajan Pro à 20 pt; vous pouvez trouver le point central / la virgule géorgienne que j'ai utilisée pour séparer le nom de l'auteur et le nombre de commentaires ici - copiez-le et collez-le dans Photoshop. Ajustez également la hauteur du texte à 28px. Vous pouvez le faire dans Fenêtre> Panneau de caractères.
Voici la date, le titre de l’article et les métadonnées de l’article.
Conception du fond de date de publication
52 Ajouter un guide vertical à 165px. Alignez le texte avec le guide que vous venez de créer et la date.
Conception du fond de date de publication
Ajouter l'image de publication du blog
53 A l'aide de l'outil Rectangle de sélection (M), créez un rectangle de 480x150px (la hauteur dépend de la taille de l'image que vous utiliserez, mais notre largeur maximale est de 480px pour ce modèle).
54 Remplissez votre sélection avec une couleur quelconque sur un nouveau calque, puis appliquez un style de calque Trait qui représentera la bordure de notre image. La couleur de la bordure est gris foncé (# 1b1b1b).
Conception du fond de date de publication
Ajouter et positionner le contenu de l'entrée de blog
55 Recherchez une de vos images et collez-la dans votre document Photoshop. J’ai utilisé la photo d’un snowboardeur, mais l’image que vous choisissez importe peu; c’est juste pour le plaisir des yeux dans notre maquette PSD. Ajustez la taille de votre image avec Free Transform (Ctrl / Cmd + T) afin qu’elle s’adapte à notre rectangle.
Conception du fond de date de publication
56 Basculez sur l’outil de type horizontal (T) et collez du texte sous l’image. Vous pouvez utiliser un outil générateur Lorem Ipsum comme celui-ci pour générer du texte en un tournemain, mais ce n’est jamais une mauvaise idée d’utiliser une véritable copie Web pour rendre la maquette aussi fidèle que possible. Ma police de choix pour le contenu du texte est Trebuchet MS avec une taille de police de 17 points et une hauteur de début / ligne de 28 points.
Sélectionnez tous les éléments de conception de publication de blog dans le panneau Calques et alignez-les sur l'ombre à l'aide des guides que nous avons créés.
Conception du fond de date de publication
58 Ajouter un nouveau guide horizontal à 450px. Alignez le texte avec le guide de gauche et le nouveau guide.
Conception du fond de date de publication
59 Sélectionnez tous les calques de publication de blog dans le panneau Calques ("datebg", "ombre", "date", le titre du message de blog, le texte de métadonnées, l'arrière-plan de l'image, l'image et le texte de publication de blog) et le groupe. ensemble en accédant à Calque> Regrouper les calques (Ctrl / Cmd + G), qui placera tous les calques dans un dossier. Nommez le groupe de calques "Post 1".
Ajouter un séparateur horizontal inséré au bas de l'entrée de publication de blog
60 Ajouter un autre guide horizontal à 700px. Dupliquez le diviseur créé précédemment et renommez le calque "dividerpost".
61 Redimensionnez la largeur du diviseur avec Free Transform afin qu’elle corresponde à la largeur de l’image d’entrée. Déplacez ensuite le diviseur à l’aide de l’outil Déplacement (V) afin qu’il soit placé sur le guide horizontal que nous venons de créer.
Ajouter une entrée au blog d'Anther
62 Dupliquez le groupe de couches "Post 1" et renommez le doublon en "Post 2".
63 Ajoutez un nouveau guide horizontal à 720px et alignez l'ombre de la case de la date (de Post 2) sur le nouveau guide.
64 Modifiez les éléments du groupe de couches "Publication 2" de sorte qu'il soit différent de celui du premier article de blog. Par exemple, le numéro du commentaire, la date et le titre de l'article peuvent être modifiés.
Conception du fond de date de publication
Construire le fond de la barre latérale
65 Créez un rectangle de 250 x 350 pixels à l'aide de l'outil Rectangle de sélection (remplissez la sélection de sélection rectangulaire avec une couleur quelconque sur un nouveau calque appelé "barre latérale"). Ce rectangle est l’arrière-plan de notre barre latérale.
66 Alignez la barre latérale sur le guide horizontal à 210px et le guide vertical à l'extrême droite que nous avons créés auparavant.
67 Attribuez à l’arrière-plan de la barre latérale un style de calque Superposition de couleurs; la couleur de la superposition de couleur devrait être un bleu foncé (# 2c7c88).
Construire le fond de la barre latérale
En outre, attribuez à l'arrière-plan de la barre latérale un style de calque de trait, la couleur du trait étant un bleu plus foncé (# 116678).
Construire le fond de la barre latérale
69 Installez un guide vertical à 730px et un à 930px; Nous utiliserons ces guides pour nous assurer qu'il y a du rembourrage dans notre barre latérale.
Créer la fonction de recherche
70 Utilisez l'outil Rectangle arrondi (U) pour tracer un rectangle arrondi du guide vertical gauche (à 730 pixels) au guide vertical de droite. le rectangle arrondi devrait avoir environ 25 pixels de haut. Nommez ce calque de forme comme "barre de recherche". Attribuez au rectangle arrondi un style de calque superposé de couleurs blanc (#ffffff).
71 Recherchez une icône en forme de loupe pour représenter le bouton de recherche (vous pouvez utiliser un outil Web tel que IconFinder pour rechercher des icônes gratuites).
72 Positionnez l’icône dans le rectangle arrondi blanc (vers sa gauche).
73 Créez un diviseur horizontal comme vous l’avez fait auparavant, allant du guide vertical de 730 pixels au style de guide vertical de 930 pixels. Ajouter un peu d'espacement entre elle et la barre de recherche.
Créer la fonction de recherche
Ajouter le texte de la barre latérale
74 Passons maintenant au texte. J'ai ajouté un en-tête de barre latérale ("Articles récents") à l'aide de l'outil Type horizontal (T) défini sur une police Georgia et une taille de police de 23 pt. J’ai répertorié trois des articles de blog les plus récents en utilisant les polices Trebuchet MS à 17 points et à la ligne / hauteur, à nouveau, à 28 points. Appelez ce calque de texte "messages récents".
75 Dupliquez le séparateur horizontal par le haut et déplacez-le de manière à ce qu’il se trouve au bas des "messages récents".
76 Créez un autre calque de texte identique à celui d’avant, mais cette fois-ci pour les commentaires récents.
77 Alignez les deux blocs de texte sur le guide de gauche.
Ajouter le texte de la barre latérale
Conception des blocs d'annonces dans la barre latérale
78 Dessinez quelques carrés de 118x118px à l’aide de l’outil Rectangle de sélection. Maintenez la touche Maj enfoncée pour maintenir votre boîte proportionnellement égale en hauteur et en largeur.
79 Alignez un carré à droite (guide de droite) et l'autre à gauche (guide de gauche).
80 Remplissez les deux carrés de couleur grise (# f6f6f6) en utilisant un style de calque Superposition de couleurs. Cela nous donne un endroit pour ajouter des bannières publicitaires sur notre blog.
Conception des blocs d'annonces dans la barre latérale
81 Dupliquez deux fois ou plus les deux zones grises en fonction de l’espace publicitaire souhaité.
Conception des blocs d'annonces dans la barre latérale
Regrouper les barres latérales
82 Regroupez tous les calques des éléments de la barre latérale et nommez-le en tant que "barre latérale" pour que notre maquette reste organisée (si vous travaillez avec un développeur front-end qui doit convertir votre PSD en HTML / CSS pour vous, il vous aimera pour ça).
Disposez le pied de page principal du blog
83 Créez deux nouveaux guides horizontaux: l’un à 1220px et l’autre à 1550px.
84 A l'aide de l'outil Rectangle de sélection (M), tracez un rectangle sur toute la largeur de la présentation Web entre les deux nouveaux guides situés au bas de la présentation, à l'emplacement du pied de page. Remplissez ce rectangle avec un gris foncé (# 2c7c88). Voici le fond de notre pied de page.
85 Appliquez un filtre de bruit sur l’arrière-plan de notre pied de page (Filtre> Bruit> Ajouter du bruit) en utilisant 1% pour la valeur du montant.
Appliquez un style de calque Inner Shadow noir (# 000000) à l’arrière-plan du pied de page.
Entretien ménager
Entretien ménager
87 Créez maintenant trois colonnes de texte de taille égale, toutes de même largeur. Dans ce cas, j'ai copié un texte intéressant hors de Wikipedia pour me donner une copie Web réelle du texte de pied de page. Le titre ("Titre du widget") est fixé à 23 pt Géorgie et le texte normal est Trebuchet MS à 17 pt. N’oubliez pas de changer la hauteur d’entrée / ligne à 28 points!
Créer les séparateurs de colonne du pied de page principal du blog
88 Pour les séparations verticales blanches entre les colonnes de bas de page, nous utiliserons des motifs. La première étape consiste à créer un nouveau document Photoshop (Ctrl / Cmd + N) avec une largeur de 1px et une hauteur de 3px.
Créer les séparateurs de colonne du pied de page principal du blog
89 Effectuez un zoom très rapproché pour vous permettre de voir votre travail (à l'aide de l'outil Zoom).
90 Colorez le premier pixel (haut) en noir (# 000000) à l'aide de l'outil Rectangle de sélection et Édition> Remplir.
91 Sélectionnez autour du canevas (Ctrl / Cmd + A), puis choisissez Edition> Définir un motif. Nommez votre motif de manière logique, par exemple "Points verticaux".
Créer les séparateurs de colonne du pied de page principal du blog
92 Revenez à notre document principal dans Photoshop.
93 Faire une sélection de rectangle de sélection rectangulaire vertical (1x280px).
94 Ajoutez un nouveau calque et appuyez sur Maj + F5 pour afficher la boîte de dialogue Remplissage. Dans le menu déroulant Utiliser l'option, recherchez le motif que nous avons créé ("Points verticaux") dans la liste et appuyez sur OK pour remplir notre sélection de rectangle de sélection rectangulaire.
Créer les séparateurs de colonne du pied de page principal du blog
95 Dupliquez le calque avec le séparateur vertical en pointillés et placez-les entre les trois colonnes de pied de page.
96 Regroupez les colonnes de texte dans leurs propres groupes de calques. Alignez les groupes de calques de colonnes de texte verticalement.
97 Ajoutez un style de calque Superposition de couleurs blanche aux deux séparations verticales en pointillés afin qu'elles apparaissent en blanc.
Créer les séparateurs de colonne du pied de page principal du blog
Créer le pied de page secondaire / auxiliaire
98 Créez une sélection de sélection rectangulaire courte au bas de la présentation et remplissez-la de gris foncé (# 1f2024).
99 Appliquez un filtre Bruit avec le montant défini à 1%.
100 Tapez du texte tel que vos informations de copyright en utilisant la police Trebuchet MS à une taille de police de 17 points. Aligner le texte horizontalement avec l’arrière-plan, placez-le sur le guide extrême gauche.
Metadosi réalise des mises en page Web pour votre site internet
C'est fini ! N'était-ce pas si facile ? Si vous avez besoin d'aide pour créer une mise en page web à partir de vos fichiers Photoshop, contactez-nous en ligne ou par téléphone au 06 80 60 77 77, nous serons ravis de le faire pour vous !
Série de tutoriels de mise en page Web de blogs élégants et simples
- Partie 1: Créer une mise en page Web de blog élégante et simple à l'aide de Photoshop
- Partie 2: Conversion PSD / HTML: Mise en page Web CSS3 élégante et simple (* à venir)