background preloader

Tutorial: Créer le design d'un site web de la maquette photoshop à l'intégration XHTML/CSS

Tutorial: Créer le design d'un site web de la maquette photoshop à l'intégration XHTML/CSS
Voici un nouveau tutorial réalisé par Sybio pour La Ferme du Web. Il s'adresse à tous les débutants qui souhaitent créer leur propre WebDesign sous photoshop et de l'intégrer ensuite avec du HTML et CSS. Voici sans plus attendre le sommaire de ce tutorial: Création du site sur Photoshop Avant de se lancer... structure et thème du site ! Accéder à ce chapitre: Création de la maquette du site sous photoshop Découpe du design Les blocsAvant de découper ...Découpage du headerDécoupage du menuDécoupage du milieu du corps ! Accéder à ce chapitre: Découpe du design photoshop Mise en place du site en HTML/CSS Organisation des dossiersLe fichier .htmlLes div de notre fichier .htmlPlace au CSSLe fondImages des blocsDesign au centre de la page ! Accéder à ce chapitre: Mise en place du site en HTML/CSS Je vous rappelle qu'en soumettant vos tutorials sur la Ferme du Web, VOS publicités Google Adsense y seront affichées (2 par chapitre). En attendant, bonne lecture, et bravo à Sybio pour son tutorial ! Related:  maquette tuto

TUTO – Créer une maquette de site Internet Photoshop Light Effect Tutorials I’ve selected various Photoshop tutorials that I’m liking at the moment for light effects, some have quite cool techniques on how to achieve the end result that can be applied to a million different designs (try and experiment with them), check them out below. You might also enjoy: Design a Vista Styled Wallpaper Windows Vista Aurora Effect Design a Vibrant Blackberry Inspired Ad NoPattern “Jumper” Effect Mysterious Lighting Effect How to Create Brilliant Light Streaks Creating a Mac-Type Background Luminescent Lines Create a Glowing Light Painting Effect Abstract Dust And Spray Effect Make a dreamy abstract background Digital Bokeh effect Abstract Lines Background Abstract Light Rays Drawing an Abstract Lightbulb How to create 3D abstract circles Comments Do you have any favourite tutorials that you have seen for light effects?

Comment créer un site web remarquable, partie 4: Créer un design — Edicy blog Si vous-même n'êtes pas un designer, nul besoin de vous donner la peine de réaliser le design de votre site. Il y a deux façons de faire qui peuvent être plus sages et plus efficaces -- louer les services d'un vrai designer ou choisir un template générique dans un stock de designs payants ou gratuits. Faites bien attention: un bon design n'est pas nécessairement un feu d'artifice d'effets spéciaux ou de graphismes défiant l'imagination. Et vous n'avez pas forcément vocation à séduire tous les apprentis-designers qui pourraient être amenés à visiter votre site. Qu'est-ce qui rend un design remarquable? Un design est bon quand il vous dispense de penser. L'esthétique est une question de goût(s). Mais le design comme forme, comme ordonnancement de contenu et comme fonctionnalité, est davantage une question de compréhension que de goût. Un bon design est pratique, il n'est pas simplement "beau". Anatomie d'un bon design Intuitif. Adapté. Convivial. Personnalisation d'un template Conclusion

HTML5, la leçon d’aujourd’hui. Allez, en classe!!! Hello à vous, me voilà de retour. Je vous ai manqué n’est-ce pas? Alors, il paraît que HTML5 est à la mode ces temps-ci (ne riez pas je suis pas en retard moi, mais vous siii!!! Qu’est-ce que je dois faire pour faire un site HTML5? L’HML5, c’est quoi? Quelle difference entre HTML et HTML5 Cool, vous êtes au bon endroit. HTML5, c’est quoi??? J’ai entendu certains dire: C’est un langage de programmation Je suis débutant et je veux apprendre directement HTML5 qui a l’air mieux que HTML Quoi, HTML5! Je tiens donc à clarifier certains malentendus: Primo, HTML5 n’est pas un langage Deuxio, on ne peut l’apprendre directement Et troisio (ça se dit ça??? Regardons bien: Conclusion: Et oui, HTML5 n’est qu’une évolution de HTML4.01 (et de l’XHTML1.0). Mais qui crée le HTML5? ( ord ide eb onsortium) est l’organisation qui s’occupe de standardiser le web. Mais mais mais, une telle responsabilité présente un gros inconvénient: celui de la lenteur du processus. Petit aperçu sur les nouveautés dans le code HTML à: à:

18 outils gratuits pour faire des maquettes d'interfaces graphiques Aujourd'hui, j'ai cherché une petite application qui me permettrait de réaliser des maquettes d'interfaces graphiques simplement, comme je le faisais sous Linux avec Pencil (mais pour Mac OSX). Puis au fil de mes recherches, j'en ai dégoté plusieurs qui je pense vous intéresseront. Voici donc une sélection de 18 outils de création d'interfaces graphiques (et de schémas) pour vos projets. J'ai fait un mix entre les outils Mac, Windows et Linux (en précisant à chaque fois) et j'ai listé les outils payants à la fin (en bonus). Balsamiq mockups Fonctionne sous Mac, Windows et Linux. Rejoignez les 60762 korbenautes et réveillez le bidouilleur qui est en vous Suivez KorbenUn jour ça vous sauvera la vie..

créer une maquette de site internet web 2.0 avec Photoshop CS5 sur Tuto Dans ce tuto Photoshop vous allez pourvoir apprendre et comprendre le fonctionnement d'un graphiste sur Photoshop pour créer votre propre maquette de site internet. Cette vidéo est adaptée aux novices tout comme aux passionnés de web design à petit budget (ce tuto est compatible CS2, CS3, CS4, CS5) Résultat final obtenu grâce à ce tuto : Vous allez pouvoir au fil des chapitres mettre en place une maquette de site internet design et dans l'air du temps : le Web 2.0 Techniques abordées dans ce tuto Photoshop Optimisation et rangement de la palette des calques (gestion des dossiers,...)Apprendre à faire un dégradéUtilisation d'un Framework (960 GS template)Redimensionnement d'image et d'objetCréation d'un logo et boutons Web 2.0Gestion des polices (Gestion interligne, Paragraphe,...)Gestion de l'espace (alignement, repères, règles,...)Gestion des options de fusionGestion styles de calques Jetez un oeil à ces autres tuto Photoshop CS5 bpdesign , Formateur Toutes les formations de Bpdesign

60 tutoriels Photoshop pour les effets de texte Le texte est un élément de base dans les maquettes et les créations graphiques. Le bon choix des polices et des couleurs requiert de l’expérience et un gout artistique développé pour arriver à des résultats surprenants. L’utilisation de Photoshop et l’ensemble des outils puissants pour texte qu’il propose permet de créer des effets de texte magnifiques. Cet article regroupe 60 tutoriels réalisés par les maitres de Photoshop pour vous aider à améliorer vos techniques et à découvrir des retouches simples qui donnent des effets de texte éblouissants et magnifiques… 60 tutoriels Photoshop pour les effets de texte Ce qui suit est une collection de tutoriels Photoshop pour la réalisation d’effets de texte que vous pouvez utiliser dans vos maquettes, sites web, magazines et posters … Vous trouverez les bases de l’utilisation des calques texte sous Photoshop ainsi qu’un ensembles de techniques avancées… texture 3D Créer un texte 3D texturisé à l’aide de Photoshop et Illustrator. Un autre effet !

Créer la maquette de son site web pro : les bons outils Une fois réalisés le cahier des charges et l'arborescence de son site web, commence la phase de maquettage, aussi appelée « wireframing ». Une étape indispensable pour se faire une idée plus précise de l'ergonomie du site. De nombreux outils de wireframing gratuits ou payants sont aujourd'hui disponibles pour réaliser cette tâche. Simples d'utilisation, ils sont particulièrement utiles aux professionnels encadrant la réalisation d'un projet web. Notre vidéo Le wireframing ou maquettage de sites web : qu'est-ce que c'est ? Le « wireframing » (maquettage) est l'étape consistant à représenter schématiquement l'organisation d'un site web (ex : arborescence), ainsi que son interface graphique (interactivité et ergonomie). Outils et logiciels de maquettage ou de wireframing Les outils de maquettage se destinent à l'ensemble des professionnels réunis autour d'un projet de conception web, qu'ils soient ou non techniciens. Pour quels professionnels ? Pencil Project Lumzy MockFlow Cacoo Balsamiq iPlotz

30 Creative E-Commerce Designs E-Commerce is an electronic marketing system, which consists of the buying and selling of products or services over electronic systems such as the internet or other networks. The meaning of ecommerce has changed over the last 30 years. Originally e-commerce meant the facilitation of commercial transactions electronically, using technology such as Electronic Data Interchange and Electronic Funds Transfer. By the end of 2000, many European and American business companies offered their services through the internet. Martique Serene Order Nike Store Cellar Thief Unformal Wear Hunter’s Wineshop Heartbreaker Adorn Candy Direct Tropikalny Ogród Better Closet Perfume Point 4-rth Equip Your Trip Under Armour Code Canyon Hello Themes Bonjour Mon Coussin Galante Bridge55 Dripping in Fat Free People Perfect Order Doorstep Dairy This is Nation Caribou Coffee Chocomize Novica Design by Humans Sena

L'importance de la page d'accueil d’un site web, que doit-elle contenir Bonjour ! Welcome to my website ! La page d’accueil d’un site (e-commerce ou non) est un passage obligé, un point incontournable aussi bien en matière de référencement ou de communication. C’est pourquoi il est essentiel d’en parler ! Un petit test rapide vendredi dernier sur Twitter (Merci à tous ceux qui m’ont répondu !) Une bonne page d’accueil doit être : « accueillante » : 3 réponses « claire » : 2 réponses (complète avec des informations faciles à trouver) « rassurante » : 1 réponse (on est sur le bon site) « élégante » : 1 réponse A mon avis, il est clair que les premières idées auxquelles on pense quant à une « page d’accueil » de site web ont trait à : Graphisme Hiérarchisation des informations Impact communicationnel La page d’accueil d’un site web est (bien souvent) le premier contact avec un site web. Ce n’est pas cette page d’accueil qui fera directement vendre mais c’est elle qui peut faire perdre une vente ! Une page sobre « Sobriété » ne signifie pas « dénuement »… !

50 tutoriels photoshop pour le ciel et les effets de l'espace et des planètes Le ciel, les nuages, le soleil, les étoiles et les planètes sont des éléments omniprésents dans les illustrations, les photos personnelles ou les maquettes professionnelles. Photoshop permet -à l’aide de ses outils- de manipuler ces éléments et d’ajouter des effets réalistes ou correctifs. Il permet aussi de réaliser des paysages fantastiques et imaginaires. Après les retouches de beauté, les effets d’eau et de pluie et la réalisation des anciens modèles, cet article présente 50 tutoriels réalisés par des professionnels de Photoshop. L’espace et les planètes Effet d’éclipse avec Photoshop Fabio Sasso, un maître de Photoshop vous montre comment réaliser cet effet de lumière. Tutoriel pour l’espace et les planètes Créez cette figure avec de simples effets Photoshop. Comment réaliser une planète réelle ? Nébuleuse Créez une scène colorée de nébuleuse spatiale. Réalisation d’une scène d’espace Créer une scène avec des planètes et des lumières… Les explosions La fin du monde ! Le ciel Vidéos

Design et ergonomie d’un site Web Comment faire en sorte que vos visiteurs se sentent à l'aise sur votre site, qu'ils y trouvent leurs repères et qu'ils aient envie d'y revenir ? Ces règles simples peuvent vous permettre d'accrocher et de conserver vos lecteurs. Dans cette page : Les standards - Principes de mise en page - Importance du contraste - Le zapping - L'esthétique - La couleur En bref ... Respecter les standards Vos visiteurs sont habitués à certains mécanismes, ne les perturbez pas. A lire en complément : Ergonomie d'un site Web par Kreatys En détail ... Quelques principes de mise en page La communication écrite existe à grande échelle depuis plus de 500 ans. Les légendes des belles images sont lues même par les visiteurs pressés ! source image : civilization.ca La mise en page doit être conçue comme une pyramide. Le titre : Court, explicatif, accrocheur. 50% des lecteurs quitteront votre page si le titre est absent ou peu intéressant. Les paragraphes : Vous devez développer une seule idée par paragraphe. Le zapping

7 Key Elements of an E-Commerce Website A layout for an e-commerce site is not new to any web designer but any such project has a fairly large scale. Its importance is that the difference between a good design and a decent one can be the key to profit. Web designers know that any error can be worth thousands of dollars and success is a good way of attracting other clients. A rich and assorted offer gives customers the opportunity to choose the best solution, one that is adequate to their budget and needs. No parts of an online store layout can be neglected, but there are some elements that play an important role in attracting customers and compelling shoppers, in this post I’ll illustrate these and offer an explanation about the role they play. 1. Any online shops have it a generous offer, a good price-quality ratio and a good design will bring in few buyers if the call-to-action button is not easy to find. 2. 3. A common mistake of designers is placing in one basket Internet users and online buyers. 4. 5. 6. 7.

Related: