Share
Face à cela, il existe une application pour à peu près tout. Les nouvelles applications apportent une innovation dans la manière dont nous pouvons présenter nos produits mobiles à des clients potentiels. Apple nous a permis de créer une marque brillante et élégante qui, fondamentalement, nous permet de créer d'excellents sites Web. Ce didacticiel va encore plus loin en incorporant un style illustratif sous le gloss Apple, pour créer une page de destination unique en son genre..
Face à cela, il existe une application pour à peu près tout. Les nouvelles applications apportent une innovation dans la manière dont nous pouvons présenter nos produits mobiles à des clients potentiels. Apple nous a permis de créer une marque brillante et élégante qui, fondamentalement, nous permet de créer d'excellents sites Web. Ce didacticiel va encore plus loin en incorporant un style illustratif sous le gloss Apple, pour créer une page de destination unique en son genre..
Peut-être que je suis vieille école, mais j'aime toujours les sites qui sont fixés à 960px. C’est un si beau nombre rond, divisible par 1, 2, 3, 4, 5, 6, 8, 10 qui facilite beaucoup le travail avec une pseudo-grille. Ce tutoriel n'est pas différent. j'ai donc créé un nouveau document de 1 000 px par 1 200 px avec des directives indiquant le centre pour un design de 960 px par 1 200 px.
Nous allons ensuite configurer les colonnes que nous utiliserons pour le reste de la conception. J'ai choisi 3 colonnes, avec 40px de remplissage entre elles. Les colonnes de gauche à droite sont 240px, 390px, 240px.
Puisque nous voulons que notre dessin ait l’air de s’asseoir sur une étagère, nous avons besoin d’un type de papier peint juste derrière..
Créez un nouveau calque et remplissez le calque entier de blanc (Maj + F5). Ensuite, allez dans les propriétés de votre calque et superposez votre motif orné (je saute la création du motif car je suppose que tout le monde sait déjà comment faire cela)..
Après avoir appliqué le style de calque, notre document devrait ressembler à ceci:
Nous allons créer un nouveau calque couvrant l’ensemble du document et mesurant environ 140 pixels. Nous utiliserons la même technique qu'à l'étape 2, même si nous appliquerons une texture de bois au lieu d'une texture ornée. Une fois encore, des centaines de sites distribuent des textures de bois libres de droits: Recherche Google pour des textures de bois libres de droits
Le résultat devrait ressembler à ceci:
Renommez cette couche 'plateau'.
L'étagère a l'air un peu plate, il est donc nécessaire d'ajouter de la profondeur en utilisant des dégradés, des ombres et des rehauts. Ajoutez de nouveaux styles de calque pour: Trait, Ombre portée et Incrustation de dégradé comme suit:
Vous êtes peut-être en train de vous dire que l'ombre portée est plutôt moche en ce moment. D'accord; mais cela n'aura pas l'air aussi dur une fois que nous aurons les livres sous les yeux. Voici à quoi devrait ressembler votre document:
Ensuite, nous allons créer le bord avant de l'étagère. Dupliquez (Commande + J) la couche "Etagère" et renommez-la "Avant de l'étagère". Déplacez la couche «avant de l'étagère» vers le bas de sorte que le bas de la couche «étagère» s'aligne sur le haut de la couche «haut de l'étagère». Découpez 20 pixels de la partie inférieure de la couche «haut de l’étagère» afin que les hauteurs varient. Nous voulons donner l’illusion que le plateau est plus profond que son devant est grand.
Ensuite, nous devons modifier certains styles de calque pour le calque «haut de l’étagère». Tout d'abord, nous devons déplacer le calque "devant de l'étagère" sous le calque "étagère" de votre palette Calques. Ensuite, nous inverserons le dégradé (et réduirons son opacité) car nous souhaitons que l'ombre soit en bas au lieu du haut. En faisant cela, nous allons créer une source de lumière qui se trouve dans le coin supérieur avant de l'étagère - là où nous montrerons nos livres et notre capture d'écran iPhone.
Après avoir appliqué tous les styles de calque, votre image devrait ressembler à ceci:
Nous pourrions maintenant nous arrêter ici, mais je pense qu'il manque juste un peu plus de détails sur les étagères. Les coins semblent toujours un peu plats et nous souhaitons une profondeur considérable. Nous allons donc ajouter quelques lignes de surbrillance simples d'une hauteur de 1px pour lui donner encore plus de profondeur..
Créez la ligne juste en dessous de la bordure du contour 2px de la couche 'étagère'. Vous pouvez ensuite choisir une couleur à remplir (Maj + F5) plus claire que tout le grain du bois de l’étagère ou simplement remplir de blanc et ajuster l’opacité. Le résultat vous donnera un peu plus de profondeur:
Nous allons réutiliser notre motif en bois depuis la création de l'étagère ci-dessus pour créer un type de "retour" dans notre étagère. L'idée ici est de donner l'impression que nous avons placé l'iPhone et les livres sur le dessus de la bibliothèque et que nous avons nos informations supplémentaires à l'intérieur. Nous allons créer cette couche sous les couches d'étagères de la pile.
Créez une sélection, un remplissage avec votre motif en bois (Maj + F5). Renommez cette couche 'back of shelf'.
Puisque notre source de lumière est dirigée vers le coin supérieur avant de l’étagère, nous devons rendre l’arrière un peu plus foncé pour qu’il ressemble davantage à une étagère de livre pleine de profondeur et moins à un plancher de bois. C'est facile à faire avec les styles de calque. Ajoutez un style de calque "Superposition de couleurs" à votre calque "arrière-plan" et réglez la couleur sur Noir. Ajustez l'opacité à 50%, et vous devriez maintenant voir le bois plus foncé à l'arrière de la bibliothèque..
Après un léger ajustement avec l'opacité de mon fond fleuri, votre image devrait ressembler à ceci:
Maintenant que tout notre document est configuré, ainsi que toutes les couches d'arrière-plan créées pour le thème, nous allons créer tous les éléments qui se placeront au-dessus de l'arrière-plan (techniquement, à l'arrière-plan)..
Pour le logo, j'ai choisi la police Rockwell (c'est mon obsession depuis peu) à 60px. Créez un nouveau calque de texte avec le texte: "Lisez-le". Pour obtenir cette sensation de bulle, nous devons ajouter des styles de calque pour le contour, la superposition de dégradé, l'ombre intérieure et l'éclat extérieur (à peu près tous les styles de calques que vous pouvez éventuellement ajouter). Voici les paramètres:
Une fois que vous avez appliqué les styles de calque, alignez votre logo sur le guide le plus à droite. Ça devrait ressembler a quelque chose comme ca:
Nous avons maintenant besoin du ruban de signet pour le "i". Nous allons commencer par créer une nouvelle forme (que j'ai créée de toutes pièces avec l'outil Lasso polygonal). Remplissez votre sélection avec n'importe quelle couleur. Il devrait être dans ces lignes:
Comme un marque-page noir uni est extrêmement laid, nous devons lui donner un peu de brillance. Tout ce dont nous avons besoin ici, c’est d’une superposition d’ombre portée, de traits et de dégradés pour faire ressortir le ruban:
Votre ruban de signet devrait maintenant ressembler à ceci:
Tout ce qui reste à faire est d'ajouter le "i", que nous utiliserons avec la même police (Rockwell) avec du texte blanc. Ajoutez une légère ombre intérieure (70% d'opacité; 90 degrés; Distance: 1; Starter: 0; Taille: 1) et vous devriez être prêt. J'ai également ajouté un motif à mon marque-page, mais voici en gros ce que vous devriez voir:
Ne t'inquiète pas vous n'avez pas besoin de créer tout cela à partir de zéro. La beauté du Web réside dans le fait qu’il existe des milliers d’options pour les illustrations de stock, ce qui vous permettra de gagner du temps à la fin. J'ai trouvé les livres chez iStockphoto ici. Ces livres exacts ne sont pas tout à fait critiques pour ce tutoriel, donc si vous préférez, vous pouvez toujours passer à la section suivante..
Si vous avez choisi d'acheter les livres, placez-les sur votre image à mi-chemin en haut de votre étagère:
Les livres sont beaucoup trop plats en eux-mêmes, nous allons donc ajouter quelques ombres de perspective supplémentaires (comme nous l'avons fait avec les coins des étagères) pour leur donner l'impression d'être assis sur l'étagère. Tout d'abord, renommez la nouvelle couche avec les livres en "livres".
Ajoutez une ombre portée au calque "livres" avec les paramètres suivants: Opacité: 19%; Angle: -90; Distance: 10; Propagation: 10; Taille: 15. Pour la couleur, choisissez un marron dans le calque «arrière de l'étagère». Nous utilisons le marron ici parce que le noir semble juste trop et ne correspond pas.
Pour créer l'ombre sous les livres, nous allons créer une nouvelle ellipse noire couvrant toute la largeur des livres à la verticale. Nous traiterons ensuite du livre penché.
Rastérisez l'ellipse noire et allez dans Filtre> Flou> Flou Gaussion. Utilisez un rayon de 4,7 pour obtenir la propagation souhaitée. Définissez l'opacité de la couche d'ellipse noire à 70% pour l'adoucir un peu. Le résultat devrait ressembler à ceci:
Répétez la même technique pour le livre penché, mais avec une ellipse beaucoup plus petite. Ça devrait ressembler a quelque chose comme ca:
Aucune page de destination pour iPhone n'est complète sans un gros iPhone brillant - et ce tutoriel ne fait pas exception. J'ai utilisé le modèle iPhone créé par teehan + lax pour émuler sur un appareil. Supprimez les couches que vous ne souhaitez pas inclure sur votre iPhone et faites-les glisser dans votre document. Placez-le légèrement plus bas sur l'étagère du haut pour donner l'illusion que l'iPhone est plus proche de vous que ne le sont les livres. Nous voulons ce joli iPhone devant et au centre.
Évidemment, c’est à cet endroit que votre capture d’écran du héros ira de votre application. Je ne vais pas ajouter quoi que ce soit au mien, mais vous êtes certainement le bienvenu lorsque vous suivez le didacticiel. Nous allons également utiliser la même technique qu'à l'étape 6 pour ajouter une ombre au bas de l'iPhone. Votre sortie devrait ressembler à:
La dernière étiquette (l’un des plus importants) est la vignette des prix. Commencez par créer un cercle dans le coin supérieur droit de l'iPhone. Renommez ce cercle en 'autocollant de prix':
Ensuite, appliquez les styles de calque suivants pour Ombre portée, Biseautage et estampage, Surimpression en dégradé et Contour. Ce sera un style de couche important, car nous allons l’utiliser plusieurs fois dans le reste du site pour les boutons, etc..
Cela crée quelque chose de complètement beurre:
Ajoutez du texte pour le prix avec une ombre portée 1px et notre autocollant est terminé:
Jusqu’à présent, c’est ce que nous avons créé (très joli et surtout: très unique):
Il nous manque encore notre bouton "Call to Action" pour amener les utilisateurs de l'AppStore à acheter notre application. Nous allons créer ce texte comme s'il était "ciselé" à l'avant de l'étagère (avec une police parfaite).
Alors, voici: créez un nouveau texte; J'ai utilisé: "Votre collection de livres vous aimera pour cela." J'ai utilisé Gotham à 36 px pour obtenir l'aspect souhaité. Sur ce texte, nous devons appliquer deux styles de calque pour lui donner cet aspect ciselé:
Votre résultat souhaité, en fonction de la police, devrait ressembler à ceci:
Nous devons maintenant ajouter le bouton AppStore. J'ai utilisé une icône iPhone d'IconFinder.net pour recréer le bouton "Disponible dans l'AppStore".
Pour créer le bouton, créez un nouveau rectangle arrondi avec un rayon de 10px. J'ai créé mon rectangle de 240 pixels de large par 74 pixels de haut.
Puisque nous avons déjà créé notre joli petit style de calque pour les boutons lorsque nous avons créé l'autocollant de prix à l'étape 7, nous pouvons simplement copier le style de calque à partir de cet autocollant et le coller dans notre nouveau calque de boutons. Pour ce faire, cliquez avec le bouton droit sur le calque duquel vous souhaitez copier le style de calque et choisissez "Copier le style de calque" dans le menu contextuel. Sélectionnez le calque auquel vous souhaitez appliquer ce style, cliquez avec le bouton droit de la souris et sélectionnez "Coller le style du calque". C'est aussi simple que cela.
Placez l’icône iPhone que vous avez téléchargée depuis IconFinder au-dessus du bouton, en lui donnant les styles de calque suivants:
Ajoutez le texte de l'AppStore et réutilisez le style de calque que vous avez créé pour l'icône iPhone sur le texte. Votre résultat devrait ressembler à:
C'est probablement la partie la moins intéressante de la conception, mais la plus intéressante pour ceux qui cherchent à acheter votre application. Créez un nouvel en-tête de 30px (j'ai utilisé Rockwell à nouveau) et entrez le texte "Caractéristiques". Vous souvenez-vous des guides que nous avons créés au début de ce didacticiel? Nous allons les utiliser maintenant pour nos 3 colonnes; alors alignez le texte sur le guide le plus à droite.
Appliquez quelques styles de calque à ce texte:
Ensuite, créez du texte en italique ci-dessous et ajoutez des puces. Assez facile droit?
Nous devons montrer notre application. Notre capture d'écran iPhone contient non seulement des images de notre application, mais nous devons également afficher des images agrandies de notre application pour que les utilisateurs sachent exactement à quoi ils peuvent s'attendre..
Commençons par dupliquer (Commande + J) notre couche de texte "Fonctionnalités" à partir de l'étape 9. Modifiez le texte en "Captures d'écran" et déplacez-le de sorte qu'il soit placé dans la colonne centrale..
Nous allons ensuite créer les captures d'écran. Nous allons commencer par créer la couche d'encart externe. Commencez par créer une nouvelle forme de rectangle arrondi, 180px par 180px avec un rayon de 10px. Copiez le style de calque à partir du texte ciselé à l'étape 8 et collez-le dans votre rectangle arrondi. Dupliquez le calque (Commande + J) et répartissez-les uniformément dans la colonne de 390 pixels de large:
Nous allons maintenant créer un espace réservé pour les images (vous devrez évidemment les remplacer plus tard par les captures d'écran de votre application). Créez un autre rectangle arrondi, mais cette fois avec les paramètres:
Dupliquez le calque et déplacez le calque dupliqué au-dessus de l'autre capture d'écran encart.
Ajouter une superposition de couleur à ces deux couches (avec la couleur # f6f3eb) pour le paramètre de substitution.
Enfin, nous devons ajouter l'icône Zoom. Commencez par dessiner un cercle dans le coin supérieur droit (comme pour la vignette de prix). Le mien a environ 30px de diamètre.
Collez le même style de calque de l’autocollant de prix sur le nouveau cercle. J'ai ajusté les couleurs du dégradé et de la couleur de trait pour obtenir un look légèrement différent de celui du vert.
Enfin, nous devons ajouter l’icône "Zoom". J'utilise l'icône de zoom de l'étonnant jeu d'icônes Glyphish. À
Pour compléter l’icône de zoom, il suffit d’ajouter une légère ombre intérieure (environ 1 pixel) pour lui donner de la profondeur..
Dupliquez le groupe d'icônes de zoom que vous avez créé et déplacez-le vers l'autre vignette. Au moment d’implémenter cela, ce serait vraiment cool de faire quelques
cool zoom sur ces captures d'écran que vous avez cliqué. Peut-être pour mes premiers Nettuts :).
Le dernier mais non le moindre pour la section principale est les témoignages. J'ai créé le bulles à partir d'un rectangle arrondi et d'une forme personnalisée.
Nous allons commencer par le rectangle arrondi. Créez un nouveau rectangle arrondi avec les paramètres suivants:
Choisissez maintenant l'outil Forme personnalisée et localisez la bulle de dialogue pour créer la queue:
Créez une bulle de dialogue au-dessus du rectangle arrondi, de sorte que la queue ne se chevauche pas.
Sélectionnez les deux calques et fusionnez-les ensemble (Commande + E). Le résultat devrait être une forme que nous pouvons ensuite appliquer un certain style à.
Encore une fois, copions notre style de calque de la vignette de prix et collez le style de calque dans notre bulle de témoignage (nous allons en faire une texture de bois dans une seconde). Nous faisons cela parce que nous voulons la plupart des styles de l’autocollant, comme les styles Beveling, Drop Shadow et Stroke. Nous allons simplement jouer avec la texture et les couleurs pour lui donner l’apparence appropriée. En réutilisant des styles de calque comme celui-ci, vous pouvez conserver la cohérence de vos conceptions et vous faire gagner un temps précieux en évitant de devoir reproduire les mêmes effets à maintes reprises..
Nous allons d'abord changer la superposition de dégradé. Nous avons besoin que ce soit d'une couleur à transparente (car nous voulons que le grain du bois apparaisse de derrière). J'ai choisi de faire passer le dégradé à un brun très foncé: # 292115.
Enfin, nous allons faire une superposition de motif de la texture du bois pour le faire se fondre davantage dans le fond.
Ajustez la couleur de trait pour qu’elle soit brun foncé (pas vert) et vous êtes prêt.!
Tout ce que vous avez à faire maintenant, c’est d’ajouter vos critiques de clients, et vous avez une bulle de témoignage unique. Dupliquer le groupe de témoignages
et déplacez-le juste en dessous de l'autre, et c'est tout!
Nous allons commencer par créer le conteneur environnant dans lequel le texte et la forme seront placés. J'ai créé un rectangle arrondi, avec un rayon de 40px et une largeur de 960px (la largeur de notre page). J'ai collé le style de calque du texte de l'étape 8 pour lui donner cette sensation d'insertion. Comme je l'ai déjà mentionné, j'ai toujours tendance à réutiliser le plus possible mes styles de calque, car cela garantit la cohérence..
Je me suis encore une fois dirigé vers IconFinder pour trouver l'icône de courrier - heureusement pour nous
l'icône 64px par 64px était exactement ce dont nous avions besoin. Placez cette icône dans le coin gauche de notre encart bar - ce sera l'ancre
pour la newsletter et aider à équilibrer le bouton Soumettre.
Ensuite, ajoutez le "Voulez-vous les dernières nouvelles? Rejoignez la liste de diffusion." texte. J'ai utilisé le Gotham à nouveau, mais avec une taille légèrement plus petite à 24px. Faire
la couleur du texte # 161008 (comme nous ne voulons pas qu'il se démarque trop) et ajoutez une ombre portée de 1px brun clair en dessous (une fois encore, nous créons cette profondeur).
Hou la la! Nous sommes si proches. Tout ce que nous avons à faire est d’ajouter le formulaire et le bouton d’e-mail et nous aurons terminé. Créer un autre rectangle arrondi, avec un rayon de 20px
(la moitié de ce que le rectangle arrondi extérieur est), et la hauteur de 40px (de sorte que nous n'avons pas de bords droits sur les deux côtés).
Une chose à noter est la cohérence de l’espacement autour du côté droit. En réduisant de moitié le rayon intérieur, nous maintenons un rembourrage uniforme entre le contenant extérieur et le contenant intérieur..
En utilisant les mêmes préréglages pour le rectangle arrondi (rayon 20px, hauteur 40px), créez un nouveau bouton rectangle arrondi. Copiez le style de calque à partir de nos icônes de zoom de l’étape 10 (couleur orange rougeâtre). Collez ce style de calque sur votre nouveau bouton. Vous devriez avoir quelque chose comme ça:
Tout ce que vous devez faire maintenant, c'est ajouter le texte "Soumettre" et vous avez terminé.!
C'est tout. Nous avons créé une page de destination iPhone unique. fusionner un nouveau style illustratif avec la sensation iPhone brillante. Ce tutoriel ne concerne pas seulement une application de livre - vous pouvez changer les livres sur l'étagère pour à peu près n'importe quoi (c'est-à-dire le convertir en table pour les boissons). J'espère que vous en avez profité!
Accentsconagua