Progettare un sito Web da zero - Illustrator o Photoshop?

11

Se sto progettando un sito Web da zero e intendo suddividerlo e codificarlo in Adobe Dreamweaver in un secondo momento, dovrei creare il design del sito Web in Illustrator o Photoshop? Perché?

adobe-photoshop  adobe-illustrator  website-design  software-recommendation 
— JFW
fonte
1
Consiglierei Photoshop per il suo uso più ampio e più tutorial.
— Jichao,
6
Per cominciare, non dovresti progettare siti web usando la vecchia metodologia "taglia un'immagine". Idealmente, inizieresti in HTML / CSS e utilizzerai le tue applicazioni di immagini mentre procedi.
— DA01,
@Jichao: il tuo commento dovrebbe essere trasformato in una risposta.
— Philip Regan,
2
@ DA01 "shouldn't" potrebbe essere troppo imperativo per una questione così soggettiva. Non esiste una best practice adatta a tutti.
— Jari Keinänen,
2
@koiyu molto vero. Detto questo, slice-n-dice è meno spesso la migliore pratica in questi giorni. Elaborerò una risposta.
— DA01,

Risposte:

26

Risposta letterale rapida: tra Illustrator e Photoshop, PhotoShop, poiché è raster, così come il sito web.

Risposta leggermente più dettagliata: useresti entrambi.

Risposta alternativa: considera l'utilizzo di Adobe Fireworks. Fireworks è molto più facile da usare una volta capito come si produce la grafica web.

Risposta alla lezione lunga e noiosa:

Il metodo "Slice-n-Dice" è un po 'datato. Era popolare un decennio fa, ma oggigiorno non è proprio l'approccio raccomandato. Suggerirei:

  • Usa qualsiasi app (AI / PSD) per "disegnare" il sito. Sentiti libero di andare in alta fedeltà, ma trattalo semplicemente come un modello.

  • una volta che lo hai stabilito, inizia a costruire il sito. Tuffati in HTML / CSS / JS.

  • se necessario, passa a PhotoShop per creare i singoli elementi grafici di cui hai bisogno.

Perché? Bene, la progettazione in Photoshop non tiene conto del supporto su cui stai lavorando. È una tela fissa e il web non è una tela fissa, né è nemmeno una tela standard. Conduce il team verso un'idea perfetta per i pixel e il web semplicemente non è perfetto per i pixel.

— DA01
fonte
Forse, potremmo semplicemente correggere la larghezza della tela, poiché ci sono così tanti famosi siti Web a larghezza fissa. Per ulteriori informazioni, si prega di consultare 960.gs .
— Jichao,
che ti porterà a metà strada. per alcuni schermi.
— DA01,
Questo dovrebbe essere un problema. Tuttavia, non ho grandi LCD, quindi non ho l'opportunità di testarlo.
— Jichao,
1
scusa se ero ottuso. Quello che volevo dire è che c'è molto di più nel non essere un canvas fisso rispetto al fatto che si tratti o meno di un sito a larghezza fissa ... contenuti, dispositivi mobili, tecnologie di assistenza, SEO, discrepanze del browser, ecc.
— DA01,
2
+1 per aver raccomandato Fireworks nella tua risposta. Un'applicazione di web design molto sottovalutata ma potente.
— Dwayne Charrington,
7

Utilizzare Fireworks o Illustrator per la creazione di logo e icone. Per il fotoritocco usa Photoshop. Per tutto il resto importa molto poco. So che ci sono stati dibattiti su quale software grafico usare, ma è una preferenza davvero personale.

Tuttavia, tieni presente:

  • Tuttavia, Fireworks è migliore per la compressione PNG. Le dimensioni dei file tendono ad essere inferiori del 20% -30% rispetto a quelle di Photoshop.

  • Se conosci la strada progetterai altri contenuti non web per il sito (magliette, poster, volantini, ecc.) È meglio se inizi in un programma basato su vettori.

— Jin
fonte
+1 per "Se conosci la strada ...", in effetti, trovo che sia meglio lavorare supponendo che saranno necessari elementi visivi chiave in altri formati. I clienti non sanno quasi mai per cosa vorranno usare qualcosa fino a quando non lo vedono e non capiranno mai che far funzionare un'immagine web RGB per la stampa non è facile come si aspettano ... È bello avere qualcosa in tasca per l'occasionale "Sembra fantastico, puoi prendere quello stile e applicarlo a questi poster da parete A0 che stamperemo per la nostra grande conferenza martedì prossimo? È facile da fare, giusto?"
— user56reinstatemonica8
Per quanto riguarda l'efficiente compressione delle immagini, non mi affido a nessuna delle app di Adobe. Prova qualcosa come ImageOptim , un'app per Mac. Esistono altre soluzioni locali e basate sul web. Otterrai una grafica molto più piccola, in alcuni casi.
— borghese il
6

Non sono d'accordo con DA01.

Il fatto che un documento Web non sia un'immagine statica è irrilevante per l'utilità di un editor grafico per il layout e la progettazione di un sito Web. Il tuo mockup di design non ha bisogno (e non dovrebbe) essere un prototipo funzionante del tuo sito web. Il mockup di design è un documento che ti aiuta a visualizzare e scolpire il design estetico del tuo sito.

Solo perché un foglio di carta o una lavagna non ha tutte le qualità minime di un documento Web, ciò non significa che non possa essere utilizzato per il wireframe di un sito Web. Allo stesso modo, il fatto che la finestra del browser possa essere allungata e ridimensionata non influisce sul valore dei modelli di progettazione. Qualsiasi web designer esperto saprà pianificare alcune parti del layout come elastiche e tenere conto dei limiti delle tecnologie web. Tutti gli elementi visivi di un layout possono ancora essere rappresentati all'interno di un'immagine piatta (è così che viene visualizzato sullo schermo dopo tutto).

In secondo luogo, un approccio frammentario alla progettazione non favorisce risultati di qualità. Stai progettando un layout web, non un centinaio di widget isolati. Senza un modello dell'intero layout, in pratica stai solo schiaffeggiando le cose senza avere idea di come dovrebbe essere il risultato finale. L'aggiunta di singoli elementi grafici pezzo per pezzo mentre procedi senza una panoramica della composizione completa è in contrasto con le buone pratiche di progettazione. Un disegno è completo quando hai finito le cose da rimuovere, non quando hai finito le cose da aggiungere.

Infine, ci vuole molto più tempo per apportare modifiche alla progettazione nel codice di quanto non faccia per modificare un'immagine di mockup. Ecco perché dovresti sempre pianificare il tuo progetto in mockup prima di impegnarti nel codice. Sia che tu usi un programma di grafica vettoriale come Fireworks o Illustrator o un programma raster come Photoshop dipende da te. Ma dovresti sempre elaborare il tuo progetto in un editor grafico prima di iniziare a codificarlo.

— Calvin Huang
fonte
2
Non penso che siamo in disaccordo. Sono completamente d'accordo con te in base alla variabile "web designer esperto". Il problema è che le persone incaricate dei prototipi di PSD spesso non hanno esperienza con i web designer e questo provoca ogni sorta di mal di testa man mano che il progetto avanza. Per quanto riguarda un "modello dell'intero layout", sono anche d'accordo. Non direi che dovrebbe sempre essere o avere sempre bisogno di essere un file PSD ad alta fedeltà. I wireframe sono spesso sufficienti.
— DA01,
3
Non sarò d'accordo con il tuo ultimo paragrafo, però. È necessario entrare nel codice per progettare completamente l'esperienza dell'utente. E, il più delle volte, questo è un elemento chiave del processo di progettazione e in realtà abbastanza facile apportare modifiche a quel punto nell'ambiente adeguato (l'agile è un buon punto di partenza).
— DA01,
Rispetterei entrambe le tue opinioni, e probabilmente dipende anche dai progetti. Riesco a capire entrambi i punti, anche se devo dire che non sono abbastanza paziente o mi sento perso nei dettagli se disegno prima l'intera pagina in PS. Inoltre, i disegni nei CSS sembrano diversi da quelli di PS. Inoltre ho scoperto che se ti abitui alla programmazione, almeno per me sono più veloce che cambiarlo in PS. E, ultimo ma non meno importante, le cose possono cambiare (anche dopo aver attentamente pianificato ogni dettaglio), e durante la programmazione trovo ancora spesso sfide nella progettazione (da CSS, ecc.) E dovrei cambiare - in PS questo è raramente il caso .. .
— Chris
1

Ecco un buon post che spiega questo in modo divertente :) http://www.gomediazine.com/tutorials/photoshop-vs-illustrator-part-1/

ecco una spiegazione migliore da una fonte molto affidabile "http://99designs.com/help/whats-the-difference-b Between-photoshop-and-illustrator"

"In definitiva, la decisione di quale strumento usare dovrebbe essere prescritta dal titolare del concorso, ma in generale Illustrator dovrebbe essere usato per loghi e lavori di stampa, mentre Photoshop dovrebbe essere usato per il web design e qualsiasi disegno che può essere visto solo su un computer schermo."

— Ved
fonte
4
99designs non è una fonte affidabile di nulla.
— DA01,
C'è qualche motivo particolare per dirlo? Solo per chiarimenti, non lavoro con loro né sono legato a loro in alcun modo, tuttavia in passato ho trovato i loro articoli e blog molto utili. Sono stati anche riconosciuti da molti nomi di grandi media come msnbc, new york times ecc .... quindi mi sto perdendo qualcosa qui? Si prega di condividere.
— Ved
2
E solo per dimostrare il mio punto Stack over flow Il logo è stato progettato su 99 Designs 99designs.com/users/245023
— Ved
2
@ DA01: spiega sempre perché qualcosa non è affidabile, altrimenti non c'è nulla di costruttivo nel tuo commento.
— Littlemad,
1
Il concorso di design tramite crowdsourcing non è mai positivo per me e non dovrebbe essere promosso da designer professionisti. (Inoltre, è leggermente illegale nel mio paese: D)
— Shikiryu,
1

Se hai bisogno di "tagliare" puoi usare direttamente Photoshop senza andare su Dreamweaver.

Ci sono 2 modi per dividere in Photoshop, automaticamente e manualmente selezionando la parte della grafica di cui hai bisogno e salvandola per il web, un pezzo alla volta.

Ogni volta che "dividi automaticamente" con la generazione di HTML decidi di perdere il controllo del codice. All'inizio della tua carriera va bene, stai imparando, ma arriverà un punto in cui devi conoscere il codice, perché per l'ottimizzazione è meglio scrivere a mano su un editor di testo avanzato (ad esempio il software Ultraedit) che fa il tuo proprio html e css.

L'unico momento in cui trovo più utile lo slicing automatico è quando devo generare il codice della tabella durante la progettazione per le e-mail.

— Littlemad
fonte
0

Photoshop da immagine pronta. cioè riguarda il contenuto del sito. Il cliente non sta pagando per il miglioramento del portafoglio. KL

— Ken Lax
fonte
2
Benvenuti in GD. Penso di capire cosa stai ottenendo, ma puoi approfondire un po 'per favore?
— Farray,
0

È abbastanza ovvio che dovresti usare Photoshop per modelli di web design completi.

I disegni di Illustrator tendono ancora a essere elaborati più lentamente rispetto ai disegni di Photoshop.

Se stai progettando icone ed elementi web, suggerirei di progettare in Illustrator e quindi posizionare tali elementi in Photoshop.

Se si creano modelli in Photoshop, è possibile trasferire facilmente quei documenti su Fireworks per la prototipazione rapida.

— Marsman
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.