Caputo's blog

Informatica, tecnologia, programmazione, fai da te, papercraft e papertoy

Tutorial per convertire file psd in html e CSS

maggio 2nd, 2009 by Giovanni Caputo

1.  The Design Lab: PSD Conversion

2. From PSD to HTML, Building a Set of Website Designs Step by Step

3.  Coding: Design Lab TV Styled Layout

4. PSD to CSS/HTML in Easy Steps – Part 1

5. Slice and Dice that PSD

6.  Converting a Photoshop Mockup: Part Two, Episode One

7.  Build a Sleek Portfolio Site from Scratch

8. Portfolio Layout – Learn To Code It

9. Converting a Design From PSD to HTML

10.  How to Convert a PSD to XHTML

11. How to Convert PSd to Html

12.  Creating a CSS Layout from scratch

13. PSD > HTML/CSS

14. Encoding a Photoshop Mockup into XHTML & CSS

15.  Css Template Tutorial

16. Portfolio Layout 4: The Code

17. Tutorial Coding a Layout

18.  Converting a Photoshop Mockup

19.  Killer site – From Illustrator to Xhtm to Drubal

20.  From PSD to HTML

21.  Coding a Car Sales Layout

Read the rest of this entry »

Category: Programmazione, Siti Web | No Comments »

Tutorial per convertire PSD in HTML

marzo 30th, 2009 by Giovanni Caputo

Per tutti i web designer una lista di tantissimi tutorial per convertire file PSD in HTML.

1. From PSD to XHTML Tutorial

conversation-psd-to-xhtml-tutorial-css

2. How To Create a Horizontally Scrolling Site

horizontally-scrolling-site

3. From PSD to HTML, Building a Set of Website Designs Step by Step

creatif-nettuts-from-psd-to-xhtml

4. Subcide: Creating a CSS layout from scratch

subcide-web-layout-tutorial

5. Build a Sleek Portfolio Site from Scratch – PSD+XHTML Tutorial

psd-vs-net-tutorial-convert

6. From PSD to CSS HTML in 4 easy tutorials

sanke-photograph-css-tutorial

7. Create a Killer Band Site with Drupal: A 6-part Tutorial Series

Read Part 1 – Design it Illustrator
Read Part 2 – Slicing it Illustrator
Read Part 3 – XHTML
Read Part 4 – Theming in Drupal
Read Part 5 -Drupal Admin
Read Part 6 -Wrap Up and Additional Resources

band-site-and-drupal-tutorial

8. How to make sexy buttons with CSS

how-to-make-sexy-button

9. Horizontal Menus That Grow on You

In this quick tutorial, I’m going to discuss how to create a neat little menu effect. I’m dubbing it the liDock, because elements in the menu resize as the mouse moves over them, similar to the dock on OS-X, and because it’s a list menu.

css-menu-growing-dock

10. CSS Template Tutorial

free-css-tutorial

11. CSS Gradient Text Effect Tutorial

css-gradient-text-effect

12. How to: CSS Large Background

large-background-css

13. Converting a Design From PSD to HTML

your-logo-psd-to-xhtml

14. Slice and Dice that PSD

paper-business-psd-to-xhtml

15. Blurry Background Effect

blurry-background-effect

16. Using CSS Sprites Tutorial

using-css-sprites

17. Hand-Drawn CSS Navigation

hand-drawn-css-navigation

18. Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table

dinamically-highlighted-columns

19. CSS Menu Tutorial

n-design-cssmenu

20. Photoshop tutorial+ slicing part + coding css

This tutorial will show You how to make clean, nice vertical menu using Adobe Photoshop.

css-menu-blue

21. Slice a Template and Code it Using CSS

slice-a-template-and-code-it-using-css

22. Coding Your 1st PSD Tutorial

code-psd-tutorial

23. Making Simple Work of Complex CSS Layouts

generico

24. Making Your Footer stay put with CSS

sticky-footers

25. How to Convert a PSD to XHTML – Video Screencast

some-event-convert-psd-to-xhtml

26. Advanced CSS navigation

advanced-css-navigation

27. Tutorial: Coding A Layout

tutorial-coding-a-layout

28. Invasion of the Body Switchers – Learn how to switch styles

invasion-to-body-switchers

29. Float Tutorials – Step by Step

float-tutorial

30. CSS Slicing Guide: Picking The Right Layout

css-slicing-guide

31. Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous

accordion-tutorial

32. CSS Sprites + Rounded corners

rounded-box

33. 3 Simple Steps in Coding a Rounded Corners Layout

css-globe-3simple-steps-code-rounded

34. Style master CSS tutorial

lorem-ipsum-inc

35. Converting a Photoshop Mockup: Part Two, Episode One

some-website-tutorial

36. CSS Vertical Navigation with Teaser

vertical-navigation-tutorial-teaser

37. Fixed Footer Backgrounds with CSS

footer-background-that-work-tutorial

38. A simple introduction to 3 column layouts

3-column-layouts

39. Two column CSS layout

2-column-layout

40. CSS Layout Technique – Achieving 100% Height

css-layout-tehnique-100-percent-height

41. Vertical CSS menu with a ‘behavior’ file

vertical-css-menu

42. Sleek Design Code – HTML

sleek-shiny-design-tutorial

43. Breaking Out of the Box With CSS Layouts

Al seguente sito potete trovare inoltre altri 60 tutorial per realizzare Layout

60 Layout design tutorials

oppure potete visitare il seguente link per un ultimo tutorial:

http://www.webdesign.org/web/html-and-css/tutorials/portfolio-layout-10-learn-to-code-it.17281.html

Category: Novità, Siti Web, Tecnologia | 1 Comment »

Template gratuiti PSD

gennaio 14th, 2009 by Giovanni Caputo

Di seguito una serie di template gratutiti in fomato PSD per permettere una veloce realizzazione di :

biglietti da visita, carte di credito, icone,  documenti, note adesive e copertine dvd.

Windows 7 Box .PSD Icon by giannisgx89

windows-7-icon

download10

iMac Icon by bobbyperux

imac

download10

Credit Card Icon by sniffels

Credit_Card

download10

Complementary Colour Swatches by digitalphenom

colour-swatches

download10

Customizable Folders by bobbyperux

customizable-folders

download10

Basic Button Collection by Rmit

button-collection

download10

Documents And Letters by Adam Woodhouse

documents-letters

download10

Post It! by verbaska

Post_it_

download10

Free Post It Notes by bobbyperux

Free_Post_it_Notes

download10

Free Button Pack by celerayted

Free_Button_Pack

download10

DVD Label by

DVD_Label

download10

DVD Case Inlay by 2n2

DVD_Case_Inlay

download10

DVD Plastic Case by manicho

dvd_Plastic_Case

download10

DVD Case Template Mockup by manicho

DVD_Case_Art_

download10

Jewel Case Vector Based PSD by lemarquis

JEWEL_CASE

download10

Cassete by manicho

Cassette

download10

T-shirt Vector Template by gopurifyyourself

TShirt_vector_template

download10

Notebook PSD by tlmedia

notebook_psd

download10

350dpi Business Card Template by eikonstock

350dpi_Business_Card_Template

download10

Deviant ID Card Template by deviantdark

deviant-id-card

download10

Old School Sloppy Border by eikonstock

Old_School_Sloppy_Border

download10

Pixel Arrow Pack by sizer92

Pixel_Arrows_Pack_01

download10

Big Stamp Template by jablonka89

stamp

download10

Stock Pack Presentation Template by mouritsada-stock

Stock-Package-Design

download10

PSDFreebie

This site is pretty serious offering new PSD files regularly like banners, wallpapers, layouts, icons and more. Worth Checking Out.

psdfreebie

Magazine template 2500px by kadox

magazine_template_psd_2500px

download10

Reflection Icon Template by styrizo

Reflections_Master

download10

Free Film Frame by bobbyperux

Free_Film_Frame

download10

Skateboard template by nunosk8

skateboard-template

download10

Under Construction Sign by creamania

UNDER_CONSTRUCTION

download10

Photoshop 3D Cube by thedevstudio

Photoshop_3D_Cube

download10

Golden Frames by ro-stock

Golden_Frames

download10

CoverSutra Snapshot Sleeve by turnpaper

Coversutra_snapshot_sleeve

download10

Magnifa Pro by jean31

Magnifa_Pro

download10

Subscribe Badges + Tutorial

subscribe-badges

download10

Framed Wallpaper Resource by stratification

Framed_Wallpaper_Resource

download10

WWE 2007 DVD Cover Template by alan880

Template is very good with guidelines, fully layered PSD file.

WWE_2007_DVD_Cover_Template

download10

Film Strip by uneekresources

Film_Strip

download10

Snowboard Deck Template by nunosk8

snowboard_deck_template

download10

3D Box Template by fox82

Handy Photoshop template using smart objects, to let You easy replace graphics on sides to Yours.

3dbox_up

download10

Old Folder by pullus

Old_folder

download10

Stamp Sheet Template by e-derby

Stamp_Sheet_Template

download10

Newspaper Template by wildsway18

Newspaper_template

download10

Mail PSD With Editable Text by chekkz

Mail_PSD_With_Editable_Text

download10

Moleskine by dennern

moleskine

download10

Read the rest of this entry »

Category: Arte, Novità, Open Source | 3 Comments »

Convertire PSD to XHTML

novembre 6th, 2008 by Giovanni Caputo

The PSDEcco il link tutorial per convertire un file psd, realizzato in photoshop, in HTML.

TUTORIAL

Il tutorial è provvisto di video ed è reso disponibile da nettuts.com.

Category: programmi, Siti Web, Tecnologia, tutorial | 1 Comment »

Creare Layout CSS: i migliori tutorial per convertire da PSD ad HTML

settembre 13th, 2008 by Giovanni Caputo

The Lessons of CSS Frameworks

1- CSS Template Tutorials – Setting Up –  La prima parte di un tutorial completo per relizzare un template in photoshop e convertirlo in un layout CSS.

2-From PSD to CSS/HTML in Easy Steps – Part 1 - La prima di 4 parti per convertire un file psd in un completo template css.

3- Site in an hour

4- Slice and code a layout tutorial

5- Advanced CSS Layouts: Step by Step

6- Slice a Template and Code it Using CSS

7- Converting Photoshop Web Template File To HTML/XHTML/CSS Web Page File Video Tutorial

8- CSS Template Layout – parte 1 di3 

9- Designing a CSS based template

10- Creating CSS Layouts In Dreamweaver, Part 1

11- From PSD to HTML, Building a Set of Website Designs Step by Step

12- Creating a CSS layout from scratch 

13- Coding Your 1st PSD Tutorial

14- Breaking Out of the Box With CSS Layouts

 

15- Page Layout from HtmlDog

16- 3 Column All CSS Layout With Fluid Center and Two Columns 

17- Liquid CSS Layouts – Design Alternative to Table Based Websites

 

18- Rock-solid CSS Layouts 

19- Building a page template in CSS 

20- Two column layout using CSS and divider image

Category: Programmazione, Siti Web, tutorial, video | No Comments »

Convertire online psd in css

agosto 12th, 2008 by Giovanni Caputo

Flow GraphicPSD2CSS è un servizio online che permette di convertire file PSD creati con Photoshop in fogli di stile CSS.

Dopo aver effettuato la registrazione sul sito di PSD2CSS caricate il file .psd e infine scaricare il codice del vostro lavoro che come per magia si è trasformato in un foglio di stile.

Category: Siti Web, Tecnologia | No Comments »

Da psd ad html: realizzare siti web step-by-step

giugno 19th, 2008 by Giovanni Caputo

Volevo segnalare a tutti i web master una guida per poter realizzare siti web partendo da file di photoshop ed ottenere file HTML.

In particolare nel tutoria saranno realizzati 4 siti web da 4 mockups che possono eventualmente diventare temi per wordpress.

LINK

Category: Siti Web, tutorial | 3 Comments »

Convertire psd(o altra immagine) in css e div HTML

maggio 2nd, 2008 by Giovanni Caputo

Come webdesigner stai lavorando con Photoshop e ora volete convertire il vostro file PSD ( jpg, png o qualunque altro formato che photoshop è in grado di leggere) in un CSS valido  e in un documento (X) HTML.

Se utilizzate la normale procedura andando da file/ salva per il web, tutto viene convertito in immagine ma la cosa peggiore è che viene generata la pagina attraverso tabelle annidate. Chi ha esperienze con le tabelle in html, sa benissimo quali sono i problemi a cui si va incontro, per esempio, basta una piccola modifica al testo inserito all’interno di una cella per poi non riuscire più a trovare una giusta configurazione.

Esiste anche una modalità che permette invece di trasformare tutto in div.

Per prima cosa aprite il file con photoshop e modificatelo con Image ready andando dal menu file/edit in imge Ready.

Successivamente tagliate il vostro documento usando la strument “slice”, questo vi permetterà di definire tutte le diverse parti della vostra pagina web (per esempio, l’intestazione, il menu ecc) ottenedno, quindi, numerose linee e quadrati blu numerati.

Ora è necessario i parametri di output:andare nel menu file/ output setting e selezionare i seguenti parametri:

preset: custom

slice output: generate CSS, refercenced: by ID

Ora che abbiamo definito le opzioni di output cliccare su OK. (questo convalida le impostazioni, ma non creare il file ancora). Quindi è necessario salvare il risultato, utilizzando il comando “Salva ottimizzato” (all’interno del menu File).

In questo modo Imageready avrà creato la cartella “immagini” contenente tutte le immagini a tagliate precedentemente e un file HTML contenente che è nel codice sorgente del codice CSS.

Se volete vedere, copiare, modificare i css o il codice sorgente è sufficiente aprire il file nel vostro browser preferito e visualizzare il codice sorgente.

Naturalmente si potrebbe aver bisogno di modificarlo e ottimizzare alcune o parte di essa.

Se conoscete altri meccanismi, altri metodi o trovate dei difetti in questo metodo fatemi sapere.

Category: Siti Web, tutorial | 2 Comments »