Réaliser un WebDesign clean en étant débutant
-
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">Bonjour,</span></div>
<div style="text-align:center;"> </div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">Aujourd'hui je décide de faire un tutoriel assez complet pour mieux vous expliquer les bases du <span style="color:#be3c3a;"><strong>WebDesign/Graphisme</strong></span> et de vous aider à vous lancer sur divers logiciels de PAO mais je vais parler plus précisement des deux logiciels les plus importants <strong>"Adobe Photoshop" & "Adobe Illustrator".</strong></span></div>
<div style="text-align:center;"> </div>
<div style="text-align:center;"><span style="font-size:24px;"><span style="color:#be3c3a;"><strong><span style="font-family:tahoma, geneva, sans-serif;">1- WebDesign ? Quesako ??</span></strong></span></span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">Le WebDesign comme vous pouvez le lire par vous même c'est la conception de l'interface web</span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">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.</span></div>
<div style="text-align:center;">C'est grace aux WebDesigners que tous les sites où vous naviguer actuellement ont un design exceptionnel, chaque sites web ont leurs structure personnelle.</div>
<div style="text-align:center;"> </div>
<div style="text-align:center;"><span style="color:#be3c3a;"><span style="font-size:24px;"><strong><span style="font-family:tahoma, geneva, sans-serif;">2- L'organisations des calques</span></strong></span></span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">Déjà pour travailler je pense que le plus important a mes yeux c'est <strong>l'organisation des calques, s'ils sont mélangés et pas renommer il est impossible de travailler.</strong></span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">C'est pour cela que je vous conseille de les organisaient en créant des "groupes" sur photoshop ou bien "calques" sur illustrator.</span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">Vous pouvez y voir un exemple d'une maquette que j'ai réaliser y'a quelques jours: <a href="http://imageswl.fr/i/BEABIHJHCFM" rel="external nofollow">http://imageswl.fr/i/BEABIHJHCFM</a></span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">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.</span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">Le plus important seras donc de faire un dossier où calque avec <strong>Entête > Menu > Pied</strong> c'est le strict minimum.</span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">Si ce point et acquis alors vous pourrez travailler plus simplement et organiser.</span></div>
<div style="text-align:center;"> </div>
<div style="text-align:center;"><span style="color:#be3c3a;"><span style="font-size:24px;"><strong><span style="font-family:tahoma, geneva, sans-serif;">3- Les couleurs</span></strong></span></span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">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 <strike>fluo (flash)</strike> et rester dans la simplicité.</span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">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.</span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;"><em>Aperçu des nuanciers:</em> <a href="http://imageswl.fr/i/BEABIIAJHCM" rel="external nofollow">http://imageswl.fr/i/BEABIIAJHCM</a></span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;"><em>Lien de téléchargement:</em> <a href="http://ge.tt/2EJrowi1/v/0" rel="external nofollow">http://ge.tt/2EJrowi1/v/0</a></span></div>
<div style="text-align:center;"> </div>
<div style="text-align:center;"><span style="color:#be3c3a;"><span style="font-size:24px;"><strong>4- Les ressources graphique</strong></span></span></div>
<div style="text-align:center;"><strong><span style="font-family:tahoma, geneva, sans-serif;">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 !</span></strong></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">Mais comment ? Alors donc il existe des sites de "Ressources". C'est quoi sa ?</span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">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.</span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">Voici un exemple de ressource: <a href="http://imageswl.fr/i/BEABIHJHJJM" rel="external nofollow">http://imageswl.fr/i/BEABIHJHJJM</a></span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">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ù.</span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">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.</span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">Voici des exemples:</span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">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)</span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">www.igraphisme.com</span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">www.facegfx.com</span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">www.smashfreakz.com/category/resources</span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">www.ui-cloud.com/free-ui-elements</span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">www.webuikits.com</span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">www.freebiesbug.com/psd-freebies</span></div>
<div style="text-align:center;"> </div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;"><span style="font-size:24px;"><span style="color:#be3c3a;"><strong>5- Les sources d'inspirations</strong></span></span></span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">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.</span></div>
<div style="text-align:center;"><strong><span style="font-family:tahoma, geneva, sans-serif;">Voici des exemples:</span></strong></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">www.webdesign-inspiration.com (Celui que je trouve le plus complet que j'utilise très souvent)</span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">www.themeforest.net</span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">www.siteinspire.com</span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">www.dossierdesign.com</span></div>
<div style="text-align:center;"> </div>
<div style="text-align:center;"><strong><span style="font-family:tahoma, geneva, sans-serif;">J'allais oublier voici une liste de 200 sites indispensables pour un Graphiste:</span></strong></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">www.dubostbenoit.com/influences</span></div>
<div style="text-align:center;"> </div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">Voilà j'espère que je vous aurais bien aider, et que maintenant vous êtes prêt pour votre première maquette !</span></div>
<div style="text-align:center;"><span style="font-family:tahoma, geneva, sans-serif;">Je tiens aussi à m'excuser des fautes que j'ai pu faire mais l'orthographe, la conjugaison c'est pas mon truc.</span></div>
<div style="text-align:center;"> </div>
<div><em><span style="color:#be3c3a;"><span style="font-family:tahoma, geneva, sans-serif;">
Tutoriel entièrement rédiger par Swan merci de respecter mon travail et de ne pas redistribuer ce tutoriel sans mon autorisation - 2014.</span></span></em></div> -
<p>Merci pour ce petit tuto ( et les ressources
), ça pourra me servir en tant que débutant. 
</p> -
<blockquote class="ipsQuote" data-cite="Eloha" data-ipsquote="" data-ipsquote-contentclass="forums_Topic" data-ipsquote-contentcommentid="8352" data-ipsquote-contentid="786" data-ipsquote-contenttype="forums" data-ipsquote-timestamp="1401888049" data-ipsquote-username="Eloha"><div>
<div>
<p>Merci pour ce petit tuto ( et les ressources ), ça pourra me servir en tant que débutant. </p>
</div>
</div></blockquote>
<p>Ce fut un plaisir B) </p> -
<p>Très bon sujet, bien expliqué et utile.<br/>
Cependant, je ne sais pas si c'est toi ou pas, mais on a recopié ton sujet <a data-ipb="nomediaparse" href="http://britania.ws/board/index.php?/topic/27290-réaliser-un-webdesign-clean-en-étant-débutant/" rel="external nofollow">ici</a>, malheureusement.</p>
</p>
Hello! It looks like you're interested in this conversation, but you don't have an account yet.
Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.
With your input, this post could be even better 💗
Register Login