Préparation d'une illustration pour le Web

L'illustration est une tendance à la belle dans le web design. Il s'adapte bien le milieu. Grands illustrateurs si, souvent, ne pensent pas en termes de la web quand ils font leurs illustrations. Jetez un oeil à ce ciel très gentil / illustration paysage urbain colline J'ai trouvé sur Shutterstock:

Je pense que cette illustration ferait un excellent point de départ pour une conception Web, mais il est clair qu'il n'est pas prêt pour une telle tâche out-of-the-box. Permet de faire quelques manipulations et à la préparer le Web.

Obtenez-le dans Photoshop

C'est fantastique que l'illustration vectorielle. Cela signifie que nous pouvons faire n'importe quelle taille, nous devons sans aucune perte de qualité. Notre objectif sera de rendre cette scène assis en haut au centre de du navigateur, nous allons donc le faire entrer dans Photoshop au maximum avec de la section principale du contenu de notre site. Say, 960px. Faire un nouveau document Photoshop 960px de large et plus haute que doit être appelé à s'insérer.

Ouvrez votre illustration dans Adobe Illustrator et Sélectionner tout. Copier et coller dans votre document Photoshop. Assurez-vous de le coller en tant qu'objet dynamique. Ceci permettra le conserver c'est la nature des vecteurs, ce qui vous haut de gamme sans perte de qualité. Elle mai come over trop petit. Aucun souci là, juste échelle it up à intégrer dans votre document de 960px de large.

L'extension de la Edges

Fenêtres du navigateur ne sont pas fixes largeur des environnements tels que des documents Photoshop sont. Nous devons préparer notre illustration de regarder agréable quand la fenêtre du navigateur est plus large que notre 960px de base. Allons de l'avant et augmenter la largeur de la zone de notre document de 1280px sorte que nous avons une certaine latitude pour travailler avec.

Notre but ici est d'avoir les pieds dans l'illustration de cette fin de quelque chose qui sera à l'horizontale répétable. La personne tranchage de ce document devra quelque chose comme cela pour faire ce travail de conception pour le web. Finalement, cette tranche sera l'arrière-plan pour l'élément body de la page Web, avec notre illustration principale assis dessus.

Je prends une petite tranche du bord droit de cette illustration et "float"-le sur sa propre nouvelle couche (Command-J).

Maintenant, nous pouvons Transformation cette tranche nouveau petit (Command-T) et de l'étendre horizontalement et de quitter les deux parties du document. Parce que les gradients de Nice ont été créés et verticale, cette extension fonctionne très bien sur le côté droit. Le côté droit bien que, semble beaucoup trop brusque, à la colline, la brousse et la route est coupée brutalement.

Obscurcissement de la Transition

Plutôt que de faire quelque chose de trop de fantaisie et d'essayer de fusionner ces deux couches, let's obscure que la transition dure en plaçant un premier plan objet directement sur le dessus. Cette illustration peut faire avec un peu de profondeur supplémentaire de toute façon.

Cette boîte aux lettres vecteur feront l'affaire.

Supprimer tout sauf la boîte aux lettres elle-même et collez-le dans l'illustration comme un objet dynamique, tout comme nous avons placé l'illustration originale. Un peu de redimensionnement et de placement et nous avons l'élément idéal pour masquer la transition dans les origines.

Le principal secteur de contenu

Notre dessin va faire un en-tête belle et historique, mais pour le contenu réel du site Web, nous aurons besoin d'une sorte de gros bloc de blanc. Laisse tomber un droit blanc rectangle arrondi sur le dessus avec un peu d'une ombre portée à déclencher une crise.

Remplissant le Bas

Avec l'arête horizontale maintenant bien obscurci, nous pouvons remplir la couleur sur le reste du bas de la maquette de site Web. Échantillon d'une couleur (avec l'outil Pipette) du fond du moyen le plus de pixel de l'illustration, puis remplir nos bas-couche la plus vide avec cette nouvelle couleur.

Cette zone de contenu principale va maintenant être un jeu d'enfant pour tout web designer décent de diviser.

Final Touches

Jetez un gentil petit message de bienvenue dans le ciel et nous avons nous-mêmes une maquette nice looking illustrée sur le web. Parce que nous avons pris soin pensif à la fois l'évolutivité horizontale et d'une évolutivité verticale, cette illustration est donc parfait pour la conversion en balises web réel.

DOWNLOAD FILE PHOTOSHOP

Restez à l'écoute sur CSS-Tricks où je vais transformer ce réel dans une page web dans les semaines à venir.