PARTIE 1 : LE DESIGN SOUS PHOTOSHOP


1. PRÉPARATION DU DOCUMENT ET CONFIGURATION DE L’ESPACE DE TRAVAIL

Ouvrez Photoshop et créez un nouveau document d’une taille de 1000 pixels de largeur pour 800 de hauteur. Veillez bien à avoir un document avec une résolution de 72 pixels / pouce et en mode RVB 8 bits. Une fois le document correctement paramétré, cliquez sur le bouton «OK».

De façon à bien structurer notre design, nous allons commencer par diviser notre document en plusieurs parties. Pour cela nous allons utiliser les règles. Si elles ne sont pas affichées, rendez vous dans le menu «Affichage > Règles», ou pressez simultanément les touches «CTRL» et «R».

Pendant que vous vous trouvez dans ce menu, profitez-en pour vérifier que l’outil «magnétisme» est actif (juste en dessous de «règle»), car il va vraiment nous faciliter la tâche pour découper notre design en vue de l’exportation pour l’intégration.

La dernière chose que vous devez vérifier est que vos règles ont bien des valeurs en pixels. Si ce n’est pas le cas, double cliquez sur l’une des règles et dans la fenêtre qui vient de s’ouvrir, dans l’encadré «Unités», cliquez sur le menu déroulant correspondant aux règles et choisissez «pixels». 


2. DIVISION DU DOCUMENT À L’AIDE DES RÈGLES

Bien, maintenant que votre espace de travail est configuré comme il faut nous pouvons commencer à travailler.

Comme je le disais, nous allons dans un premier temps nous aider des règles pour mettre en évidence les différentes parties de notre site, cela nous permettra dans un second temps de dessiner nos éléments graphiques avec aisance grâce au magnétisme.

Placez donc une première règle verticale (par simple cliquer / glisser) à 350 pixels du bord gauche. Placez ensuite deux règles horizontalement, une à 200 pixels et l’autre à 600 pixels du bord haut de votre document. Voici les volumes :

3. DESIGN DU PANNEAU D’INFORMATIONS

Maintenant que vous avez convenablement placé les repères, prenez votre outil rectangle. Sélectionnez comme couleur de premier plan le noir et tracez sur un nouveau calque le rectangle mis en évidence par les règles dans la seconde ligne, première colonne. C’est sur ce rectangle que vous placerez par exemple votre nom ou logo et quelques informations vous concernant. Pour ma part, j’ai choisi de mettre les informations que je juge capitales, à savoir le logo, ce que je fais, qui je suis, et deux moyens de me contacter, le téléphone et l’email. Veillez bien, étant donné que le design du portfolio est minimal, à équilibrer les volumes. Comprenez par là qu’il est indispensable de structurer cette mini zone vous présentant.

Dans un premier temps, divisez verticalement la surface de ce rectangle en deux parties égales en plaçant une règle horizontale à 400 pixels. Dans la partie haute, placez votre logo, en le centrant verticalement et horizontalement à l’intérieur de celui-ci.

Dans la partie basse, écrivez les informations vous concernant. N’hésitez pas à créer des genres de petites puces, ou éléments graphiques de façon à scinder vos informations en plusieurs groupes. N’oubliez pas tout de même que vous êtes en train de travailler sur un portfolio de graphiste et que du coup la couleur est de rigueur. Ces petites puces sont un bon prétexte pour en introduire. Voici ce que j’obtiens :


Notations 

Autres tutoriels Flash, Web

Ecoles & formations - derniers articles
3IS : Une pédagogie sur projets
Par la rédaction le 20/08/2012
3IS, l’école des métiers du Cinéma et de l’Audiovisuel, a ouvert une filière Arts Numériques en 2011, avec l’idée de former des élèves afin qu’ils soient « multi-compétences », capables de répondre à tous les enjeux du monde professionnel.

[Lire le dossier...]

Aries : Une école en pleine mutation
Par la rédaction le 20/08/2012
Présent dans six villes en France, le groupe d’écoles Ariès présente plusieurs avantages : multiples filières (2D, 3D), qualité d’enseignement et une réelle volonté de proposer des formations qualifiantes pour les années à venir.

[Lire le dossier...]

Bellecour - ESIA 3D : Une fourmilière de talents pour l’industrie créative
Par Emilien Ercolani le 04/01/2012
Connue et reconnue, l’école Bellecour, située, comme son nom l’indique, à Lyon, ne se repose pas sur ses lauriers, et continue de proposer des formations au goût du jour à ses élèves, notamment dans la section ESIA 3D. Revue et actualité de l’école du Rhône. 

[Lire le dossier...]

COM'ART : Tentez une nouvelle expérience !
Par Emilien Ercolani le 19/10/2011
Voici une nouvelle école située à Paris. Baptisée Com'Art, elle propose une mise à niveau après le Bac (MANAA) puis des BTS et des formations, de la communication visuelle au design produit en passant par la décoration d'intérieur et l'animation 3D.

[Lire le dossier...]

 Livres et DVD CréaNum

Get Aggregated RSS