Dal Template Photoshop al Codice HTML CSS: Ecco Come Fare

Scritto da fedeweb il 22 ottobre 2009 con 15 Commenti | Pubblicato in Html Css, Photoshop


Ultimamente mi arrivano molte richieste su come passare dal template costruito con Photoshop, Gimp, Fireworks ecc. al codice HTML CSS.

Esistono molti tutorial in italiano e soprattutto in inglese, dove è spiegato in modo esaustivo come eseguire queste operazioni.

Ho voluto stilare una lista per te, cercando di prenderne i migliori. Se manca qualche tutorial, soprattutto in italiano, segnalamelo pure nei commenti ;)

Tutorial in Italiano

1. Tutte Le Fasi di Analisi e Progettazione di Un Sito Web – Your Inspiration Web

psdtohtml09

  1. Come capire le esigenze del cliente al primo incontro?
  2. Come calcolare costi e tempi di consegna di un progetto web evitando di scrivere cifre insensate?
  3. Come evitare futuri ripensamenti da parte del cliente?
  4. Come sviluppare e organizzare la struttura di un sito web?
  5. Come trovare l’ispirazione e disegnare il layout di un sito web?
  6. Come presentare la bozza grafica al cliente?
  7. Come realizzare le pagine interne dopo l’accettazione della bozza?
  8. Come esportare un psd in xhtml e css senza perderci la ragione? (parte1) (parte 2)
  9. Come indicizzare un sito senza essere degli esperti SEO? (parte 1) (parte 2)
  10. Come assicurarsi di non aver commesso errori prima di lanciare il sito online?

2. Da Photoshop al sito XHTML/CSS – HTML.it

psdtohtml03

Da photoshop al codice HTML CSS

Tutorial in Inglese

3. MakingSEO coded, Free CSS Template with PSD-to-HTML tips - PV. M Garage

psdtohtml05

Realizzazione Template Photoshop
Da Photoshop al Codice HTML CSS

4. DesignSchool Coded, Free CSS Template With PSD to HTML Tutorial - P.V.M Garage

psdtohtml02

Da photoshop al codice HTML CSS

5. WaterColored Portfolio Coded, Free CSS Template With PSD to HTML Tutorial- P.V.M Garage

psdtohtml01

Realizzazione Template Photoshop
Da Photoshop al Codice HTML CSS

6. How to Code a Grunge Web Design from Scratch – Six Revisions

psdtohtml04

Realizzazione template photoshop
Da photoshop al codice HTML CSS

7. From PSD to HTML, Building a Set of Website Designs Step by Step – Net Tuts

psdtohtml06

Da Photoshop al codice HTML CSS

8. How to Convert a PSD to XHTML – Net Tuts

psdtohtml07

Da Photoshop al codice HTML CSS (video tutorial)

9. Converting a Photoshop Mockup – CSS Tricks

psdtohtml08

Da Photoshop al codice HTML CSS (video tutorial)

10. Design a Minimal and Modern Portfolio Layout with Photoshop – Six Revisions

psdtohtml10

Realizzazione Template Photoshop
Da photoshop al codice HTML CSS

11. Encoding a Photoshop Mockup into XHTML & CSS – Spoon Graphics

Realizzazione Template Photoshop
Da Photoshop al Codice HTML CSS

12. How to Convert a Photoshop Mockup to XHTML/CSS – Line25

Realizzazione Template Photoshop
Dal Template al Codice HTML CSS

13. Coding a Band Website Created in Photoshop – Six Revisions

Realizzazione Template Photoshop
Dal Template al Codice HTML CSS

14. How to Code up a Web Design from PSD to HTML

Dal template photoshop al codice html css

Realizzazione Template Photoshop
Dal Template al Codice HTML CSS

15. Coding a Clean and Professional Web Design

Dal template photoshop al codice html css

Realizzazione Template Photoshop
Dal Template al Codice HTML CSS

16. Code a Modern Design Studio from PSD to HTML

Dal template photoshop al codice html css

Dal Template al Codice HTML CSS

17. PSD/HTML Conversion: Code a Clean Business Website Design

Da photoshop al codice html css

Template Photoshop
Dal template al codice HTML CSS

18. Design and Code a Slick Website From Scratch

Dal template al codice html css

Template Photoshop
Dal template al codice HTML CSS

19. Designing a highly-professional website, from the sketch to the code

Dal template photoshop al codice html css

Template Photoshop + Codice HTML CSS

20. How to create a professional and clean web layout (with PSD-to-HTML conversion)

Dal template photoshop al codice html css

Template Photoshop + Codice HTML CSS

21. Create a lovely textured web design from Photoshop to HTML/CSS

Dal template photoshop al codice html css

Template Photoshop + Codice HTML CSS

22. PSD to HTML Tutorial: Code a Photoshop File to a Working Website


Realizzazione Template Photoshop
Dal template al codice HTML CSS

Questa lista verrà aggiornata man mano che troverò nuovi tutorial interessanti in giro per il web, quindi ti consiglio di abbonarti gratuitamente ai feed RSS per non perderti neanche un aggiornamento.

Template con navigazione orizzontale animata, realizzato in HTML, CSS e jQuery

437 download

711 download

About fedeweb

Federico Pian è un web designer freelance e insegnante , che ama condividere le proprie conoscenze e rendere tutti partecipi della sua passione. Guarda il suo portfolio e cosa sa fare nei tutorial. Scopri più informazioni su di lui nella pagina mi presento.

15 Commenti

  1. Hai fatto davvero un’ottima raccolta ed un ottimo lavoro, c’è sempre da imparare a guardare come gli altri scrivano CSS e ci sono sempre nuove tecniche che possono sfuggire e che magari si imparano e si dimenticano.

    Complimenti anche da parte di Marco!
    Usefull stuff!

    p.s ti farò sapere se sono capace a rifarli da capo ;)

  2. Bellissimi template, da cui trarrò sicuramente ispirazione.

  3. @Emanuela: si vero, non si smette mai di imparare. Felice di esservi d’aiuto!

    @Ennio: oltre a prendere ispirazione potrai anche imparare nuove tecniche per realizzare template.

    Inoltre la lista non è finita come ho detto nell’articolo..ci saranno aggiunte nelle prossime settimane ;)

  4. sicuramente ottimizzerò la grafica! spero sia oK!

  5. Si se c’è qualche dubbio non esitare a chiedermi nei commenti ;)

  6. Risorse davvero molto interessanti!

  7. Correct production of stomach acid is extremely important to
    the digestion of fibre, fruit, vegetable and protein matter.
    Our joint efforts have successfully provided life cover to people suffering
    from conditions like:. Many people who have IBS try to overlook it, but
    it can’t be ignored for long.

    My webpage – ibs diarrhea diet

  8. Eczema is non-contagious, the infected area turns into inflamed,
    dry and itchy and has a reddish appearance. The drugs used in chemotherapy put stress on the immune system
    and can make the symptoms of shingles more pronounced.

    Lesions in individuals with shingles carry the virus that causes chickenpox.

    Stop by my site – are shingles contagious

  9. It shօuld take approximately one or two class perioԁs.

    The QXL name seems to bе best known in Νorwɑy and Denmark where it is a quitе a popular ecommerce portal.
    And a few weeks from now be making enough money to
    quit your job.

  10. Very nice write-up. I absolutely love this site. Thanks!

    Feel free to visit my page: maryland wedding dj

  11. After I initially commented I seem to have clicked on the -Notify me when new comments are added- checkbox
    and now every time a comment is added I get 4 emails with the same comment.
    Is there a way you can remove me from that service? Many thanks!

    My site: dentist office Miami Beach Florida

  12. Pretty element of content. I just stumbled upon your weblog and
    in accession capital to say that I acquire actually loved account your blog posts.
    Anyway I will be subscribing on your augment and even I success you
    get right of entry to constantly fast.

  13. Thanks for ones marvelous posting! I definitely enjoyed reading it, you will be a
    great author. I will remember to bookmark your blog and definitely
    will come back down the road. I want to encourage that you continue your great work, have
    a nice evening!

  14. Yesterday, while I was at work, my cousin stole my iphone
    and tested to see if it can survive a 25 foot drop, just so she can be a youtube sensation. My iPad is now broken and she has 83 views.

    I know this is totally off topic but I had to share it with someone!

  15. Thus, if customers come to the pools improperly dressed they will be
    turned away. If it is the prominent abdomen, piece opts for a suit to compress this area and if you
    have printed, which are of dark colors. The gorgeous weather lately has set the mood for summer clothing,
    reminding us that truly warm weather is just around the corner.

Trackbacks & Pingbacks

  1. Dal Template Photoshop al Codice HTML CSS: Super Aggiornamento | Fedeweb
  2. Dal Template Photoshop al Codice HTML CSS: 2° Aggiornamento | Fedeweb
  3. 66 Increbili Tutorial Per Realizzare Un Template In Photoshop | Fedeweb
  4. Dal Template Photoshop Al Codice HTML CSS: 4° Aggiornamento | Fedeweb
  5. Da Photoshop al Codice HTML Css: 5° Aggiornamento | Fedeweb
  6. Da Photoshop al Codice HTML CSS – Guida #22 | Fedeweb

Lascia un commento