Share
Dans ce didacticiel, nous allons continuer cette série sur la création d'un site promotionnel pour applications iPhone en reprenant notre précédente structure filaire construite par Fireworks et en ajoutant de la couleur, de la texture, des images et des effets pour peaufiner ce design dans Photoshop. Nous utiliserons des éléments intéressants, tels que les images iPhone et une élégante illustration de fond vectorielle Aurora. Nous finirons avec un site professionnel prêt à être codé! Allons-y!
Jetez un coup d'œil à la conception du site Web que nous allons créer. Vous pouvez afficher l'aperçu final de l'image ci-dessous ou l'image en taille réelle ici.
Saisissez le fichier "wireframe_final.psd" que nous avons exporté dans notre dernier didacticiel de cette série (Création d'un site Web promotionnel pour une application iPhone en mode filaire dans Fireworks). Renommez ce fichier en "final.psd" ou votre nom préféré..
Notez ci-dessous comment le fichier importé s'ouvre assez bien dans Photoshop. Il existe cependant un problème de longueur des zones de texte par rapport au document (deuxième image ci-dessous, notez que la zone est longue et continue au-delà du bas du document). Je ne sais pas un moyen rapide de résoudre ce problème. C'est une particularité que j'ai mentionnée dans le dernier tutoriel. Si quelqu'un connaît une bonne solution, faites-le moi savoir. Alors, parcourez et copiez le texte de chaque élément, puis recréez une nouvelle zone de texte et collez-le à sa place, ou laissez-le tel quel..
En outre, supprimez également le dossier "Notes", car nous n'avons pas besoin des notes ici..
J'aime souvent travailler sur les éléments visuels dominants (et plus importants) de la conception, puis construire à partir de là. Commençons donc avec la zone "promotion".
Nous allons ajouter une illustration d'aurore à l'arrière-plan ici. Ian Yates a rédigé un excellent didacticiel Illustrator sur la création d'un ciel de vecteur Aurora Borealis dans Illustrator. L'utilisation d'un graphique vectoriel présente quelques avantages. La première est qu’il se distingue par son style unique. Nous pouvons également l’utiliser pour d’autres domaines de la marque.
Une fois le didacticiel vectoriel aurora borealis terminé, importez votre résultat unique dans Photoshop. Vous pouvez voir que le seul changement que j'ai apporté a été de retourner le design. Vous devez bien sûr créer le vôtre pour votre travail. J'ai collé l'illustration sous forme de pixels, car je n'ai pas besoin de modifier le fichier source vectoriel après l'avoir importé. Il n'est donc pas nécessaire d'utiliser un objet dynamique..
Maintenant, faites glisser le masque vectoriel de notre forme d'arrière-plan promotionnel sur notre conception aurora borealis.
Ceci appliquera le masque vectoriel comme indiqué ci-dessous, assurez-vous qu'il soit aligné comme vous le souhaitez..
Il y a un billet de faveur spectaculaire pour une image iPhone avec de nombreux graphiques pour iPhone. Allez-y et téléchargez l'interface graphique iPhone PSD 3.0. Ouvrez le fichier et faites glisser l'image de l'iPhone dans votre document de travail. Puis redimensionnez-le et alignez-le avec les guides comme indiqué dans la deuxième image ci-dessous. Assurez-vous de saisir l'image comme indiqué. Le seul composant de l'écran capturé autre que le téléphone est un éblouissement d'écran en angle transparent.
Nous allons maintenant ajouter l'illustration aurora borealis à l'iPhone. Cela rend le design un peu plus intéressant. Dans le site Web final, un fichier vidéo aurait l'air bien ici, ce qui montre l'application en action. Apportez une autre copie de l'illustration de l'aurore boréale. Vous pouvez en apporter une version plus petite cette fois-ci, car nous occupons un espace plus petit. Collez-le à nouveau sous forme de pixels.
Maintenant que l'illustration est placée sur l'iPhone dans la position souhaitée et que l'illustration est sélectionnée, accédez à Calque> Masque vectoriel> Tout révéler. Ensuite, prenez l'outil Rectangle (U), assurez-vous qu'il est défini sur Chemins dans le coin supérieur gauche et dessinez votre écran. Si vous ne l'obtenez pas à la taille exacte dont vous avez besoin la première fois, appuyez sur Commande + T et redimensionnez le masque vectoriel rectangle selon vos besoins..
Assurez-vous de garder vos couches organisées pendant que nous continuons à construire cette conception.
Nous venons d'ajouter deux éléments dominants sur la page. En outre, l'illustration aurora que nous avons ajoutée est une excellente source pour capturer certaines couleurs afin de créer le schéma de couleurs de cette page. Allez-y et double-cliquez sur le calque "Arrière-plan" par défaut pour le déverrouiller, nommez-le "Arrière-plan" et placez-le dans un nouveau dossier "Arrière-plan"..
Prenez l'outil Pot de peinture (G), puis changez la couleur de premier plan en gris bleuâtre foncé (# 536475), que j'ai sélectionnée à partir de l'illustration. Maintenant, changez le fond de navigation principal situé dans le dossier "header" en bleu foncé (# 212b3f), qui a également été échantillonné à partir de l'illustration. Donne au fond de la zone "du bas" la même couleur bleu foncé pour le fond.
Nous allons également changer la couleur de certains de nos boutons de navigation à ce stade également. L'image ci-dessous montre où nous en sommes dans cette conception. Modifiez les couleurs d'arrière-plan du bouton de navigation principal en un bleu grisâtre (# 5e7285) légèrement plus clair que l'arrière-plan de la page, à l'exception du bouton de la page en cours. Nous voulons donner au bouton de la page en cours l'impression d'être enfoncé. Faites-le donc de la même couleur que la page (# 536475). Nous améliorerons cela grandement un peu plus tard dans le tutoriel lorsque nous ajouterons du style.
Dans la zone "secondary_nav", sélectionnez l'arrière-plan plus grand derrière l'icône Aurora et changez sa couleur en bleu grisâtre (# 475665) légèrement plus sombre que l'arrière-plan de la page. Encore une fois, nous allons faire ce regard en retrait. Utilisez également le même bleu grisâtre plus clair (# 5e7285) que les boutons de navigation principaux des boutons de pied de page..
Vous pouvez voir à quel point l'obscurité est rendue possible grâce à la conception de notre page douloureusement Il est évident qu'il est temps de travailler sur les couleurs du texte. Nous avons conçu le texte principalement avec dark on light pour la structure filaire, mais nous devons maintenant passer à la lumière si dark. Changez la majeure partie de votre texte en blanc. Je soulignerai les quelques exceptions ci-dessous. Nettoyez également le texte, repositionnez les éléments et testez le poids de la police à mesure que vous parcourez cette page..
J'insère une partie du texte dans Myriad Pro, mais dans les zones codées et non les images, j'ai souvent utilisé Helvetica pour cette conception omniprésente sur les systèmes informatiques. J'ai également utilisé Helvetica pour certaines zones pour lesquelles je souhaitais avoir un look légèrement différent de celui de la Myriad Pro. J'ai mis le nom Aurora dans Futura Condensed Extra Bold où il devait être utilisé pour le marquage.
Vous pouvez voir le texte dans la plupart des "en-têtes", "secondary_nav", "promotion" et "body" sont en blanc. Quelques exceptions sont la zone du logo (qui sera juste un espace réservé pour l'instant), le texte "Aurora App" qui est bleu foncé (# 131828) pour l'aider à se démarquer et les en-têtes du corps qui sont du même bleu foncé..
Nous devons également travailler sur le texte de la section "inférieure". J'ai mis toutes les rubriques dans Myriad Pro Bold à 20 pt. La couleur est un bleu clair (# 85a1bc). J'ai utilisé le même bleu pour les liens de texte. Je mets le reste du texte en blanc avec un Helvetica Bold plus petit.
Le "pied de page" n'a que quelques changements de couleur. Les liens ont été changés en un bleu encore plus lumineux (# 97b8d8), à l'exception du lien actif qui est blanc et souligné. Le texte de copyright est Helvetica 12 pts et bleu foncé (# 212b3f).
Tout d'abord, prenez une capture d'écran de notre fichier PSD de la zone dans laquelle nous allons placer le logo (avec le texte de substitution du logo désactivé). Lancez Illustrator. Placez la capture d'écran sur son propre calque et verrouillez-la. J'ai également désactivé la visibilité de la planche graphique (Maj + Commande + H). Créez maintenant un calque pour votre logo et insérez le texte "iLoveMyApps", qui sert de nom de société à ce didacticiel. Définissez le texte dans Cooper Std Black Italic à 30 pts et donnez-lui un fond blanc, comme indiqué ci-dessous. Maintenant que le texte est sélectionné, sélectionnez Texte> Créer des contours, puis dissociez le texte (Maj + Commande + G). En outre, supprimez le «o», car nous le remplacerons par un cœur.
Travaillons maintenant sur la forme du coeur. Tout d’abord, activez la grille (Commande + ") et activez Aligner sur la grille (Maj + Commande +"), ce qui vous permettra de dessiner facilement la forme. Allez-y et créez une forme de demi-coeur avec l'outil Plume. Maintenant, allez à Objet> Transformer> Refléter et appliquez une copie avec les paramètres indiqués ci-dessous. Maintenant, alignez le bord intérieur des deux demi-cœurs, puis dans la palette Pathfinder, cliquez sur Fusionner, ce qui nous donne une dernière forme de cœur..
Maintenant, redimensionnez le cœur et placez-le comme indiqué. Aussi, travaillez en espaçant chaque lettre du texte jusqu'à ce que cela vous corresponde. Je voulais que tout le texte apparaisse comme un seul, mais j'ai espacé un peu chaque mot pour augmenter la lisibilité. Il se lit toujours comme un mot cependant. Maintenant, copiez et collez le logo final sous forme d'objet dynamique dans Photoshop..
Nous allons continuer à travailler de haut en bas, mais gardez à l'esprit que, lors de la conception, vous pouvez vous concentrer davantage sur différents aspects de la conception et expérimenter différents styles et styles, ce qui est génial et vous permet de vous sentir libre. pour faire ça.
Dans la section "en-tête", sélectionnez l’arrière-plan, puis appliquez les styles de calque indiqués ci-dessous. Cela donne une petite lumière au haut de la zone du corps et une ombre subtile est projetée sur la zone d'en-tête, ce qui la repousse un peu..
Appliquez maintenant les styles indiqués ci-dessous à notre logo. Pour le calque dégradé, le dégradé passe du gris (# c0c4c9) au gris clair (# e3e5e7)..
Nous allons d’abord travailler sur les styles d’arrière-plan de liens principaux non actifs, ce qui signifie tous sauf le lien "Applications". Appliquez les styles ci-dessous et utilisez des couleurs qui vous conviennent. Remarque: le site Meta Lab m'a beaucoup inspiré pour cette partie de la conception. J'adore le travail effectué par cette société, consultez leur folio pendant que vous y êtes.
Il est toujours important d’imaginer où se trouve la source de lumière dans votre conception. Nous appliquons des effets de lumière subtils, qui donneront à cette conception une impression de modernité, même si nous devons toujours garder à l’esprit la source de lumière..
Imaginez qu’il y ait une source de lumière venant du haut de la page qui tire vers le bas, ce qui nous donne la direction de la lumière pour la plupart des styles que nous allons ajouter. Bien sûr, vous pouvez imaginer plus d’une source de lumière et vous pouvez vous en écarter un peu, mais garder à l’esprit la source de lumière principale vous aidera à donner un sens aux styles que vous appliquez et à les harmoniser visuellement..
Maintenant, appliquez les styles montrés ci-dessous à l’arrière-plan du lien "Applications", qui est notre lien actif et qui donne l’impression qu’il est enfoncé..
Appliquez maintenant les styles Bevel et Emboss suivants au texte dans la navigation principale pour le faire ressortir un peu. L'effet sur le texte est subtil, mais perceptible.
Tout d'abord, ajoutons nos icônes d'application iPhone. Pour l’icône principale Aurora, utilisez la même illustration d’aurore que celle utilisée dans la zone promotionnelle. Faites glisser le masque vectoriel actuellement appliqué sous forme de carré gris sur une version réduite de l'illustration aurora, reportez-vous à l'étape 2 pour savoir comment procéder. Maintenant, ajoutons un peu de style ici. Ajouter les styles de calque suivants à l'icône.
Appliquez les mêmes styles à l'arrière-plan de l'icône extérieure que nous avons appliqués au bouton d'arrière-plan "Applications" à l'étape 7. Contrôle-cliquez sur la vignette du calque situé à l'arrière-plan du bouton "Applications" et sélectionnez Copier les styles de calque. Sélectionnez ensuite l'arrière-plan extérieur, maintenez la touche Ctrl enfoncée et cliquez sur sa vignette, puis choisissez Coller le style de calque, comme indiqué ci-dessous.
Nous allons maintenant ajouter du style à nos autres icônes d’application. Ce ne sont que des espaces réservés pour montrer au client où d'autres icônes iraient. Je souhaite donc leur donner un aspect similaire à l’icône Aurora, mais ne les démarque pas beaucoup. Alors, commençons par les remplir avec un motif. Nous allons d'abord faire le motif.
Ouvrez un nouveau document 4 x 4 x 4 configuré pour le Web. Saisissez l'outil Crayon, réglez la taille du pinceau sur 1 px et peignez quatre rectangles comme indiqué ci-dessous. Le rectangle le plus sombre est # 05020a et le plus clair est # 251440 cette couleur. Appuyez sur Commande + A pour sélectionner Tout, puis choisissez Edition> Définir un modèle et nommez-le "Pluie pourpre". Oui j'ai fait où une chemise avec ce motif dessus dans les années quatre-vingt à l'école primaire.
Sélectionnez la première icône d'espace réservé. Remarquez comment c'est un calque de forme actuellement. Nous devons rasteriser cela. Allez donc dans Calque> Pixelliser> Remplir le contenu, ce qui maintient notre masque vectoriel en place, mais pixellise le remplissage. Notez que le résultat est un calque rasterisé auquel est appliqué un masque vectoriel - simple et rapide. Passez à travers et faites cela pour chaque icône d'espace réservé.
Saisissez l'outil Pot de peinture (G) et, dans le coin supérieur gauche, choisissez Motif dans le menu déroulant, assurez-vous que notre motif "Purple Rain" est sélectionné, puis cliquez une fois sur chaque icône d'espace réservé pour appliquer le motif. Maintenant, maintenez la touche Ctrl enfoncée et cliquez sur la vignette de l'icône Aurora, copiez le style du calque, puis collez-le sur l'icône de chaque application réservée. Ajustez également l’espacement des noms d’applications pour faire place aux styles.
Nous allons également ajuster notre bouton d’espace réservé par défaut sur l’app store sur la droite de cette section. Un moyen simple d’améliorer l’intégration de ce bouton dans notre conception consiste à modifier la couleur de l’arrière-plan. Allez à Image> Réglages> Teinte / Saturation et appliquez les paramètres indiqués ci-dessous ou ceux de votre choix..
Commençons par l'arrière-plan et les boutons. Nous allons d’abord appliquer le style à notre vaste zone d’arrière-plan. Sélectionnez l'illustration aurora et appliquez les styles de calque suivants. Cela nous donne un point culminant au sommet et un coup autour de la zone.
Appliquez maintenant les mêmes styles à l'arrière-plan de la zone de prix en haut à droite, mais ajoutez également les styles indiqués ci-dessous. Les couleurs utilisées pour la superposition de dégradé violet sont échantillonnées à partir du graphique aurora. Les couleurs du dégradé vont du violet (# 68448f) au violet plus foncé (# 320580), puis reviennent à une teinte pourpre moyen (# 65428c)..
Appliquez les mêmes styles de calque à notre rubrique principale "Allumez votre iPhone", comme à l'étape 7. Vous pouvez copier et coller le style de calque à partir de là. Appliquez le même style de biseau et d'embossage au texte de prix et à l'en-tête, comme nous l'avons appliqué au texte de navigation principal à l'étape 7. Vous pouvez également modifier l'opacité du mode de surbrillance ou du mode d'ombre pour l'ombrage. semble mieux pour vous. Sélectionnez également la règle horizontale, qui est une forme haute de 1 px, et changez sa couleur en noir. Appliquez également les paramètres indiqués ci-dessous..
Appliquez maintenant les styles de calque suivants à notre bouton principal d'appel à l'action. Nous avons placé une ombre portée sur celle-ci afin qu'elle se démarque davantage de l'arrière-plan. Il a une couleur vive qui attirera l'attention. Son placement attire également l'attention. La superposition en dégradé a des couleurs similaires à celle utilisée pour l’arrière-plan des prix, mais elle n’applique que deux couleurs, qui vont du violet (# 68448f) au violet foncé (# 320580). Nous ajouterons une flèche dans un instant pour le faire ressortir davantage.
Maintenant, prenez l'outil Ellipse (U) et utilisez-le pour créer un calque de forme comme indiqué ci-dessous. La couleur n'a pas d'importance car les styles vont la superposer quand même. Réorganisez le texte du bouton pour qu'il soit équilibré avec l'élément ajouté. Nous allons utiliser ce cercle pour placer une flèche de téléchargement à l'intérieur sous peu. Appliquez les styles de calque suivants au bouton (les couleurs de la superposition de dégradé vont de # 9cc67e à # 3a4f66).
Nous allons maintenant créer notre flèche, la placer dans Photoshop et la styliser..
Ouvrez Illustrator et créez un document Web. Activez Affichage> Afficher la grille et Afficher> Aligner sur la grille. Utilisez l'outil Plume pour dessiner une flèche à l'aide de la grille. La taille n'a pas d'importance. Redimensionnez-le maintenant pour obtenir une forme ayant à peu près la taille de la plus grande flèche indiquée ci-dessous. Maintenant, allez à Effet> Style> Coins arrondis et appliquez avec un rayon de 0,139 po. Maintenant, copiez la flèche et collez-la en tant qu'objet dynamique vectoriel dans Photoshop.. Remarque: j'utilise le noir ci-dessous à des fins de démonstration, mais la flèche doit être blanche..
Appliquez maintenant les mêmes styles à la flèche que nous avons créé notre logo à l’étape 7 et adaptez-vous à l’espace. Le résultat est montré dans la deuxième image ci-dessous.
Voici ce que nous avons jusqu'à présent. La partie supérieure est belle. Passons maintenant au corps. Nous avons maintenant le style du site. La navigation sera facile d'ici.
Il n'y a pas beaucoup de styles à appliquer ici - juste quelques uns. Commençons par les titres. Nous voulons leur donner un aspect indenté en mettant en évidence les bords des caractères inférieurs, style souvent utilisé dans les sites Apple. Appliquez le style indiqué ci-dessous au texte du titre "Aurora". Appliquez également le même style aux titres "Captures d'écran" et "Fonctionnalités". Avec ces deux derniers titres, modifiez l'opacité à 40% cependant (tout le reste dans ce style de calque d'ombre portée est identique).
Appliquez le même style de calque aux puces de la colonne "Caractéristique", comme appliqué à son titre. Les résultats obtenus jusqu'ici sont indiqués ci-dessous.
Maintenant, copiez la règle horizontale à partir de la section "promotion", changez la couleur en bleu foncé (# 131828) et redimensionnez-la pour qu'elle corresponde à la zone située au-dessus du titre "Captures d'écran". Remarquez comment le style est conservé.
Copiez maintenant cette même règle horizontale et utilisez-en plusieurs copies dans la dernière colonne de cette section, comme indiqué ci-dessous. Assurez-vous de supprimer les règles horizontales non-stylées existantes.
Suivez maintenant les mêmes étapes pour ces images d’espace réservé que pour l’étape 10. Appliquez les mêmes styles de calque et le remplissage de motif de fond "Pourpre Rain". Ceci est juste un moyen rapide de rendre cette zone belle pour la revue du client avant que vous obteniez les photos réelles qui y iront plus tard. La dernière section "body" est montrée ci-dessous.
Tout d’abord, appliquons le même style de calque Bevel et Emboss à nos titres ici que nous avons appliqué au texte de notre navigation principale à l’étape 8. Maintenant, faites glisser quatre copies de notre règle horizontale stylisée vers le bas et redimensionnez-les si nécessaire, ou appliquez les mêmes styles et coloration des lignes horizontales existantes comme nous les avons fait dans la section "corps".
Remplacez les règles horizontales restantes de cette section par des tirets. Vous pouvez utiliser l'outil Texte et la touche Dash pour cela. J'ai utilisé Myriad Pro à 14pt pour cela. C’est quelque chose qui sera codé en CSS, mais nous voulons nous assurer que nous le communiquons efficacement dans la conception..
Appliquez les mêmes styles de calque à nos boutons que lors de notre navigation principale. Copiez simplement ces styles de calque. Veillez également à styliser le texte des boutons. Remplacez maintenant notre oiseau Twitter par une version en couleur que vous pouvez télécharger gratuitement dans le pack d’icônes Practika de Smashing Magazine..
Appliquez les styles de calque suivants à l'arrière-plan de la section "du bas" et vous avez terminé.!
Il existe de nombreuses solutions créatives pour les sites Web que vous pouvez créer en utilisant seulement une poignée d'éléments choisis, un jeu de couleurs intéressant, l'utilisation de styles appropriés et une attention particulière aux effets de lumière subtils. L'image finale est ci-dessous. Vous pouvez voir une version plus grande ici.
Accentsconagua