Share
La plupart des applications mobiles ne disposent pas de ce détail de conception qui pourrait les aider à se distinguer de la foule de l'App Store. Bien que rien ne puisse remplacer un concepteur talentueux qui peaufine les pixels de votre application pendant des heures, l'objectif de cette série est d'enseigner à ceux qui ont une expérience limitée de Photoshop et dont le budget est faible à aucun comment créer des applications qui brillent!
Cette série est destinée au développeur qui n'a pas le budget pour engager un designer professionnel. Il vous apprendra à créer des éléments accrocheurs avec une connaissance et des efforts très limités de Photoshop..
Dans cet article, nous allons nous concentrer sur la modification de fichiers PSD existants pour obtenir l'aspect que vous recherchez pour votre application..
Si vous êtes programmeur, avez-vous déjà lu le code de quelqu'un d'autre pour savoir comment il a accompli une tâche particulière? Presque tous les programmeurs le font, et l'apprentissage de la conception n'est pas différent. Comme dans le monde du développement, il existe de nombreux sites Web remplis de PSD que vous pouvez expérimenter et dont vous pouvez apprendre. Certains de ces sites vous permettent même de modifier les fichiers PSD et de les utiliser dans votre propre travail. Le mot clé est modifier. Bien que bon nombre des DSP auxquels je fais référence puissent effectivement être copiés et utilisés commercialement sans modification, je vous le déconseille. Vous n'apprendrez pas de cette façon et vous ne publiez pas de design vraiment unique pour votre application..
Comme mentionné, il existe des centaines de sites proposant des DSP gratuits. Toutefois, si vous souhaitez créer un projet réel, l’astuce consiste à rechercher les sites qui vous permettront de réutiliser ces fichiers PSD dans votre propre travail. Sauf si je ne fais que surfer à des fins éducatives, je ne fais en général que consulter les sites proposant un travail de qualité ainsi que des conditions d'utilisation flexibles. Voici mes cinq sites PSD préférés:
Le point ici est simple: en tant que développeur, vous n’avez probablement pas les compétences nécessaires pour créer vous-même des applications extrêmement sophistiquées. Cependant, vous pouvez rapidement mélanger les conceptions des autres pour créer votre propre sensation avec très peu de connaissances de Photoshop..
En utilisant la technique "Mashup" PSD décrite ci-dessus, nous allons concevoir un UINavigationBar personnalisé utilisant un PSD de www.pixelbeam.net. Nous allons modifier plusieurs éléments dans le PSD pour créer notre propre sensation unique.
Téléchargez le fichier PSD ici et ouvrez le fichier dans Photoshop.
Créer un nouveau projet de 640 x 88.
Maintenant, utilisez le bouton Arranger les documents pour diviser l’écran entre les deux projets..
Pour cette partie du processus, assurez-vous que la case Sélection automatique du calque est cochée. Cela signifie que Photoshop sélectionnera automatiquement le calque de l'élément sur lequel vous venez de cliquer. Cela aide lorsque vous naviguez à travers de plus grands PSD. Vous pouvez l'activer si nécessaire pendant ce projet.
À l'aide de l'outil de déplacement, sélectionnez la puce active illustrée ci-dessus. Vous remarquerez que Photoshop a automatiquement sélectionné ce calque.
Toujours en mode d'écran divisé, faites glisser le calque de puce actif sur l'écran de votre barre UINavigation. Vous remarquerez que ses calques et ses styles ont été copiés dans votre projet UINavigationBar..
Maintenant, double-cliquez sur la vignette de la couche. Cela fera apparaître le sélecteur de couleur. De là, vous pouvez changer la couleur de la balle.
Copiez la couleur de la balle # 567200 et définissez-la comme couleur de premier plan.
Utilisez l'outil Pot de peinture pour remplir votre projet avec la couleur # 567200..
Cliquez avec le bouton droit sur le calque de puces actif. Sélectionnez Copier le style de calque.
Faites un clic droit sur votre couche UINavigationBar et sélectionnez Style de collage du calque.
Sélectionnez l'arrière-plan de la zone de diapositive. Comme à l'étape 6, Photoshop sélectionne automatiquement le calque (la sélection automatique du calque doit être cochée). Maintenant, déplacez la couche dans votre projet UINavigationBar.
Passez la souris sur le style de calque "Pattern Overlay". Cliquez et glissez-le sur votre couche UINavigationBar..
Assurez-vous que tous les calques, à l'exception de votre calque UINavigationBar, sont invisibles..
Double-cliquez sur le style de calque Superposition de motifs. La boîte de style de calque Superposition de motifs apparaît. Réduisez l'opacité à 8.
Si vous souhaitez intégrer un UINavigationBar personnalisé à votre projet, vous pouvez consulter le code exemple de ce projet github..
Prenez le temps de regarder à travers le PSD. Vous réaliserez rapidement qu'un bon design est à la fois difficile et long. Dans le même temps, il vaut la peine de travailler dur pour l’esthétique finale obtenue. Si vous avez le budget pour un grand designer, je vous recommande fortement de trouver et d’engager un. Si vous n'avez pas le budget, Mashup vos propres éléments de conception en utilisant différents PSD. Je recommande également d'étudier les dessins trouvés sur des sites comme Creattica Mobile, Pattrns et Beautiful Pixels..
J'espère que vous trouverez ce tutoriel utile. Si vous créez quelque chose de génial, envoyez-le moi à @williamherring.
*L’aperçu de ce message a été créé en modifiant le Leatherly - Un modèle de page qui peut être trouvé ici. Le UINavigationBar a été créé en modifiant le Simple Dark Slider thème qui peut être trouvé ici.
Accentsconagua