Conception Web dans Pixelmator
Le tout nouveau Pixelmator inclut une fonctionnalité très importante : l’outil Slice. Nous pouvons maintenant 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 tutoriel montrant comment créer un design 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 afin d’avoir des calques avec des guides. Sélectionnez-les tous et allez dans 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
Allez dans 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). Allez ensuite dans Filtre>Générateur>Stripes. Utilisez 6 pour la largeur et 100 pour la netteté. Après cela, changez 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 remplirez le calque avec le dégradé, il remplira toute la zone. Allez dans Édition> Transformation libre.
É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 Rectangle de sélection (M), puis remplissez-le de blanc à l’aide du . Allez dans Édition> Transformation libre (Commande + F). Redimensionnez ensuite le rectangle jusqu’à ce que vous obteniez une ligne de hauteur de 1 pixel. Après cela, changez l’opacité à 20%.
Étape 7
Placez le logo sur l’en-tête maintenant. Utilisez le Outil de type (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 des icônes, puis créez des blocs de texte à l’aide de l’outil de 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, en utilisant à nouveau Lucida Grande Regular, 24pt et blanc pour la couleur. Ajoutez ensuite un peu de texte en dessous, toujours en utilisant Lucida, mais maintenant en 14pt 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 allez dans Filtre> Générateur> Nuages. Utilisez le 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 si de la fumée venait 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 couleur Dodge. Avec l’outil Gomme (E) à nouveau, supprimez la majeure partie du calque, en ne laissant que les parties sur la fumée. Cela créera un bel effet de flamme.
Conclusion
Maintenant, avec l’outil Slice de Pixelmator, nous pouvons commencer à créer des mises en page. Dans ce didacticiel, j’ai couvert des astuces de base telles que la création d’un joli fond dépouillé, de subtils effets 3D et, bien sûr, d’un bel effet de lumière / feu.
Télécharger le fichier Pixelmator
Cliquez ici pour télécharger le fichier Pixelmator utilisé pour ce tutoriel
