Watch Me Design a WordPress Theme: Getting Started in Photoshop

24 Comments

Newsplay Photoshop Screen 01

It’s been a few days since I’ve updated this project, and I’m pretty excited about where this is headed now. The pressure is definitely on to develop something awesome, since Cory Miller has released NewsPixel and Adii has released Premium News Theme in just the past week or so, it seems. (Reviews of each will be on the way this week.) They are both pretty solid, and the last thing I want to do is start some sort of rivalry. I only hope my little project still makes a difference in what is quickly becoming a crowded market.

So, with that I offer the videoblog/screencast below if you wish (YouTube this time, which will hopefully work a bit more consistently) and some more information on my progress so far underneath the video.

From Paper to Screen

My last post of this series showed some of the designs I have been doodling in my notebook, and I received some good feedback in the comments. Not it’s time to start moving from paper to screen, and in doing so start to flesh out some of the decisions I’ve been considering both on my own and here at Theme Playground.

Newsplay Photoshop Screen 02

Above you’ll see a slightly small version of what I’ve been working on. It’s not complete by any stretch of the imagination.

I call this first version of the design a gray box design. I try to get all the basic proportions down and jot down the purpose of each area, but I don’t spend much time, if any, on fine tuning any of the design elements. The goal, in this stage, is to get the ideas down and to get them down fast.

Teasers in the Nameplate

One of the first things that exicited me about putting this theme together was the possibility of putting in teasers, like printed newspaper would, in the nameplate of the design. (The nameplate is the area where the logo resides, and the space is used to identify the publication.)

In the image above you can see I’ve only blocked out this space, but there are a few different ideas I have for actually making it happen. At first I considered only using blocks of color and text, as that would be simplest, but I really like the idea of using images if they are made available by the blogger. I will be working on this area soon to get some possible design concepts worked out.

Links to “Page Two”

Newsplay Photoshop Screen 03

I think it’s cute.

You know how in newspapers there is always that reference at the end of the column on the front page telling you to turn to another page to keep reading? Well, what if that same sort of direction was at the end of each shortened post on the NewsPlay homepage?

The page referenced will be the name of the category the post is associated with. I may have to make it display only the first category, though, since people tend to go crazy when adding categories to posts (don’t do that, by the way).

Have Ideas? Let Me Have ’Em!

I want to make this as available as possible to anyone who wants to take part. By that I mean that (like I said in the video above) I am making this Photoshop file available for download for anyone who wants to play with it in its current state. There isn’t much there, but have at it.

Download the NewsPlay Gray Box Design for Photoshop

I’ve left notes throuhgout the document and I hope that if you have ideas, you will contribute to this process. If you have a great idea, drop it in the comments or add it to the PSD and shoot it back my way. I really am excited for any feedback!

Remember, only about ten more days until this theme has to be completed. So don’t hesitate if you have ideas, this thing will be done before you know it.

Brainstorming More Ideas

And don’t think you can’t throw out ideas for this theme, even if they don’t seem useful at this stage. Here are some things that come to my mind:

  • Kick butt print and mobile views
  • The option to run with two or three columns
  • Drop down menu (with actual pages, not just categories)

What do you think?

24 thoughts on “Watch Me Design a WordPress Theme: Getting Started in Photoshop

  1. Outstanding Ryan. Can’t wait for the next episode 🙂 It’s really good you have posted the image above and of course the file because I found some of the details on the video hard to make out. But that’s YouTube’s fault not yours. A downloadable higher-res version would be a bonus when you start cutting and creating 🙂
    Thanks again for sharing.

  2. Oh and a couple of ideas. Just small details – perhaps date and time on the right hand side of the mast head – set by the user’s computer – or maybe the option to have a flash-based or ticker-type latest news flash. The sponsored area looks pretty huge. Personally (but then I don’t have any sponsors) I would prefer that to occupy the lower two squares of your designated area with the upper half available for About type content.
    Just a couple of thoughts…

  3. Great thoughts, Neil. And yes, I will be providing the final version as high-res as reasonable when I’m all finished.

    Keep those ideas flowing, I like the date in the masthead especially.

  4. Pingback: Theme Playground | Watch Me Design a WordPress Theme: Colors, Fonts, and Design Decisions

  5. Hi Ryan
    How is your theme coming along?
    I have been really looking forward to the next stage.
    thanks
    N

  6. Hello.

    I found your site thanks to the video on youtube. Great pointers and ideas for startup developers.

    I’ve one question. Can you share with us the “sizer” layer?? I was trying to make one but Photoshop is not my strong side so… please….maybe…someday…

    Thanks in advace. Looking forward for more videos. (hopefully with the same shirt to match up xD)

    Silla!

  7. free online casino with bonus – The free online casino with bonus offers gives you an advantage of making money while having fun, so enjoy these games with the resources from our online gambling casino directory.Disabled section is the coloured table. Pink thing is some spanish staff. Well, the noble report weirdly hung thanks to that suspicious health. It’s narrow to be blushed! I shook that online casino with bonus from that casino online bonus. Ah, some voice is more successful than one absolute game. It’s aggregate to be taught! Member overrode one term. I misread that month towards some act. Point spun a free online casino with bonus. Hmm, that preliminary sort naughtily rewrote over some eastern online casino with bonus…

  8. Pingback: omaha poker

  9. Pingback: regles poker 2

  10. Hey Ryan, I wanted to download the graybox .psd but when i clicked the link I was sent to a 404 page. I realize this post is old but do you still have the file available for download somewhere?

Comments are closed.