Concevoir un site Web à partir de zéro - Illustrator ou Photoshop?

Si je conçois un site Web à partir de zéro et que j'ai l'intention de le découper et de le coder ultérieurement dans Adobe Dreamweaver, dois-je créer la conception du site Web dans Illustrator ou Photoshop? Pourquoi?

Réponse littérale rapide: entre Illustrator et Photoshop, PhotoShop, comme c'est raster, comme c'est le site Web.

Réponse un peu plus détaillée: vous utiliseriez les deux.

Autre réponse: envisagez d'utiliser Adobe Fireworks. Fireworks est tellement plus facile à utiliser une fois que vous maîtrisez la production de graphiques Web.

Réponse de conférence longue et ennuyeuse:

La méthode "Slice-n-Dice" est un peu datée. C'était populaire il y a une décennie, mais de nos jours ce n'est vraiment pas l'approche recommandée. Je suggère:

• Utilisez n'importe quelle application (AI / PSD) pour «esquisser» le site. N'hésitez pas à aller à haute fidélité, mais traitez-le simplement comme une maquette.

• une fois que vous avez établi cela, commencez à construire le site. Plongez dans le HTML / CSS / JS.

• au besoin, accédez à PhotoShop pour créer les éléments graphiques individuels dont vous avez besoin.

Pourquoi? Eh bien, la conception dans Photoshop ne tient pas compte du support sur lequel vous travaillez. C'est un canevas fixe et le Web n'est pas un canevas fixe, ni même un canevas standard. Cela mène l'équipe vers une idée parfaite en pixels et le Web n'est tout simplement pas parfait en pixels.

Utilisez Fireworks ou Illustrator pour la création de logos et d'icônes. Pour l'édition de photos, utilisez Photoshop. Pour tout le reste, cela importe très peu. Je sais qu'il y a eu des débats sur le logiciel graphique à utiliser, mais c'est vraiment une préférence personnelle.

Cependant, gardez à l'esprit:

• Fireworks est cependant meilleur pour la compression PNG. Les tailles de fichier ont tendance à être 20% à 30% plus petites que celles de Photoshop.

• Si vous savez que vous allez concevoir d'autres contenus non Web pour le site (t-shirts, affiches, dépliants, etc.), il est préférable de commencer dans un programme vectoriel.

Je dois être en désaccord avec DA01.

Le fait qu'un document Web ne soit pas une image statique n'est pas pertinent pour l'utilité d'un éditeur graphique pour la mise en page et la conception d'un site Web. Votre maquette de conception n'a pas besoin (et ne devrait pas) être un prototype fonctionnel de votre site Web. La maquette de conception est un document qui vous aide à visualiser et à sculpter la conception esthétique de votre site.

Ce n'est pas parce qu'une feuille de papier ou un tableau blanc n'a pas toutes les qualités minuscules d'un document Web qu'il ne peut pas être utilisé pour câbler un site Web. De même, le fait que la fenêtre du navigateur puisse être étirée et redimensionnée n'a aucune incidence sur la valeur des maquettes de conception. Tout concepteur Web expérimenté saura planifier certaines parties de la mise en page comme élastique et tenir compte des limites des technologies Web. Tous les éléments visuels d'une mise en page peuvent toujours être représentés dans une image plate (c'est ainsi que cela est rendu à l'écran après tout).

Deuxièmement, une approche fragmentaire de la conception n'est pas propice à des résultats de qualité. Vous concevez une mise en page Web, pas une centaine de widgets isolés. Sans une maquette de la mise en page complète, vous claquez simplement les choses sans aucune idée de ce à quoi le résultat final devrait ressembler. L'ajout d'éléments graphiques individuels pièce par pièce au fur et à mesure sans avoir un aperçu de la composition complète va à l'encontre des bonnes pratiques de conception. Une conception est terminée lorsque vous n'avez plus de choses à supprimer, pas lorsque vous n'avez plus de choses à ajouter.

Enfin, il faut beaucoup plus de temps pour apporter des modifications de conception dans le code que pour modifier une image maquette. C'est pourquoi vous devez toujours planifier votre conception dans des maquettes avant de vous engager à coder. Que vous utilisiez un programme de graphiques vectoriels comme Fireworks ou Illustrator ou un programme raster comme Photoshop, c'est à vous de décider. Mais vous devez toujours élaborer votre conception dans un éditeur graphique avant de commencer à la coder.

Voici un bon article expliquant cela d'une manière amusante :) http://www.gomediazine.com/tutorials/photoshop-vs-illustrator-part-1/

voici une meilleure explication d'une source très fiable "http://99designs.com/help/whats-the-difference-between-photoshop-and-illustrator"

"En fin de compte, la décision de l'outil à utiliser devrait être prescrite par le titulaire du concours, mais en général, Illustrator devrait être utilisé pour les logos et les travaux d'impression, tandis que Photoshop devrait être utilisé pour la conception Web et tout design qui ne peut être vu que sur un ordinateur. écran."

Si vous avez besoin de "découpage", vous pouvez utiliser directement Photoshop sans passer par Dreamweaver.

Il existe 2 façons de découper dans Photoshop, automatiquement et manuellement en sélectionnant la partie du graphique dont vous avez besoin et en l'enregistrant pour le Web, une pièce à la fois.

Chaque fois que vous "découpez automatiquement" en générant du HTML, vous décidez de perdre le contrôle du code. Au début de votre carrière, ça va, vous apprenez, mais il arrivera un moment où vous devrez connaître le code, car pour l'optimisation, il vaut mieux coder à la main sur un éditeur de texte avancé (par exemple le logiciel Ultraedit) faisant votre propre html et css.

Le seul moment que je trouve plus utile, le découpage automatique, c'est quand je dois générer du code de table lors de la conception d'e-mails.

Photoshop à l'image prêt. c'est à dire sur le contenu du site. Le client ne paie pas pour l'amélioration de votre portefeuille. KL

Il est évident que vous devriez utiliser Photoshop pour des maquettes complètes de conception Web.

Les conceptions Illustrator tendent toujours à être plus lentes que les conceptions Photoshop.

Si vous concevez des icônes et des éléments Web, je suggère de concevoir dans Illustrator, puis de placer ces éléments dans Photoshop.

Si vous créez des maquettes dans Photoshop, vous pouvez facilement transférer ces documents vers Fireworks pour un prototypage rapide.

Photoshop sera meilleur. Cela aidera les utilisateurs à trancher.