Swan Posté(e) June 4, 2014 Signaler Share Posté(e) June 4, 2014 Bonjour, Aujourd'hui je décide de faire un tutoriel assez complet pour mieux vous expliquer les bases du WebDesign/Graphisme et de vous aider à vous lancer sur divers logiciels de PAO mais je vais parler plus précisement des deux logiciels les plus importants "Adobe Photoshop" & "Adobe Illustrator". 1- WebDesign ? Quesako ?? Le WebDesign comme vous pouvez le lire par vous même c'est la conception de l'interface web Je m'explique mieux, avant de developper n'importe quel site il faut d'abord avoir fait la maquette et c'est le WebDesigner qui va s'en occuper il va constituer une maquette complète du site web en image. C'est grace aux WebDesigners que tous les sites où vous naviguer actuellement ont un design exceptionnel, chaque sites web ont leurs structure personnelle. 2- L'organisations des calques Déjà pour travailler je pense que le plus important a mes yeux c'est l'organisation des calques, s'ils sont mélangés et pas renommer il est impossible de travailler. C'est pour cela que je vous conseille de les organisaient en créant des "groupes" sur photoshop ou bien "calques" sur illustrator. Vous pouvez y voir un exemple d'une maquette que j'ai réaliser y'a quelques jours: http://imageswl.fr/i/BEABIHJHCFM L'entête sera le haut du site (souvent appeler la bannière) > Le menu seras tous les textes où ont y place tes onglets comme "Accueil, Contact, Nos services, ..." le pied sera le bas du site (souvent appeler footer) > Puis après tout ce qui est expertise est autre ce sont les différents emplacements de divers widget. Le plus important seras donc de faire un dossier où calque avec Entête > Menu > Pied c'est le strict minimum. Si ce point et acquis alors vous pourrez travailler plus simplement et organiser. 3- Les couleurs Il est aussi très important dès le début de votre maquette de choisir la bonne couleur, il en existe des millions c'est pour cela qu'il faut une couleur qui donne envie à l'oeil, donc surtout éviter les couleurs fluo (flash) et rester dans la simplicité. Pour cela je vais vous donner mon pack de nuancier spécialement pour le web, dedans il y a 68 palettes de nuancier toutes différentes. Aperçu des nuanciers: http://imageswl.fr/i/BEABIIAJHCM Lien de téléchargement: http://ge.tt/2EJrowi1/v/0 4- Les ressources graphique Débutant ? Ce n'est plus un souci maintenant nous pouvons créer un design très professionnel sans savoir trop utiliser les logiciels de PAO ! Mais comment ? Alors donc il existe des sites de "Ressources". C'est quoi sa ? Des sites qui regroupent des tonnes de .psd ou .ai ou dedans y ai intégrer des menus, icons, enfin vraiment de tout qui est déjà fait, quelques modifications vous le mettez sur votre calque a vous il sa s'intègre parfaitement. Voici un exemple de ressource: http://imageswl.fr/i/BEABIHJHJJM Tous les différents modules comme le "Slider" "Top games" etc ... sont tous modifiables comme si c'était vous qui l'avait enregistrer en .psd pour le modifier au cas où. Il y a des UI KIT 100% gratuit qui traînent sur le net, en gros des UI KIT sont des éléments comme je t'ai montrer sur la screen mais pour les sites web car sur les sites de ressources tu as vraiment de tout. Voici des exemples: www.365psd.com (Ils rajoutent une ressource tout les jours il est déjà très bien remplis, je l’utilise très souvent c'est le mieux pour moi) www.igraphisme.com www.facegfx.com www.smashfreakz.com/category/resources www.ui-cloud.com/free-ui-elements www.webuikits.com www.freebiesbug.com/psd-freebies 5- Les sources d'inspirations Il y a des tonnes de sources d'inspirations sur le web ce n'est pas ce qu'il manque, heureusement que ce genre de sites est la pour nous quand ont a plus d'idées pour un concept on va faire un tour sur ces sites puis quelques minutes après on est repartis pour quelques heures de créations. Voici des exemples: www.webdesign-inspiration.com (Celui que je trouve le plus complet que j'utilise très souvent) www.themeforest.net www.siteinspire.com www.dossierdesign.com J'allais oublier voici une liste de 200 sites indispensables pour un Graphiste: www.dubostbenoit.com/influences Voilà j'espère que je vous aurais bien aider, et que maintenant vous êtes prêt pour votre première maquette ! Je tiens aussi à m'excuser des fautes que j'ai pu faire mais l'orthographe, la conjugaison c'est pas mon truc. © Tutoriel entièrement rédiger par Swan merci de respecter mon travail et de ne pas redistribuer ce tutoriel sans mon autorisation - 2014. 2 Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
Eloha Posté(e) June 4, 2014 Signaler Share Posté(e) June 4, 2014 Merci pour ce petit tuto ( et les ressources ), ça pourra me servir en tant que débutant. Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
Swan Posté(e) June 4, 2014 Auteur Signaler Share Posté(e) June 4, 2014 Merci pour ce petit tuto ( et les ressources ), ça pourra me servir en tant que débutant. Ce fut un plaisir Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
Azad Posté(e) June 6, 2014 Signaler Share Posté(e) June 6, 2014 Très bon sujet, bien expliqué et utile. Cependant, je ne sais pas si c'est toi ou pas, mais on a recopié ton sujet ici, malheureusement. Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
Baptiste Posté(e) October 24, 2014 Signaler Share Posté(e) October 24, 2014 Je suis un petit novice dans le web design, et j'ai réalisé moi même un petit site, que vous pourrez trouver dans ma signature, il s'agit d'un site que j'ai fais bien entendu de 0, grâce à photoshop cs6 et webweaver, et c'était assez simple Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
Mimi Posté(e) October 25, 2014 Signaler Share Posté(e) October 25, 2014 Merci beaucoup, sa va m'aidée. Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.