Design Web 2.0 Interface dans Photoshop
Comprendre le didacticiel ci-dessous, c’est comprendre sa technique. Avec celui-ci, vous pouvez dessiner vous-même une interface utilisateur graphique pour un site Web.. Navigation latérale, boutons, en-têtes, par exemple. Tout le style Web 2.0.
Lancer une nouvelle toile; n'importe quelle taille. Quelque chose de plus grand que 450x300px serait bien. Sélectionnez le Outil rectangulaire arrondi et dessinez un rectangle aussi grand que le montre l'image ci-dessus.
Double-cliquez sur la couche du rectangle arrondi pour lancer le Options de fusion. Modifier les paramètres pour les styles suivants.
Ombre portée
Opacité: 31% Distance: 1px Écart: 0% Taille: 5px
Biseau et estampe
Profondeur: 100% Taille: 0px Adoucir: 0px
Superposition dégradée
Double-cliquez sur Gradiant et définissez les points d'arrêt suivants. Lieu: 0%, # 1378cd Lieu: 100% # 4da5f0
Accident vasculaire cérébral
Taille: 5px Position: Intérieur Couleur: # 54abf6
Insérons du texte, un slogan, une URL ou autre chose. Placez-le au milieu et alignez-le à droite pour que le logo puisse résider plus tard sur le côté gauche. Styleons le texte. J'utilise Lucida Sans Unicode; 55 pt; lisse; -120 pour le suivi des caractères (espacement des lettres). Double-cliquez sur le calque de texte et définissez les paramètres suivants dans Options de fusion.
Incrustation en dégradé
Double-cliquez sur Gradiant et définissez les points d'arrêt suivants. Lieu: 0%, # 9ec7eb Lieu: 100% ecf6ff
Vous devrez ensuite insérer le logo à gauche du texte. Je vais utiliser un rectangle arrondi de rayon 5px pour représenter le logo. Ici se trouve le Option de mélange réglages pour le rectangle arrondi.
Ombre intérieure
Opacité: 45% Distance: 0px Taille: 43px;
Biseau et estampe
Profondeur: 100% Taille: 0px Adoucissement: 0px Opacité du mode Highlight: 50% Opacité ShadowMode: 100%
Superposition dégradée
Double-cliquez sur Gradiant et définissez les points d'arrêt suivants. Lieu: 0% # 0e2f4a Lieu: 47% # 001a31 Lieu: 48% # 002545 Lieu: 100% # 0f4b7f
Accident vasculaire cérébral
Taille: 5px Double-cliquez sur Gradiant et définissez les points d'arrêt suivants. Lieu: 0% # 1468af Lieu: 100% # 50abf8
Donnons-lui un petit effet brillant. Tenir CTRL et clic gauche sur le rectangle arrondi Vignette de couche. Lorsque tout le rectangle arrondi est sélectionné, remplacé par Outil Rectangle de sélection, tenir ALT et dessine la seconde moitié de la zone sélectionnée; tout comme l'image ci-dessus.
Créer un nouveau calque; Faites-le glisser vers le haut pour le placer au-dessus de tous les calques. remplissez la partie sélectionnée avec le blanc [#ffffff]; changer l'opacité à 15%.
Le tutoriel se termine ici. Comment vous allez utiliser ce design est entièrement à vous. En modifiant légèrement sa taille et ses couleurs, il peut être utilisé comme en-tête ou boutons Web. Voici quelques exemples.
En-tête du site
Boutons de site Web
