Comment créer une taille de page web dans photoshop

Que vous codez vos propres sites Web ou produire un gourou pour mockups de codage pour construire dans les coulisses, utilisez Adobe Photoshop pour créer des visualisations détaillées pour l`examen de l`équipe et l`approbation du client. Les navigateurs Web affichent dans le monde pixellisé des moniteurs et des écrans de périphériques mobiles, la mise au point de Photoshop sur les images bitmap correspond avec la vue que vos visiteurs verront lorsque vous avez terminé la construction de vos conceptions.

Questions de taille

Lorsque vous maquette ou un prototype d`une page Web, garder les dimensions du moniteur des spectateurs à l`esprit que vous configurez les fichiers de travail dans Adobe Photoshop. Bien que le site W3Schools attire des visiteurs de technologie centrée sur l`équipement dont peuvent ne pas correspondre les utilisateurs d`ordinateurs en moyenne, ses statistiques du site à long terme montrent clairement l`impact des grands dispositifs d`affichage et les résolutions d`écran haute. En Janvier 2014, 47 pour cent de ses visiteurs établissent leurs préférences d`affichage à 1920 par 1080 résolutions ou plus, comparativement à 10 pour cent 10 ans plus tôt. Avec les versions du site en plein écran, si vous construisez la vue périphérique mobile d`un agencement réactif qui s`adapter aux dimensions de l`écran de visiteurs, vous pouvez configurer votre fichier de travail à une taille qui correspond à des dimensions de l`écran commun sur les smartphones et les tablettes .

Ready, Set, Go

Comme vous fomentent le processus de création d`un document Adobe Photoshop, vous commencez avec les bases: les dimensions, la résolution et le mode couleur. Réglez la résolution à 72 pixels par pouce et votre mode de couleurs RVB pour la compatibilité en ligne. de Photoshop "toile" paramètre prédéfini crée automatiquement un fichier de pixels de 800 par 600, ce qui peut ne pas être ce que vous voulez, en fonction du type de page que vous créez et le matériel que vous assumez vos visiteurs utilisent. boîte de dialogue Nouveau du programme vous indique également la quantité d`espace disque de votre document requiert. Utiliser le contenu d`arrière-plan de réglage pour établir un fichier qui comprend une couche de fond blanche, commence par une couche transparente 1 ou remplit l`arrière-plan avec la couleur de premier plan à partir du panneau Outils. Si vous prévoyez de construire plusieurs fichiers à cette taille et avec ces paramètres, enregistrez votre configuration en tant que préréglage. Dans la section Avancé de la boîte de dialogue Nouveau, activez - ou ignorer - la gestion des couleurs et attribuer un profil de couleur.

Sur la grille

fichiers Photoshop quadrillées offrent un espace de travail productif dans lequel la conception mises en page Web basées sur des arrangements cohérents de colonnes, gouttières de colonnes et divisions verticales de page. Lorsque vous configurez ces types d`arrangements, prendre un moment pour faire le calcul sous-jacente en premier. Additionnez les largeurs de vos colonnes et les espaces de gouttière entre eux pour déterminer la largeur totale de la page ou de diviser la largeur que vous souhaitez utiliser les tailles des unités dans lesquelles vous voulez le casser. Avec vos calculs à la main, créez un fichier qui contient les bonnes dimensions pour l`utilisation prévue. Notez que si vous basez mises en page Photoshop sur tout système de mesure autre que les pixels, vous risquez de créer des unités de conception qui ne correspondent pas à la grille de pixels invisible imposé par la résolution de documents. Vous verrez des bords adoucis autour de solides rectangulaires parce que vos mesures ne tombent pas exactement sur la grille propre du fichier. Bien sûr, si vous êtes habitué à travailler en points comme unité de mesure, un fichier de 72 pixels par pouce destiné au Web est en corrélation avec exactement les mesures ponctuelles.

autres considérations

Si vous concevez des écrans ultra-haute résolution des appareils Retina d`affichage d`Apple à l`esprit, créer un ensemble de graphiques à deux fois les dimensions de vos actifs en ligne réguliers et les servir aux visiteurs avec le matériel de qualification. Selon la façon dont vous codez pages de votre site, vous pouvez utiliser deux ensembles distincts de graphiques, les fichiers vers le bas l`échelle Retina-prêts pour d`autres visiteurs ou servir des images régulières à tout le monde. Ajouter "@ 2x" - sans les guillemets - à la fin des noms de fichiers d`un site Web haute résolution afin que le logiciel qui charge vos pages peuvent reconnaître ces documents. Vous aurez de meilleurs résultats si vous construisez les fichiers plus volumineux d`abord et de créer des versions d`entre eux pour redimensionnées écrans réguliers, plutôt que l`inverse, en raison de l`assouplissement inévitable introduit par des opérations de mise à l`échelle d`image.

Information sur la version

Les informations contenues dans cet article s`applique à Adobe Photoshop CC 2014, Adobe Photoshop CC et Adobe Photoshop CS6. Il peut différer légèrement ou significativement avec d`autres versions ou produits.

Les références

• lien W3Schools.com: Navigateur Statistiques d`affichage
• lien Adobe Systems: Adobe Photoshop Aide et didacticiels [CC 2014]
• lien Adobe Systems: Adobe Photoshop Aide et didacticiels [CC]
• lien Adobe Systems: Adobe Photoshop Aide et didacticiels [CS 6]
• lien Webdesign.org: Comment faire pour créer une mise en page du site propre dans Photoshop
• lien Six révisions: Comment créer un Web Design Illustration dans Photoshop
• lien Pont Jaune interactif: Web Design pour les écrans Retina
• lien Lee Munroe: 5 choses à savoir conception pour les écrans haute résolution Retina
• lien Designmodo: Conception pour les écrans Retina, Optimize site Web pour @ 2x Images
• lien StudioPress: Comment concevoir pour les écrans Retina d`Apple

A propos de l`auteur

Elizabeth Mott a été un écrivain depuis 1983. Mott possède une vaste expérience dans la rédaction copie de la publicité pour tout des appareils de cuisine et les services financiers à l`éducation et le tourisme. Elle est titulaire d`un baccalauréat ès arts et une maîtrise ès arts en anglais de l`Indiana State University.