Creating a Custom WordPress Theme

By Daryn | Published March 7, 2012

So far, whenever I’ve built a site on WordPress I’ve started by combing through pages and pages of pre-made themes. Generally I pay little attention to any styling, graphics, colors etc. and look for a theme with a good layout to suit my needs. I have a preference for designs with a header, 2-column body – wider column on the left for content and narrower on the right for widgets – and a simple footer at the bottom.

I’ve gotten pretty decent at restyling the themes but there’s always something that I get stuck on. Something I can’t seem to style or work the way I want it to.

So a few months ago I started thinking it was time to figure out how to build a custom theme from scratch. I put it off for weeks until one morning I sat down find this informative article on Lifehacker’s site. The title alone gave me enough motivation to at least take it to the next step. I read the article, downloaded and installed their blank starter template on my website (I already have WordPress installed). It turns out that it requires a little more coding and styling than the article suggests, but it has been a great starting point.

My first goal was to get rid of the name of my site which is defaulted to be displayed in text and instead display my logo. It took a few tries but finally I got it to work by uploading my logo to the images folder within the theme and then adding a DIV within the Header DIV in the header.php file to reference the logo.

My site with this blank theme activated wasn’t displaying the Content (wide left column) DIV and the Primary (right column for widgets) DIV side by side like the Lifehacker pics showed. A little more poking through the style.css document, adding some float:left; tags and I got that working as I wanted it to.

From here I’m going to work on styling the text fonts, sizes and colors, get the main menu to align to the right of the page and figure out how to align the whole site in the center of the browser instead of hugging the left hand side like it’s defaulted to do. Since I’m a graphics guy and not a developer, I’m sure this takes me a lot longer than it could, but I’m learning a lot as I force myself to do it.

My hope is to gain enough of an understanding of how all the files in a WordPress theme work together so that I can develop a fairly standard template of my own to make future WordPress projects easier and faster. My current site displays blog posts with a thumbnail graphic and a small sampling of article text followed by a “Read More” button. I have a feeling figuring out how to do this will present quite a challenge to me but I’m up for it.

 

 

Posted in Featured, Inspiration | Leave a comment

New “Mongrel” Logo for Greenball Tires.

By Daryn | Published November 14, 2011

I have a client in the ATV tire industry that has a unique branding approach of putting cool cartoonish logo’s of each of their tires on the sidewall. I’ve done a few logos for them in the past and recently I was asked to come up with a fun logo for a new line of off-road/on-road hybrid tires called “Mongrel”.

My approach was to make the dog look tough, but not necessarily overtly mean.

I just submitted this to the client this morning for review so we’ll see if he would like to see any changes.

Update (11/17/2011): Here is the final version, the only changes the client requested were to add spikes to the collar and commented that the bone looked too pristine. Since these logos are reproduced in rubber and adhered to the tire’s sidewall, I decided that it was best to remove the gradient from the text.

Posted in Featured, Logos | Leave a comment

Review of Balsamiq Wireframing Tool

By Daryn | Published August 25, 2011

Often times I’m required to wire-frame concept screens for clients or focus groups, in the past I would always turn to Adobe Illustrator. The first screen would take a little while, I’d usually start with a simple layout of shapes and then sample their color scheme, drop in their logo and go from there. On subsequent screens things would go much quicker as I could copy & paste elements that repeated.

But there was always one big issue. Almost every time, people reviewing the screens would get caught up on the look of these concepts and it was never easy to remind them that we weren’t looking at these screens to get an idea of how the final piece of software was going to look but as a concept of the workflow.

Since this approach made changes difficult on both ends it was time to search for another way. We also needed a method that allowed analysts to make changes and Illustrator definitely didn’t fit for that need. After reviewing a few trials of prototyping applications I finally settled on Balsamiq. It’s not perfect and there are a few issues I have with it but for the price and ease of use it stood out to me.

The beauty of Balsamiq is the hand-drawn look similar to what you might see if these were mocked up on a whiteboard. This definitely keeps people from assuming they’re looking at the final product and keeps the focus on elements and placement.

Balsamiq allows you to link screens together to show workflow and export to an interactive PDF. UI elements can be taken from a built in library and there are also commuity generated components which I have yet to have a need for so I can’t comment on them.

I find Balsamiq is great for showing what is possible for the final product without the issue of people getting caught up on a look and feel that isn’t necessarily what the final will look like.

A few problems I have with it are:

1) Large projects can quickly get complicated to edit. If I need to change the name on a button in a screen that appears in a few different variations, I need to go through one by one and change it. One work around I’ve found is to group all the elements in the first screen and if a change needs to be made I can change it once and then copy & paste the whole group when I need to. This works, but it’s still a pain, if Balsamiq supported masters or backgrounds this may no longer be an issue.

2) I wish Balsamiq supported layers. In Illustrator if I wanted to show a pop-up over a screen I could just create a layer for the pop-up and leave the main screen on the layer below it. It’s also nice if you want to show a drop down menu in various states to just put it on another layer instead of having to show this in two separate screens.

3) Each screen saves as a separate file which adds to possible confusion when your project folder eventually looks like this:

You can have multiple screens open in the interface and easily switch between them with tabs,

Overall though, I think Balsamiq is a great tool for rapid wire framing that allows everyone to forget about what the project might look like and allows them to focus on how it will work and somehow it’s very *fun* to use. For smaller projects I recommend checking it out.

Posted in Featured, Review | Tagged , , , | 2 Comments

Expanding a photo with Photoshop

By Daryn | Published August 18, 2011

I’m currently working on a project where I want to use a grayscale photo of a keyboard as a screened background image. This background will be used on various large scale banners and poster at an upcoming trade show.

The image I’m starting out with only really shows one key and I want to “zoom out” a bit more to expose more of the keyboard.

I’m going to start by opening my stock photo in Photoshop. Since my photo is defaulted to a “Background” in my layers palette, I need to first make it a normal layer by right clicking the background layer and selecting “Layer From Background” from the menu.

Now my stock photo is on it’s own layer, but I still want to have a background to use for editing purposes (more on that later) so I’m going to add a layer and name it “BG”.

I want my finished image to be roughly 2 1/2 times lager on each dimension so my next step is to increase the size of my canvas. By clicking on Image –> Canvas Size (alt+ctrl+C) and I’ll bump the dimensions up as I see fit, in this case I’m checking the bottom right corner as my anchor so that when the canvas grows, my image stays in the bottom right.

Whenever I can, I always like to have my original photo to easily go back to should I make a mistake so I’m going to copy the background layer by right clicking and selecting “Duplicate Layer” or you can drag the layer to the page icon at the bottom of the layers palette.

As you can see I now have one full key with the shopping cart image and 3 parts of other keys next to it. I’m going to start by filling in the key to the left. I begin by making another copy of my original layer. To make all the edges blend easier I’m going to use my eraser with a really fuzzy edge and erase the hard edges of this layer. I usually like to have the center of the brush on the edge, put the opacity at 100% and by using the shift key to constrain my movements to 90 degrees and go over each side.

Next I’m going to set the layers opacity to something like 75% and try to position it so that the key lines up over the next key. The reason I drop the opacity is just so I can see where I’m going. Once it’s lined up I’ll turn it back up to 100%. Now, I don’t really want 2 shopping cart keys so I need to get rid of the one on the new key. There are several ways to do this, but I’m going to use the clone stamp tool. Begin by finding a good area on the key that’s just white and while pressing ALT click the area to sample it. Now use the stamp tool to paint over the shopping cart. I’m doing this on the same layer but you can use a different one if you want. I ended up sampling various places on the key to get my results, your mileage may vary.

Okay now it’s time to fill in the space on that key. I did this by using the lasso and grabbing a similar area on the key to the right of it, pasting it in and then using the eraser to feather out the edges. Different photos will need different techniques.

From there it’s just a matter of using the key you just made to make more keys. I’m going to now make a row of keys in front of the row I just worked on. I’ll make a copy of the layer we were just working on. For this row I’m going to make the keys about 50% larger than the row we just did. Press CTRL+T to transform and hold the shift button as you resize it by dragging out one of the corners. Next I’ll move it down and line it up with the sliver of the key you can see on that row.

Now to do a row above the original row. Same story as above, I’ll make a copy but this time I’m going to transform it and make it smaller and line it up the best I can with the row above. This row required a lot more finesse with the eraser, a brush and the clone stamp. I can’t really tell you how to get things to look realistic, you’ll just have to work on your technique.

From this point it’s just about filling in the blanks. If I have a transparent chunk between parts of the images, I like to use the BG layer discussed above to sample the color next to it and fill it in.

Now that my background image is complete. I plan to use Illustrator to put my banners and posters together.

Posted in Featured, How To | Tagged , , , , , , , | Leave a comment

Submitting Vector artwork to Shutterstock.com

By Daryn | Published July 17, 2011

Awhile back I got really excited about submitting my royalty-free vector illustrations to Shutterstock.com. It’s been awhile since I’ve done anything but I’m finally getting around to submitting some more but since it’s been awhile I’ve forgotten the technical requirements. Looking up the specifics on their site was a bit of a dig so I’m going to post them here for next time and hopefully this will help someone out.

Once your artwork is complete follow these steps. Shutterstock requires both an EPS file and a JPEG preview file.

Step 1

It’s a good idea to not have any art work hanging off the artboard, if you have some that extends, draw a box that matches your artboard, select the box AND the piece that’s extending past it (grouping the piece is a good idea) and then right clicking and selecting MAKE CLIPPING MASK. Do this for any groups of images that extend past the art board.

Step 2

To clean things up, you should get rid of any color swatches you’re not using. Click the drop menu in the Swatches palette and then click “Select All Unused” then click the trash can to get rid of them.

Step 3

Now you want to make sure all your fonts are outlined. This is a simple one. Press CMD + A to select All, then “Create Outlines”.

Step 4

Now you need to save your file as an Illustrator 8 or 10 EPS file to ensure backward compatibility with older versions of Illustrator. File > Save AS  Name it and press “Save” to get the following diaglogue box. Just to be safe I always save as Illustrator 8 and leave the defaulted check boxes as they are.

Step 5

Now you need to make a JPG preview. To do this, I usually open the EPS file up in Photoshop. Hit Image > Image size and then change longest dimension to 500 the other dimension if constrained should follow suit. They like you to keep the preview image close to 500 x 400 pixels. The names for both files should be identical except for the extension. Ex: hardware_black.eps and hardware_black.jpg.

Step 6

Now you’re ready to upload your images. You can use Shutterstocks browser plugin, I prefer to use their FTP. I use the free FTP client called Filezilla (Google it).

Fire up Filezilla and put ftp.shutterstock.com in the ftp host: field.

Login with your email address and password associated with your Shutterstock contributor account and upload your files.

When you’re done, go to  submitted photos to keyword, categorize, upload any necessary releases, and submit the photos for final approval by our staff.

That’s it!

Posted in Featured, How To | Tagged , , , , , , | 1 Comment