Going from a PSD to Dynamik for Genesis (aff link) is much like when you’re creating any website from a photoshop file, although with Dynamik, the job is a little easier because the formatting is point and click.
In order to go from a PSD to Dynamik, you’ll need some basic php and css skills, but it’s not extremely overwhelming if you have the patience and can actually be pretty fun! In order to follow the tutorial, you’ll need the following:
Ready? Let’s get started!
Finding a PSD
You’ll need to start with a PSD file, an Adobe Photoshop file. You can either design one yourself or find a PSD file of a design you like on the internet. For this Dynamik tutorial, I found a PSD photoshop file from PSD Style called Candilicious.
In looking at it, for the sake of the tutorial and to make things a little more simple, our finished design will be a little different in the following ways:
- The template looks like it was made to be an e-commerce site. Since this is a tutorial on PSD to Dynamik, we’ll leave the ‘Check order’ and ‘Shop Now’ links at the top off. We’ll use our primary nav there and include a search box. I don’t want to use a standard search box, so we’ll find a search box that we do like and use that instead (i’ll be using one I found on Premium Pixels)
- We’ll adjust the slideshow and make it more simple by leaving out the ‘Learn more’ banner and changing the previous and next navigation buttons on it
- We’ll leave out the icons in what will be the 3 widget areas at the bottom of the site
- We’ll change the footer by removing the menu and using the standard Dynamik footer area text
Our end result will look like the image on the left.
Slicing your PSD
When beginning your project with a PSD to design any website, but especially and more specifically Dynamik for Genesis, I like to slice up my PSD file before I start any editing or coding. After doing this for some time and working on a variety of projects, you’ll start to recognize what images you’ll need from your PSD to create your design. For this PSD to Dynamik project in particular, we will need to slice up our PSD in Photoshop to get the following images:
- The top banner where are primary navigation and search box will go
- Slice up the search box we got from Premium Pixels
- The background where you see the logo and slider area
- The background for our slider which has the candy and chocolate
- We’ll grab the logo from the PSD
- Pink background for the featured area
- There’s a bit of a shadow at the top of the widget area, so we’ll grab the brownish background for what will become our EZ-Widget area
- The ribbon for our widget titles in the EZ-Widget area
- The background for the footer since there’s a gradient there
If you work on a Mac and you plan on going from PSD to Dynamik often, I recommend you check out a program called Slicy. Slicing can be a real pain and this program makes it much easier! Don’t want to slice it, not a problem. I already did the work so why not share it, right? Download the slices used for this tutorial.
In the next post in this series, we’ll get into the Dynamik for Genesis and start creating our site!
Do you have any questions or comments on PSD to Dynamik for Genesis? Do you have any experience or anything you’d like to share? Please leave a comment below.