Share
Dans ce didacticiel, nous utiliserons Adobe Photoshop pour concevoir une interface Web élégante pouvant être utilisée pour tout site Web d'application mobile. Nous couvrirons un éventail de techniques, notamment des formes, des textures, des masques, des icônes personnalisées, de la typographie et bien plus encore, pouvant être facilement adaptées et appliquées à vos propres conceptions Web..
Tutoriel republiéToutes les quelques semaines, nous revoyons certains des articles préférés de nos lecteurs tout au long de l'histoire du site. Ce tutoriel a été publié pour la première fois en janvier 2011.
Ce tutoriel est basé sur la conception propre et sombre de site Web pour Leaflet, une application iPhone conçue pour les éditeurs du marché Envato. Eric Alli de Trilab Media a participé à la conception et au codage du site. Il nous guidera pas à pas dans le didacticiel. Que vous cherchiez à utiliser un design similaire pour vos propres projets ou que vous souhaitiez simplement voir comment il a été conçu, ce tutoriel renferme de nombreuses astuces et techniques excellentes que vous pourrez découvrir. Prendre plaisir!
Commençons par créer un nouveau document Photoshop en sélectionnant Fichier> Nouveau.
Définissez la largeur et la hauteur du document sur 1100px, la résolution sur 72 et le contenu de l'arrière-plan sur blanc.
Ensuite, nous devons créer deux guides qui serviront de conteneur pour notre page..
Sélectionnez Afficher> Nouveau guide…
Pour le premier guide, définissez l’orientation sur Vertical et la position sur 70 px.
Pour le deuxième guide, sélectionnez à nouveau Afficher> Nouveau guide… et créez un autre guide vertical avec Position réglée sur 1030 px.
Nous devrions maintenant avoir un espace indiqué de 960 pixels de large pour notre page..
La prochaine étape est le fond. Sélectionnez l'outil Pot de peinture (G) et réglez votre échantillon de couleur de premier plan sur "1e1e1e". Ensuite, cliquez n'importe où sur la toile pour appliquer la couleur à notre calque d'arrière-plan.
Ajoutons également un peu de texture à notre arrière-plan en sélectionnant Filtre> Bruit> Ajouter du bruit…
Définissez le montant sur 2,5 et cliquez sur OK..
Ensuite, nous allons créer un projecteur qui aidera à ajouter du focus à la partie supérieure de notre page.
Sélectionnez l'outil Pinceau (B) et réglez le diamètre principal sur 400px et réglez la dureté sur 0%..
Créez un nouveau calque en sélectionnant Calque> Nouveau> Calque… et nommez-le "Spotlight".
Changez votre nuance de couleurs de premier plan en "FFFFFF" (blanc) et créez un cercle vers le haut de la toile à l'aide de l'outil Pinceau.
Pour aider à fondre le projecteur dans l’arrière-plan, ajoutons un peu de bruit au calque du projecteur en sélectionnant Filtre> Ajouter du bruit…
Définissez le montant sur 20, cochez la case Monochromatique et cliquez sur OK..
Pour atténuer l'effet de nos projecteurs, sélectionnez Filtre> Flou> Flou gaussien…
Définissez le rayon sur 50.0 et cliquez sur OK.
Enfin, définissez l’opacité sur le calque Spotlight sur environ 25%..
Nous allons ensuite ajouter les graphiques de notre téléphone. Pour ce tutoriel, je vais utiliser le graphique iPhone du superbe vecteur PSD iPhone 4 de Psdtuts + qui peut être téléchargé gratuitement ici. N'oubliez pas non plus que vous pouvez utiliser n'importe quel graphique de téléphone qui répond à vos besoins particuliers (Android, Blackberry, etc.)..
Une fois téléchargé, ouvrez le PSD dans Photoshop. Développez le dossier "Phones" dans le panneau Calques, cliquez avec le bouton droit de la souris sur le dossier "FRONT", puis sélectionnez Dupliquer le groupe… Ici, attribuez un nom reconnaissable au groupe (j'ai utilisé "iPhone"), définissez la destination sur "Dépliant" (ou vous avez nommé votre fichier PSD pour ce tutoriel), puis cliquez sur OK. Une fois que vous avez terminé, fermez ce fichier PSD.
Positionnez notre premier iPhone en touchant le guide de gauche et à environ 100 pixels du haut de la toile..
C'est également le bon moment pour personnaliser la capture d'écran dans l'iPhone.
Pour ce faire, développez facilement le dossier "iPhone" dans le panneau des calques, puis cliquez sur le dossier "CONTENU DE L'ÉCRAN". Sélectionnez maintenant Fichier> Importer, choisissez votre capture d'écran dans le navigateur, puis cliquez sur Importer..
Faites glisser votre calque placé sur l'iPhone et redimensionnez-le pour qu'il tienne dans l'écran. Une fois terminé, cliquez sur Entrée pour enregistrer les modifications..
Dupliquez le groupe "iPhone" en sélectionnant Calque> Dupliquer le groupe… nommez-le "iPhone 2" et cliquez sur OK dans la boîte de dialogue..
Sélectionnez Edition> Transformer> Mettre à l'échelle et développez l'iPhone dupliqué à 107,0% en largeur et en hauteur. Positionnez cet iPhone à environ 50 pixels du haut et 200 pixels du guide de gauche..
Répétez l'étape ci-dessus pour remplacer la capture d'écran dans le dossier "iPhone 2"..
La touche finale pour nos iPhones est de créer un reflet d'eux. Commençons par sélectionner les deux groupes iPhone ("iPhone" et "iPhone 2"), puis sélectionnez Calque> Dupliquer les calques… et cliquez sur OK. Puis sélectionnez Calque> Fusionner les calques..
Ensuite, nous devons retourner nos iPhones à l'envers. Sélectionnez Edition> Transformer> Retourner verticalement, puis placez le calque retourné directement sous les iPhones d'origine..
Ajoutez un masque de calque en cliquant sur l'icône Masque de calque dans le panneau Calques..
Sélectionnez l'outil Dégradé (G) et choisissez un échantillon noir à blanc. Tracez une ligne de haut en bas sur les iPhones retournés d’une hauteur d’environ 50 pixels..
Enfin, baisser l'opacité sur le calque à 30%.
Suivant consiste à ajouter les principaux détails de notre application à la droite de nos téléphones. Avant de commencer, ajoutons un autre guide pour que les choses restent alignées. Sélectionnez Affichage> Nouveau guide… sélectionnez «Vertical» pour l’orientation et 550 px pour la position..
À environ 100 pixels du haut de notre toile, nous allons ajouter notre logo. J'utilise un logo que j'ai déjà créé, vous pouvez simplement utiliser du texte ou insérer votre propre logo ici.
Sous le logo, nous allons ajouter un paragraphe de texte pour la description de notre application. Sélectionnez l'outil Texte horizontal (T) et tracez un rectangle entre le guide central et le guide droit. Définissez les paramètres de caractères comme suit:
Ensuite, nous allons créer un bouton pour que les visiteurs achètent notre application. A l'aide de l'outil Rectangle arrondi (U), tracez un rectangle de 240x75px avec un rayon de 4px. Alignez-le de sorte que le côté gauche du bouton touche le guide central et qu'il soit 45 pixels au-dessous du texte..
Nous allons maintenant appliquer certains styles de calque. Double-cliquez sur le côté droit du calque dans le panneau Calques et utilisez l'image ci-dessous pour référence..
Pour ajouter l'icône Apple, tracez une petite zone de texte à l'intérieur du bouton à l'aide de l'outil Texte horizontal (T), puis copiez et collez ce symbole: dans la zone de texte et définissez les paramètres de caractère comme suit:
Enfin, modifiez l'opacité sur ce calque à 30%.
Créez une autre zone de texte à droite et ajoutez 2 lignes de texte (ex: "Téléchargez maintenant sur l'App Store"). Appliquez les paramètres de personnage suivants:
Ajoutez un style de calque à ce texte en utilisant l'image suivante à titre de référence:
Ensuite, nous allons ajouter un séparateur à la droite du texte que nous venons d’ajouter. Sélectionnez l'outil Ligne (U) et tout en maintenant la touche MAJ enfoncée, tracez une ligne 1px du haut au bas du bouton, puis modifiez la couleur de la ligne en "FFFFFF" (blanc)..
Modifiez l'opacité de cette ligne sur 15% et dupliquez-la en sélectionnant Calque> Dupliquer le calque… et cliquez sur OK. Changez la couleur de cette ligne dupliquée en # 000000 (noir) et changez son opacité en 10%. Ensuite, déplacez la ligne dupliquée 1px vers la gauche.
Le dernier élément à ajouter à ce bouton est une icône indiquant le téléchargement. Commencez par sélectionner l'outil Ellipse (U) et créez un cercle de 25 px de diamètre..
Ajoutez ensuite les styles de calque suivants:
Enfin, prenez l’outil Forme personnalisée (U) et choisissez une forme de flèche (j’utilise une forme par défaut appelée "Flèche 9"). Créez une petite flèche de 10 pixels de large à l’intérieur du cercle et changez la couleur en "FFFFFF" (blanc).
Maintenant, créez une petite boîte pour afficher le prix de notre application. Sélectionnez l'outil Rectangle arrondi (U), définissez le rayon sur 4px et créez un rectangle qui chevauche le bouton de téléchargement et mesure 52px de hauteur et toute largeur supérieure à 100px..
Changez la couleur de cette case en "2B2B2B" et déplacez-la sous le bouton de téléchargement dans le panneau Calques..
Ensuite, ajoutez un style de calque de trait à cette case avec les paramètres suivants:
Nous pouvons maintenant ajouter les informations de prix réelles. Pour cela, nous allons créer deux zones de texte distinctes car le contenu à l'intérieur nécessite un style différent..
Pour la première zone de texte, ajoutez du texte (j'ai utilisé "SEULEMENT") et appliquez les paramètres de caractère suivants:
Pour la deuxième zone de texte, ajoutez votre prix (j'ai utilisé "1,99 $") et appliquez les paramètres de caractère suivants:
Pour passer à la partie inférieure de notre page, nous devons créer une séparation. Pour cela, nous allons utiliser la technique à deux lignes que nous avons appliquée précédemment sur le bouton de téléchargement pour donner au séparateur un aspect "incrusté"..
Sélectionnez l'outil Ligne (U) et tout en maintenant la touche MAJ enfoncée, tracez une ligne 1px du guide de gauche au guide de droite, puis changez la couleur de la ligne en "000000" (noir)..
Modifiez l'opacité de cette ligne sur 80% et dupliquez-la en sélectionnant Calque> Dupliquer le calque… et cliquez sur OK. Changez la couleur de cette ligne dupliquée en "FFFFFF" (blanc) et changez l'opacité à 10%. Ensuite, déplacez la ligne dupliquée 1px vers le bas pour la placer sous la ligne noire..
Dans la section située sous le séparateur de lignes que nous venons de créer, nous allons ajouter deux colonnes, pour les captures d'écran et une liste de fonctionnalités..
En commençant par les captures d'écran, commencez par importer votre première capture d'écran en sélectionnant Fichier> Importer. Choisissez notre capture d'écran à partir du navigateur de fichiers et cliquez sur Place. Redimensionnez la capture d'écran à 80% en largeur et en hauteur, puis déplacez la capture d'écran près du guide de gauche et cliquez sur Entrée..
Sélectionnez le calque dans le panneau Calques et cliquez deux fois sur le bouton "Ajouter un masque" pour ajouter un masque vectoriel..
Maintenant, sélectionnez l'outil Rectangle arrondi (U) et modifiez le rayon à 6px et créez un rectangle sur la capture d'écran avec la taille de 175x120px.
Enfin, nous allons ajouter un style de calque de trait avec les paramètres suivants:
Répétez les étapes ci-dessus pour toutes vos captures d'écran et laissez-leur un espace de 35 pixels entre elles..
Pour séparer nos captures d'écran des fonctionnalités, tracez une ligne de 1 pixel du haut de la première capture d'écran jusqu'au bas de la dernière capture d'écran, soit environ 55 pixels des captures d'écran..
Changez la couleur de la ligne en "FFFFFF" (blanc) et réglez son opacité sur 5%.
Ajoutons un titre qui décrira nos fonctionnalités (j'ai utilisé "Fonctionnalités Leaflet"). Positionnez le texte à 55 pixels de la ligne de séparation gauche et utilisez les paramètres de caractère suivants:
Créons maintenant notre liste de fonctionnalités et positionnons-la sous le titre. Créez une zone de texte, ajoutez cinq ou six lignes d'entités et attribuez-leur les paramètres de caractère suivants:
Répétez les étapes ci-dessus pour ajouter les exigences de l'application.
Pour faire ressortir notre liste de fonctionnalités, créons des puces personnalisées simples.
Commencez par déplacer la zone de liste de fonctions 25px vers la droite.
Sélectionnez maintenant l'outil Ellipse (U) et créez un cercle de 9px de diamètre à gauche du premier élément. Changez la couleur du cercle en "bce086".
Ajoutez le style de calque suivant au cercle:
Nous devons maintenant dupliquer nos puces et les aligner sur chaque fonctionnalité. Commencez par dupliquer le calque de cercle en sélectionnant le calque puis en cliquant sur Calque> Dupliquer le calque…
Ensuite, déplacez la couche dupliquée vers le bas de 28px (la quantité de Leading que nous avons appliquée à la liste des fonctionnalités). Répétez les étapes ci-dessus trois fois.
Passons maintenant au pied de page de notre page. Nous allons à nouveau appliquer la technique des deux lignes que nous avons appliquée précédemment. Étape 9 ajouter un peu de séparation.
Nous pouvons maintenant ajouter des liens utiles à notre bas de page. Nous devons d’abord créer quatre zones de texte, côte à côte, qui contiendront nos liens..
Commencez par créer une zone de texte d'environ 160 x 40 pixels. Ajoutez du texte et répétez 3 fois. Voici un exemple de texte que vous pouvez utiliser:
Utilisez les éléments suivants pour les paramètres de personnage:
Comme vous remarquerez peut-être que nos boîtes sont inégales et mal alignées, ne vous inquiétez pas, nous allons régler ce problème à l'étape suivante..
Pour résoudre nos problèmes d'alignement, commencez par placer les quatre zones de texte que nous avons créées ci-dessus dans un dossier et nommez-le "pied de page"..
Commencez par placer la première zone de texte à 55 pixels du guide de gauche et la dernière zone de texte touchez le guide à droite..
Sélectionnez maintenant les quatre calques de texte du dossier Pied de page et récupérez l’outil Déplacement (V). Cliquez sur le bouton Aligner les centres verticaux, puis sur le bouton Distribuer les centres horizontaux dans la barre d'outils Déplacer..
Maintenant, nous pouvons ajouter des icônes personnalisées pour accentuer nos liens.
Sélectionnez l'outil Ellipse (U) et créez un cercle de 36 pixels de diamètre à côté de notre première zone de texte. Changez la couleur de ce cercle en "FFFFFF" (blanc).
Maintenant, sélectionnez Calque> Pixelliser> Calque.
La prochaine étape consiste à ajouter notre icône à ce cercle. Pour la première icône, j'utilise le "t" Twitter que j'ai téléchargé gratuitement ici.
Une fois téléchargé, sélectionnez Fichier> Importer dans Photoshop pour importer l’icône dans notre document. Une fois importé, redimensionnez l’icône à 28% de la largeur et de la hauteur, positionnez-la sur notre cercle, puis cliquez sur Entrée..
Ensuite, cliquez avec le bouton droit de la souris sur la vignette de l'icône Twitter dans le panneau Calques, puis sélectionnez Sélectionner les pixels..
Sélectionnez maintenant le calque de cercle dans le panneau Calques, puis choisissez Edition> Effacer..
Supprimez l'icône Twitter importée en la sélectionnant dans le panneau Calques et cliquez dessus ou faites-la glisser vers l'icône Corbeille..
Enfin, diminuez l'opacité du calque circulaire à 15%.
Pour le reste des icônes ci-dessus, répétez les étapes de Étape 18 en utilisant d'autres icônes ou avec des formes personnalisées dans photoshop.
Pour ajouter une touche finale à nos liens de bas de page, donnons-leur une touche de couleur pour les aider à se démarquer..
À l'aide de l'outil Texte horizontal (T), mettez en surbrillance une partie du texte dans chaque zone de texte et changez sa couleur en "83b546"..
C'est tout! J'espère que vous avez apprécié ce tutoriel et que vous avez trouvé quelques techniques utiles que vous pouvez adapter / appliquer à votre prochain design..
Accentsconagua