Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Practice making sites from Photoshop docs

Is there a service around that will help you by giving you sample photoshop documents to make websites from? I notice that is a key component for front end developers and though I have been practicing making sites from what I see on the web, I thought it would help me learn photoshop more if there was a way I could practice making a site from a PSD.

3 Answers

Hi Henry,

I suppose you could download free PSD website templates and work from them. Something like from http://freebiesbug.com/psd-freebies/website-template/.

All the best,

Ede

Thanks I will start there!

christopher walsh
christopher walsh
7,272 Points

theres lots of free psd, with a quick google search. The best tool I think, for turning psd's into code is brackets from Adobe. the brackets text editor uploads your psd so you can extract css.

Hi Henry,

Want to know the "old school" method of converting Photoshop PSD file "mockups" and "wireframes" to an actual site?


Did you know...

There is another application besides Adobe Photoshop that can directly read/open .psd files (with layers intact).

The desktop application with that unique capability was/is called: "Fireworks".

It used to be owned by a company called Macromedia, but Adobe bought them in the mid-2000.

I think for a while it used to be part of the Adobe Creative Suite (CS3 onward),

but it was never "pushed" by Adobe (who, I believe only bought Macromedia to get Dreamweaver).


I still have an old Macromedia MX copy of Fireworks and

you could open the psd file, use the slice tool to marquee select (mouse rubberband drag shape)

the needed divs or tables (took about 5 minutes at most).

Then it would output the html and image files organized in an folder ready to be uploaded live to a website.

.

Of course most people loaded the html file output from Fireworks into Dreamweaver

where they tweaked the CSS before using the Dreamweaver site manager

(instead of an FTP program like Filezilla) for ftp uploading.


You might even be able to find an old "abandon-ware" version of Fireworks MX 2004 online if you look around:

http://www.oldversion.com/windows/download/macromedia-fireworks-mx-2004