Tutoriel de conception de sites Web : cas Wellknown.as

Le mois dernier, j'ai rencontré des gars qui travaillent sur un très beau projet impliquant une application iPhone. Ils m'ont donc invité à concevoir le site Web, appelé Wellknown.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 une idée 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éez un nouveau rectangle avec la taille du document. Pour le Couleur utiliser Solide et #191D22. Puis sur le Panneau Propriétésclique sur le Ajouter une icône (+) et sélectionnez Ajoute du bruit. Utiliser 1 pour le Montant.

Étape 3

Avec le Outil Rectangle (U) créez un autre rectangle mais faites-le comme une bande commençant sur 200 pixels sur l'axe Y. Pour le Utilisez la couleur #1c202a.

Étape 4

Cliquez sur Ajouter et à Ombre et lueur > Ombre intérieure. Utiliser 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 lueur>Ombre portée. Utiliser 0 pour la Distance, 65% Opacité, 4 pour le Flou. L'angle ne fera aucune différence car la distance est de 0.

Étape 6

Maintenant encore, ajoutons-en bruit le rectangle n'aura donc pas cette couleur unie, mais plutôt une belle sensation plastique.

Étape 7

Ici, j'ai placé l'image de l'iPhone en plein centre de l'image, telle qu'elle se trouvait 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 à Modification> Transformation> Retourner verticalement. Puis changez le Opacité à 50% et allez à Modification>Masque>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 transparent. Alors, créez le fameux effet sol mouillé.

Étape 9

Ajoutez un nouveau rectangle avec le Outil Rectangle et remplissez-le avec un dégradé en utilisant du blanc pour les deux couleurs. Changez simplement les opacités qui seront 100% (1) et l'autre 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 simple. Avec le Outil Ellipse (U) créez une ellipse, puis utilisez du blanc pour la couleur et changez la Edge to Feather et 100 pour la valeur (1). Après cela, changez simplement le Mode de fusion en superposition (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 très importante est de jouer avec les opacités. Utiliser 50-60% pour les nouvelles ellipses.

Étape 11

Pour le slogan, j'ai utilisé Arial 35px pour la police 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 en dessous du gris. Réduisez-le également (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 Modification>Combiner le chemin>Poinçon. Sélectionnez tous les éléments et regroupez-les. Après cela, ajoutez un bruit comme dans les premiers pas.

Étape 13

Avec le Outil Ligne (N) créez une ligne puis allez sur Modification>Masque>Révéler tout. Sélectionnez l'outil de dégradé et le préréglage noir blanc 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) ajoutez une ellipse en noir et changez la Edge to Feather et utilisez 60 pour le montant. Puis avec le masque, cachez la partie en dessous de la ligne. Pour ce faire, c'est super simple, créez un rectangle avec la zone que vous souhaitez afficher et allez dans Edition>Couper. Sélectionnez ensuite l'ellipse et accédez à Modification>Masque>Coller comme masque.

Étape 15

Répétez le même processus pour masquer la carte d'identité.

Étape 16

Ajoutons maintenant le cordon. 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

Rendre 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 coderez le CSS.

Conclusion

La mise en page est terminée, je dois faire quelques ajustements pour rendre le processus de découpage un peu plus facile, mais nous avons créé toute la page d'accueil. Le processus de conception était assez simple, même les outils et 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 disposons de capacités vectorielles très utiles et de 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.

Cliquez sur l'image pour visiter le site internet