Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Henry Morrow
Henry Morrow
19,425 Points

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

edeharrison
seal-mask
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points
edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

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

Henry Morrow
Henry Morrow
19,425 Points

Thanks I will start there!

christopher walsh
christopher walsh
7,272 Points
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.

james white
james white
78,399 Points
james white
james white
78,399 Points

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