Hello All,
does anyone have a process for converting PSD files to a RW design that they’d care to share? For the first time ever, I need to recreate a design that was done by another designer who will be providing PSD files and I have no idea where to start.
Any suggestions would be appreciated!
Beem
Yes Steve, that is exactly what I meant. I’m looking for the workflow or process to go from PSD to a RW file.
No Steve, there is a process for using the images provided in PSD in an HTML/CSS or RW file apparently, rather than simply building the site from scratch and that is what my question refers to.
No worries, thanks for weighing in though.
I don’t think there has ever been a way to display PSD files on the web. There have been ways to design web pages as PSDs and then convert them but that has had its day. See http://blog.teamtreehouse.com/psd-to-html-is-dead. PSD files tend to be enormous, so even if you could display them directly on a web page, it wouldn’t be a good idea.
Thanks Peter, looks like it will be a redesign in RW after all, then.
Assuming you have PhotoShop just open and save the images in the format and quality you want. My copy of PSD has pre-defines for web images but you can save however you want. Once you have the images use them in RW as you would any other image. If you don’t have Photoshop then they will have to save in the format you want and send that format to you.
Thanks for the response, Greg, appreciate it.
Hey @Beemerang, reading through this thread I think the only way will be to create the site from scratch in RapidWeaver.
You have a PSD file with a nice looking site-layout, ok. But RapidWeaver relies on premade themes (templates) to work with and so you would have to look for a theme which matches the layout of your psd-file. Since you unlikely will find such a theme, the best way would be to choose one of the freeform-layout themes available for RapidWeaver, for example “Foundation” from Joe Workman, “Foundry” from elixir graphics for “UIkit” from WeaversKingdom:
http://foundry.elixirgraphics.com
With these “themes” you can build your own layouts (in most cases very close to the one that you need) and don’t depend on the layout of some premade theme. By the way: you absolutely need the Stacks plugin from YourHead to use these solutions.
Then you can export the parts of your psd-layout which you need for your site (backgrounds and other graphics) and or pick the color values from the psd and use them with the Foundation/Foundry/Uikit stacks to build a site that comes as near as possible to your psd-layout. That said, there is definitely no way to “convert” or export a psd-file to be automatically used as a theme in RapidWeaver. There will always be a lot of manual work to get the look that you achieve. But the way I described is the best to achieve a similar result as in some psd-layout…
Thanks for the detailed reply, Matthias, much appreciated.
I’ve found an video “How to Rapidweaver - Turning a Layered PSD File into a Rapidweaver Website” on YouTube. Maybe it’s worth having a look into it.
@Beemerang - great question! I know a lot of theme designers that mockup the their designs in Photoshop (or similar) then convert it into a working theme that we all get to enjoy! I’m not sure of their workflow, but I would recommend creating your design as an actual theme so it’s not project specific and it’s more portable.
I do know the process is pretty intense. There are a few apps (I’m drawing a blank here…) that allow you to copy PSD as HTML/CSS that you can put into a web design environment.
This process is a tad outdated now with all the different device sizes (what not).
For budget + time constraints, I would recommend using one of the awesome framework themes out there (as mentioned by @RapidBase earlier).
Maybe the article on this page http://www.webdesigndev.com/hyperlink-photoshop/ is useful for you