Tutoriel de conception de site Web : cas Wellknown.as
Le mois dernier, j’ai rencontré des gars qui travaillaient sur un très beau projet qui impliquait une application iPhone. Ils m’ont donc invité à concevoir le site Web, appelé Bien connu.as. J’ai adoré l’idée et j’ai commencé à chercher des références et de l’inspiration pour pouvoir commencer le design lui-même.
Donc, dans ce tutoriel, je vais vous montrer un peu comment je l’ai créé à l’aide de Fireworks. Bien sûr, vous pouvez faire la même chose dans Photoshop, les commandes changeront un peu mais le processus est pratiquement le même.
Références de conception
Étape 1
La première chose à faire est bien sûr d’avoir un concept en tête de ce que vous voulez faire. Dans mon cas, les gars de Wellknow.as m’ont dit exactement ce qu’ils voulaient pour la mise en page. J’ai également utilisé un framework CSS et le modèle Fireworks. Vous pouvez le télécharger sur http://960.gs/
Étape 2
Avec le Outil Rectangle (U) créer un nouveau rectangle avec la taille du document. Pour le Couleur utilisation Solide et #191D22. Puis sur le Panneau Propriétésclique sur le Ajouter une icône (+) et sélectionnez Ajoute du bruit. Utilisation 1 pour le Montant.
Étape 3
Avec le Outil Rectangle (U) créez un autre rectangle mais faites-le comme une bande commençant à 200 pixels dans l’axe Y. Pour le Utilisez la couleur #1c202a.
Étape 4
Cliquez sur Ajouter et à pour Ombre et lueur > Ombre intérieure. Utilisation 0 pour la distance, 40% pour l’Opacité, 1 pour le Flou et 270º pour l’Angle.
Étape 5
Cliquez à nouveau sur l’icône Ajouter et choisissez Ombre et éclat>Ombre portée. Utilisation 0 pour la distance, 65% d’opacité, 4 pour le flou. L’angle ne fera aucune différence car la distance est de 0.
Étape 6
Maintenant encore ajoutons quelques bruit le rectangle n’aura donc pas cette couleur unie, mais plutôt une belle sensation de plastique.
Étape 7
Ici, j’ai placé l’image de l’iPhone en plein centre de l’image alors qu’elle était assise dessus. Ils ne voulaient pas montrer l’interface de l’application pour le moment, donc cet angle était parfait.
Étape 8
Dupliquez le calque et accédez à Modifier> Transformer> Retourner verticalement. Puis changez le Opacité à 50% et allez à Modifier>Masquer>Révéler tout. Avec le Outil Dégradé (G) sélectionnez le préréglage noir et blanc et appliquez-le sur le masque de calque. Ce qui est blanc sera visible et ce qui est noir sera transparent. Alors, créez le fameux effet sol mouillé.
Étape 9
Ajouter un nouveau rectangle avec le Outil Rectangle et remplissez-le avec un dégradé en utilisant du blanc pour les deux couleurs. Il suffit de changer les opacités que l’on aura 100 % (1) et les autres 0 % (2). Utilisez le Outil Dégradé (G) pour appliquer le dégradé dans un angle de 90º.
Étape 10
Pour créer l’effet de lumière, c’était très facile. Avec le Outil Ellipse (U) créer une ellipse, puis utiliser le blanc pour la couleur et changer le Edge to Feather et 100 pour la valeur (1). Après cela, changez simplement le Mode de fusion à superposer (2).
Étape 11
Maintenant, dupliquez pour rendre la lumière plus forte. Ajoutez également différentes ellipses pour rendre l’effet de lumière plus réaliste. Une autre chose qui est très importante est de jouer avec les opacités. Utilisation 50-60% pour les nouvelles ellipses.
Étape 11
Pour le slogan, j’ai utilisé Aérien 35px pour la police de caractères car Arial est la police de l’iPhone, et un dégradé allant du gris clair au blanc. J’ai aussi ajouté une ombre en utilisant 1px pour la distance, 90% pour l’opacité, 1 pour le Flou et 90º pour l’Angle.
Étape 12
Avec le Outil Rectangle rond (U) créez un rectangle, remplissez-le de gris et changez le opacité à 80% (1). Le avec le Outil Rectangle (U) créez un autre rectangle mais sous le gris. Faites-le aussi plus petit (2). Encore avec le Outil Rectangle rond (U) créer un autre élément (3). Sélectionnez ensuite les 2 rectangles ronds et allez dans Modifier>Combiner le chemin>Punch. Sélectionnez tous les éléments et regroupez-les. Après cela, ajoutez un bruit comme dans les premières étapes.
Étape 13
Avec le Outil Ligne (N) créer une ligne puis aller à Modifier>Masque>Révéler tout. Sélectionnez l’outil de dégradé et le préréglage blanc noir avec ovale pour le type et peignez sur le masque de calque. De cette façon, les bords s’estomperont.
Étape 14
Avec le Outil Ellipse (U) ajouter une ellipse en noir et changer le Edge to Feather et utilisez 60 pour le montant. Ensuite, avec masque, masquez la partie sous la ligne. Pour ce faire, c’est très simple, créez un rectangle avec la zone que vous souhaitez afficher et accédez à Édition> Couper. Sélectionnez ensuite l’ellipse et accédez à Modifier>Masque>Coller comme masque.
Étape 15
Répétez le même processus pour masquer la carte d’identité.
Étape 16
Ajoutons maintenant la lanière. Répétez à nouveau le même processus pour le masquer. Ajoutez également un peu d’ombre à la carte et au cordon.
Étape 17
Placez quelques icônes dans la colonne de gauche et il est temps d’ajouter le contenu.
Étape 18
Rendez les guides visibles afin que nous puissions avoir une référence visuelle pour créer les colonnes et placer le contenu. Ce sera vraiment important lorsque vous codez le CSS.
Conclusion
La mise en page est terminée, je dois faire quelques ajustements pour faciliter un peu le processus de découpage, mais nous avons créé toute la page d’accueil. Le processus de conception était assez simple, même les outils et les filtres que nous avons utilisés, le plus important était de définir le concept avant de passer à l’outil. La même chose pourrait être faite dans Photoshop ou un autre outil, cependant, avec Fireworks, nous avons les capacités vectorielles super utiles et les filtres non destructifs qui rendent le processus beaucoup plus facile. De plus, la façon dont nous pouvons jouer avec les dégradés dans Fireworks est tout simplement imbattable.
