All the latest news and announcements, straight from the WooThemes HQ!
Why buy the PSD?
18. Jul, 2009 by Adii Rockstar in Interactive
PSD? Huh?
So we get quite a few e-mails asking us what the value is of buying the Developer Package (which includes the PSD file) over the lower-priced Standard Package. First off, we need to explain what the PSD actually is…
All of our themes are designed in Photoshop, before they are coded into HTML / CSS and then into WordPress. So the PSD we refer to, is that original Photoshop design file, which we used to code the theme you end up buying. That PSD is also still layered, which means that all of the elements within the design are still separated and you are thus able to change those individual design elements much easier.
Now that you know what you may be buying, I guess we need to tell you why you’d want to buy a Package which includes the PSD file. Here’s a few reasons…
- As mentioned above, the layered image file allows you to easily change individual elements within a design. Since we recommend that you customize the heck out of our themes, the PSD will definitely make things easier for you.
- Without the PSD, you’d basically need to first replicate a design element from scratch to tweak a specific part of the design. So whilst we’d back you to have a crack at that, replicating some of the design awesomeness by the best web designers around at the moment, may be a little daunting.
- Lastly… Having the PSD and tapping into that design genius, will most definitely bring your modified WooTheme closer to the greatness that your website deserves. Then why sell yourself short, when the PSD can take your design from above average to awesome?
And that’s the story behind the PSD and our Developer options. So next time when you’re planning to indulge and buy one of our themes, consider going for the Developer + PSD combo instead…
24 Responses to “Why buy the PSD?”
18 July 2009 at 3:41 am #
How do you code the psd into HTML/CSS?
Do you just work on each element referring back to the psd file or is there a quicker way?
18 July 2009 at 3:46 am #
We simply start off with our Woo Framework, and then cut out the image elements we need for the CSS from the PSD file. When I design, I try to have some slices in the PSD file so it’s easier to save every image you need in one batch to jpg/gif/png files.
Coding is done by hand simply by working from top to bottom on the main layout, editing the CSS and template files one by one.
18 July 2009 at 10:03 am #
“All of our themes are designed in Photoshop, before they are coded into HTML / CSS and then into WordPress”
So you code each psd into html/css then convert it to a wordpress theme? Why not just go straight to wordpress?
18 July 2009 at 10:16 am #
WordPress themes are made up of HTML and CSS with the WordPress functions added in later on
18 July 2009 at 10:34 am #
I do this as well – having a working (jquery etc) HTML template gives me a better starting point and (IMO) it’s easier to convert a HTML design to WordPress than PSD to WordPress.
18 July 2009 at 2:30 pm #
We code the PSD into HTML / CSS & basic WordPress in the first go. The basic WordPress we refer to is the functions already within our WooFramework. So any advanced stuff or functionality specific to a theme is only coded after that initial stage.
Generally though it’s much easier to go from PSD to static HTML and then HTML to WP.
18 July 2009 at 10:34 am #
I see why many people don’t buy these sets: It’s because they don’t want to bother designing themselves.
That’s why your themes are so great, because they don’t need any enhancements.
18 July 2009 at 2:28 pm #
We hear you and whilst we think our own themes are pretty awesome out-of-box; we still think that they should be made unique to your own brand / identity. So it’s not really about designing from scratch, but instead taking our awesomeness and making it your own…
18 July 2009 at 12:00 pm #
what’s the easiest way to export out of the PSD since it’s the whole site? I’m not an export Photoshop exporter.
18 July 2009 at 2:27 pm #
There’s no easy way. Any seasoned designer would tell you that they crop & export individual elements from Photoshop manually, as that delivers the best end-result. There’s no shortcuts.
18 July 2009 at 3:08 pm #
Although that is generally accurate(that there is no shortcuts), it’s not 100% true. There are faster ways to export the design, but it requires the same experience converting that you get from slicing individual elements and coding into XHTML/CSS countless times. So what is 100% true is that there is no shortcut to knowledge, you’ll need it no matter how you go about converting a design into CSS/XHTMl.
That said, let me detail my current speed daemon methods.
1. I name my layers accurately and arrange them properly.
2. Once finished with the design I re-save as a new file.
3. In this new file I begin flattening layers into separate layered elements. Here is where knowledge is very important e.g if you don’t know how to code rounded corners then you won’t know how to split up the elements into layers. I’m careful to name layers so they match their final file names.
4. I use export layers to png to save these layers to
individual files. Later I’ll likely batch process them into other formats and make compression and optimization changes.
What are the benefits over slices ? To numerous to list fully but here are a few big ones.
1. No re-doing slices and re-adjusting slices, which eats up a bunch of time. Need that transparency ? Well, turn off all the layers below slice, and then after you have to slice all the elements that were below.
2. Need a set of elements like everything from the header? Or how about all your icons? Try doing that in one slice in varied circumstances. With a simple script you can export every layer from a group, select header group and bingo done. Or tag your layers with -icon and export all those icons in one shot.
3. Re-exporting a bunch of images after a simple change e.g color scheme. Yep re-do every slice and if you didn’t save those slices using layer comps your going to be re-doing allot.
Sorry Adii, looks like I’m leaving epic comments here now to. Time for char limit? haha
18 July 2009 at 4:46 pm #
Changing the elements is easier said then done. It is a major pain to crop the elements in the exact dimensions you have set to the originals. I wish there was an easier way.
19 July 2009 at 3:38 am #
Well, consider that that’s exactly why web design or development is actually a profession. It’s not necessarily meant to be easy for everyone…
20 July 2009 at 6:18 am #
How are your psd-files structured? Are they containing only the finished files of the theme? Or are all the graphics devided in their original elements? If it is the first, the psd wouldn’t be very interesting. If it is the last, it could indeed save a lot of time to change the layout.
Is it possible to upgrade a normal license to a developer license?
20 July 2009 at 6:33 am #
The files are still layered i.e. not flattened. So they’re in their original, designed state!
And yes, it’s possible to upgrade. Just drop us an e-mail.
23 July 2009 at 12:36 pm #
Out of curiosity, do you design with tools besides PS? I like Fireworks because it seems much easier to do basic tasks but I definitely think PS is so much more powerful, especially when it comes to brushes.
24 July 2009 at 12:17 am #
Nah, as far as I know the whole WooTeam uses Photoshop for design, even though Fireworks is a popular choice amongst some designers. We have however found that all our collaborative designers – for example – also uses Photoshop, so I think it’s a case of Fireworks being a little more entry-level.
24 July 2009 at 9:22 am #
I see. Glad to hear your take on it. Thanks Adii!
20 August 2009 at 8:07 am #
Hi, i was just wondering… seeing as i am a complete noob to this… I am looking into purchasing one of your themes because creating an entire website from scratch is so hectic if u have no background in web design.
My question: Seeing that i am a complete noob to web design and themes, i do have a little experience with PS though… how easy will it be for me to customize my own theme with the PS file? For instance i would probably just want my own logo’s and photo’s etc so could i just replace the layers in the PSD file with my own?
And if say i wanted to change the actual format, ie. adding a new menu bar or moving photo’s around into new positions, would i be able to do this relatively easily? I am quite computer literate but a noob to the web designing/themes part… just a reminder!
Thanks!
20 August 2009 at 11:12 am #
Well, customizing a design has two parts to it: 1) modifying the graphics in PS (which is relatively easy if you know your way around the application) and 2) coding that to CSS and adding it to the theme (which is slightly harder).
20 August 2009 at 11:47 am #
hmmm… slightly harder?? For some reason when u say it, it doesnt sound slightly harder..lol. Yeh, the graphics i should be fine with… but no clue when it comes to CSS… Could you possibly direct me into the right direction of learning the CSS coding with regards to these specific woothemes? Ill def search the net myself but experienced ppl tend to know where the more legit info/tutorials can be found!
Thanks!
20 August 2009 at 12:04 pm #
This is a great place to start: http://net.tutsplus.com/category/tutorials/html-css-techniques/
20 August 2009 at 12:15 pm #
awesome… checking it out right now… thanks!
15 September 2009 at 12:12 am #
I wouldn’t say Fireworks is entry level in any way. After using Photoshop because it was standard and getting really good at it, I was thrust into Fireworks at a new job 4 years ago.
It’s much easier to create great looking websites in half the time. While Photoshop is a fantastic tool for photo manipulation and I regularly use it for this, watching someone do a seemingly simple task in Photoshop is an exercise in extreme patience.
High Five for Fireworks!