EMG

Advice and tutorials on utilizing Photoshop to do design mock-ups and graphic design and the like depends on which angle you are coming in from.

Are you the ‘do the Photoshop first and code later’ person or are you a ‘code first, prettify later’ person?

I came into WP as a front-end web developer (who didn’t do much php… yet) and so for myself, I’ve always started at the foundation level of X/HTML and then built up. Code came first and then the skin came last.

I see structure first before I see the ‘prettiness’ and so if I am inspired to try my hand at a particular theme idea, I put together a wireframe idea of what I want to do and then from there, work out the actual design and do the graphic stuff according to how I want things to look like within the foundations of what I’ve built.

My method works for me but I know that a lot of people do just the opposite of what I do.

Instead of framing first, they mock out an entire layout (looks like a screenshot, pretty much) in Photoshop or otherwise and then from there, try and and match it all to code, which I personally find a pain to deal with, especially since I work with table-less designs.

For myself, it is easier to see the code first, understand the code and what it can accommodate and what it cannot and from THERE, break my graphic designing into parts. Backgrounds, icons, buttons, banners, etc.

For example, on my current pet project which I am still working on: https://www.emotiomentalgraffiti.com

I started out with a mishmash of ideas for a theme – post-apocalyptic alleyway grunge meeting high contrast high tech with a dash of rock ‘n’ roll and punk – and built the basic code framework for my layout, first.

After the basic code was implemented, I went to work on a background image and after the background image was finished, I worked on the rest of the major graphical components.

Once the major graphics were in place, I went back and started tweaking and ironing out the details of the coding.

In the case of my theme, doing a full mock up in Photoshop and then converting it all into html and php would have been an idea gone wrong and a big time waster due to the nature of the coding. Doing the design in pieces and parts AFTER the major code framework was in place was, I feel, the smartest thing to do and the biggest time saver.

If you’re fastest and best at doing mockups directly in HTML like I do (setting out the basic framework and the like), I would actually suggest keeping that method and do the Photoshopping later as there are many many designers who aren’t coders who design first and code later and then run into code problems because what they designed is not something easily translated into good code.

Designers aren’t always coders and coders aren’t always designers. I am a bit of both, but like you, I started in the front-end code department first.

As for actual tutorials themselves:

Try googling ‘Making web design mockups in Photoshop’ or something similar.

For myself, if I do actually make a mockup in a graphics editor (I actually don’t use Photoshop), I start by drawing out literal blocks using the shapes tool to set out the basic framework and then add the more complicated stuff in layers.

Do me a favor and take a peek at your Theme Functions file in the Theme Editor?

Besides the lines of code that widgetize your sidebar, do you have any other codes?

You should be able to override the current coding using either one of our suggestions, it would seem.

Since it’s not, it makes me think that there’s another override going on. Perhaps in the Theme Functions?

I’m at a loss if there are no other overrides. *scratches head*

Does changing all of the coding that is relevant to the links change anything at all? Are there any other stylesheets you are able to edit in the Theme Editor?

In the /* POSTS */ section, add these:

Try this for turning your post titles BLACK:

.post h2 {
color: #000000;
}

And try this for turning your UNHOVERED links blue:

.post a {
color: blue;
}

I can tell that you’ve been having fun with theming your own WordPress; good for you! ??

Since you’re asking for constructive crit, I will give you just that. If you have any questions, please feel free to ask. I will try to be as thorough as possible and explain as much of my thoughts as possible, but won’t mind clarifying if there is something I say that you don’t get. ??

So here we go:

Red is a very bold and assertive color that demands people to LOOK. It can be off-putting to some, but it can really make a statement if used properly.

With that said:

I LIKE:

– your banner graphic because it fuses deep reds along with black. Bold. Assertive. A bit of noise. Definitely music-related. The right hand side with the lighter red swirly slashes are slightly distracting from the rest of the graphic and could probably be removed.

– how your pages are all tabbed and easy to access in their own navigational bar. VERY important for accessibility. However, the white ‘current page’ tab is very distracting and takes away from the rest of the nice red and black tabs. I would suggest changing the color of the tab. ??

– how you make the content and the sidebar distinct from one another. The content is given a bold amount of space which is good because that is where you want people’s eyes to go, right? And the sidebar is nice and separate and takes up a good amount of space as well.

– The search at the top of the sidebar is handy for your visitors to have easy-access to scavenging for content.

– how you have the navigation bar at the very bottom which allows access to other parts of your site. It’s good to have a portal from where one can jump to one part of the site to another.

– the little graphical detailing such as the little graphics used in your posts – both the icon-like one in the left hand corner and the one used for your datestamp. It shows you have attention to detail and thought things through for your site. I like. ??

I DON’T LIKE:

– how the main content area is all grey. After all that nice red and black scheme going on, to see such a sharp contrast makes my eyes do a double take. Yes, grey background is easier to read black text from, but it honestly doesn’t match the rest of your theme. Change the color and consider simply using a solid colored background or one with minimal amount of texturing and design. ??

– how there are those lines right between the main content and the sidebar. Distracting, and again, it might not hurt to stick to solid colors or plain patterns. ?? Because, again, red and black are VERY bold and your main graphic is already quite assertive.

– how the content in the sidebar seems to be all mishmashed together. There’s ‘busy/cluttered’ and then there’s… BUSY. Maybe it’s just my browser being silly (Firefox 3.0), but it looks awfully busy in there. Section out your sidebar content a bit more; it will make it much easier for your visitors to read the content and catch up on everything! ??

– how the bottom navigation/portal bar that links to other parts of the website doesn’t have its own nice little background to set it aside from the rest of the layout. Currently, it looks like it’s simply a part of the main content and not its own navigation block.

– the white tab and the random red streaks on the right hand side of the main graphic.

OVERALL:

AWESOME work so far; I’m looking forward to seeing how everything will look like once you are ‘finished’ with this theme. ??

I’m no php junkie so I have no idea if this would work or not, but would it be possible to code an umbrella if-then statement that would allow the code to simply look and then grab the appropriate categories-with-content without messing with category ids or category titles? Some other way of selection perhaps?