After we’ve gotten all of the files ready that we’ll need for our PSD to Genesis project ready, it’s time to start working on what will become a pretty cool WordPress theme! If you need a refresher, go back and look at the first part of the series.
It’s best to have some content for your site going in. If you’d like to use the dummy content I created for the PSD to Dynamik tutorial, you can download the xml for your importing pleasure by clicking here. You’ll have to unzip it, but I’m sure you know the drill!
The first step in developing a WordPress theme using Dynamik for Genesis is uploading all of your images into Dynamik. This will save you tons of time later on because you can just select what images you want for different options while you’re styling your site.
Deciding on whether you want to make your site responsive or not is something you should give some thought to, preferably before you get too far into the design. Having a responsive theme means that when it will look good on all your desktop, laptop, tablet and smart phone because the site adjusts itself to fit on different screen sizes. If you decide to go with responsive, it means you’ll have to take a few more things into consideration, but well worth it for your end result.
The next step is uploading all of the images that you’ll be needing to create your new theme. Upload them to your site by going to Genesis > Dynamik Design > Images. Having all of the images uploaded will save you some back and forth later.
Fonts and body colors
Now we can get into the designing of our theme. We start off by setting up your fonts. Dynamik for Genesis comes with a ton of Google fonts already installed and ready for use. For the PSD to Dynamik tutorial, we’ll be using a font called Lobster. The color that I’ll be using for the heading fonts is #94674E and the content colors will be #643827. Our links will be a red color that is #E20711.
The body background color is the color which will display before the header, after the footer or on the sides of the website if it’s not full width. I used the eyedropper tool in Photoshop to pick the very bottom color in the footer which was #FFCDCD.
We set the wrap background, or the background of all of our content that starts with our header and finished with the footer, to a horizontal and vertical repeat, with no color and used the image called ‘header-slider-bg.png’. The inner background will be set to transparent and get rid of the wrap box shadow and set the design to fluid.
You can look at the picture of the site structure preview in Dynamik and see that setting the wrap structure to fluid will stretch our header and footer across our screens. This setting is based on what you want your design to look like, so set accordingly.
Adjusting our header
Since we’ll be using a logo for this tutorial, we don’t have to worry about the fonts, sizes or colors. We still need to change the background and we’ll be using one of the sliced up images from the PSD called ‘header-sidebar-bg.png’ while setting it to horizontal and vertical repeat.
Adding a logo to your website using Dynamik for Genesis is an easy proposition. We go to the header menu in Dynamik Design and select our logo image. If you were to refresh at this point, you wouldn’t see anything! No, you haven’t done anything wrong, you just have to tell Genesis that you’d like to use the logo instead of regular text. There’s a link right above where you chose your logo image that will take you to the spot in the Genesis settings where you can select the usage of a logo image instead of dynamic text.
You’ll want to go into the header dimensions and figure out how much space you’d like to leave for the logo and widget area in the header. If I’m using a logo, I try to make the ‘Header Title Area Width’ about the same width as the logo and give the widget area some extra space. In our case, our logo is almost 220px wide, so I used that for the title area and gave the extra pixels to the ‘Header Widget Width’, which ended up being 680px.
Since the ‘Header Widget Padding’ settings are in this same menu and we know we’ll be using a navigation menu, we can set the padding now. We’ll make the top padding 40px and leave the bottom at 0.
Our design is looking really good so far! In the next article, we’ll embark on styling our navigation menus.
Do you have any questions on the PSD to Dynamik for Genesis tutorial so far? Any ideas or suggestions? I’d love to hear from you! Please leave a comment below and let’s get a discussion going.