Conception de sites Web dans Pixelmator
Le Pixelmator récemment publié comprend une fonctionnalité très importante : l'outil Slice. Nous pouvons désormais découper et enregistrer des éléments de la mise en page pour créer des sites Web. C'est vraiment pratique ! Pour cette raison, j'ai décidé de créer un didacticiel montrant comment créer une conception de site Web à l'aide de Pixelmator.
Étape 1
Ouvrez Pixelmator, accédez à http://960.gs/ et téléchargez les fichiers modèles. Ouvrez la version PSD pour avoir des calques avec des guides. Sélectionnez-les tous et accédez à Calque> Fusionner les calques. Après cela, remplissez le calque d'arrière-plan avec du gris foncé (# 333) à l'aide de l'outil Pot de peinture (N).
Étape 2
Accédez à Filtre> Styliser> Bruit. Utilisez 1 pour le montant. Assurez-vous également que Monochrome n'est pas sélectionné.
Étape 3
Ajoutez un nouveau calque et remplissez-le de blanc, toujours à l'aide de l'outil Pot de peinture (N). Ensuite, allez dans Filtre>Générateur>Stripes. Utilisez 6 pour la largeur et 100 pour la netteté. Après cela, modifiez l'opacité à 5 %.
Étape 4
Ajoutez un nouveau calque et, avec l'outil Dégradé (G), remplissez le calque avec un dégradé allant du gris (#666) au noir (#000). Vous devrez également redimensionner le calque car, lorsque vous remplissez le calque avec le dégradé, il remplira toute la zone. Accédez à Édition> Transformation gratuite.
Étape 5
Ajoutez un autre calque et remplissez-le de noir à l'aide de l'outil Pot de peinture (N). Ce calque sera sous le calque avec dégradé. Après cela, changez l'opacité de ce calque à 70%.
Étape 6
Créez un nouveau calque avec l'outil de sélection rectangulaire (M), puis remplissez-le de blanc à l'aide du . Accédez à Édition> Transformation libre (Commande + F). Redimensionnez ensuite le rectangle jusqu'à obtenir une ligne de hauteur de 1 pixel. Après cela, modifiez l'opacité à 20 %.
Étape 7
Placez maintenant le logo sur l'en-tête. Utilisez l'outil Texte (T) pour créer le texte.
Étape 8
Importons un modèle iPhone. Vous pouvez télécharger le fichier PSD sur http://www.teehanlax.com/blog/?p=447. Placez-le dans le document. Utilisez l'image ci-dessous pour référence.
Étape 9
Choisissez une image et placez-la devant l'iPhone. Ensuite, avec l'outil de sélection rectangulaire (M), sélectionnez la zone d'écran visible de l'iPhone et masquez l'image que vous venez d'importer.
Étape 10
Importez quelques icônes, puis créez des blocs de texte à l'aide de l'outil Texte (T) pour les titres. Utilisez Lucida Grande Regular, 14pt et blanc. Pour le texte de description, utilisez Lucida Grande Regular, 11pt et gris (#999)
Étape 11
Ajoutez maintenant un slogan, toujours en utilisant Lucida Grande Regular, 24 pt et blanc pour la couleur. Ajoutez ensuite un petit texte en dessous, toujours en utilisant Lucida, mais maintenant en 14 pt et gris (#999). Il est important de créer un gros bloc de contenu avec le slogan et la description alignés à gauche et avec le bloc de fonctionnalités.
Étape 12
Ajoutez le badge App Store avec du texte à côté.
Étape 13
Ajoutez un nouveau calque sous l'iPhone et accédez à Filtre> Générateur> Nuages. Utilisez du noir et blanc pour les couleurs.
Étape 14
Avec l'outil Gomme (E), supprimez la majeure partie du calque, en ne laissant que quelques parties sous le téléphone, comme s'il s'agissait de fumée venant de derrière.
Étape 15
Ajoutez un nouveau calque au-dessus du calque de fumée et remplissez-le de jaune foncé (# f88b00). Ensuite, changez le mélange en Color Dodge. Avec l'outil Gomme (E), supprimez à nouveau la majeure partie du calque, ne laissant que les parties sur la fumée. Cela créera un bel effet de flamme.
Conclusion
Désormais, avec l'outil Slice de Pixelmator, nous pouvons commencer à créer des mises en page. Dans ce didacticiel, j'ai couvert des conseils de base tels que la création d'un joli arrière-plan dépouillé, des effets 3D subtils et, bien sûr, un bel effet de lumière/feu.
Téléchargez le fichier Pixelmator
Cliquez ici pour télécharger le fichier Pixelmator utilisé pour ce tutoriel
