Comment Découper Un Site

Table des matières:

Comment Découper Un Site
Comment Découper Un Site

Vidéo: Comment Découper Un Site

Vidéo: Comment Découper Un Site
Vidéo: Découper une maquette Web sur photoshop 2024, Peut
Anonim

La création de votre propre site Web commence toujours par le développement d'un croquis et d'un futur design, et une partie intégrante de ce développement est la visualisation du design du site dans Photoshop et la découpe du design fini en blocs pour une mise en page ultérieure. La possibilité de découper correctement une image de la conception du site affecte directement le succès ultérieur de la mise en page et le placement correct des fichiers graphiques sur le serveur.

Comment découper un site
Comment découper un site

Instructions

Étape 1

Ouvrez la mise en page de conception créée dans Photoshop, qui est une image solide de la résolution souhaitée. Dans la barre d'outils de Photoshop, sélectionnez l'outil Tranche. Désactivez temporairement la visibilité de tous les calques de texte, champs de saisie, icônes et éléments similaires.

Étape 2

Dessinez avec l'outil choisi les lignes de guidage le long desquelles vous découperez le site - ces lignes sur l'image seront vertes. Divisez soigneusement la disposition d'une seule pièce en éléments structurels de la taille et de la quantité souhaitées.

Étape 3

Pensez à la façon dont vous allez couper l'image - il ne devrait pas y avoir trop d'éléments individuels. Pour créer des lignes de guidage, placez le curseur sur la règle supérieure sur l'image, faites un clic gauche et faites glisser le guide vers le bas. Relâchez le bouton de la souris.

Étape 4

Une fois tous les guides définis (verticaux et horizontaux), procédez au découpage de la mise en page.

Étape 5

À l'aide de l'outil de découpe sélectionné ci-dessus, découpez la mise en page en cliquant avec le bouton gauche sur le début de chaque ligne directrice et en étirant le champ apparu à la taille de l'objet que vous souhaitez découper. Relâchez le bouton gauche de la souris pour qu'un numéro de série apparaisse dans le coin gauche du fragment coupé.

Étape 6

Ajustez les bordures des fragments en les étirant manuellement. Pour enregistrer les parties découpées de l'image globale, cliquez sur l'option "Enregistrer pour les pages Web" dans le menu Fichier et sélectionnez le format JPEG. Dans la fenêtre de sauvegarde, sélectionnez "Tous les fragments".

Étape 7

Après avoir enregistré séparément les fragments d'image découpés, enregistrez tous les éléments visuels de la conception de la page - blocs de texte, boutons, lignes, etc.

Conseillé: