Watch Me Design a WordPress Theme: Getting Started in Photoshop

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?


Did you enjoy this post? Then it might be worth your time to subscribe via RSS using your Feedreader or, if you prefer, via email.

About the Author: Ryan Imel

My name is Ryan Imel, and I’m a full time freelance web developer. I work a lot with WordPress, but am comfortable with other systems too.

23 comments so far

  1. Neil MacLean said:

    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. Neil MacLean said:

    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. Ryan said:

    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. Ulrich said:

    Hi. If I wish to e-mail you my to cents of ideas in the PSD-file, what should I e-mail it to?

  5. Ulrich said:

    Never mind :) I’ve uploaded my ideas here: http://bojko.dk/design.psd

  6. Neil MacLean said:

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

  7. Scyfox said:

    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!

  8. Maddox Wilhelm said:

    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…

  9. Online said:

    Thank you for the video.

  10. dicesa casinol great video, thank you, found it very informative and gave it a 5 star rating.

  11. allstaytomst said:

    girl cube england red jhon water global sea all boat all

  12. stevenkeynoh said:

    global are juicy stay america

  13. I’m sorry but I disagree to what you have just explained.

  14. Casino Vault said:

    No it shouldn’t be. I totally disagree on what you have just said, you’re very wrong!!!

  15. bufalo juan said:

    i dont agree either so so wrong dude

  16. createmo said:

    Thank you for your website ;) I made with photoshop backgrounds for myspace or youtube and even more
    my backgrounds:http://tinyurl.com/6rbxmr
    take care and thank you again!

  17. majestic said:

    nice one,,thanks Ryan

  18. Leader said:

    Thank you for this topic
    Good,

    leader designer blog
    http://leader-d.co.cc/blog

  19. suntech student loans suntech student loans

  20. certificate acord of insurance 25 liability insurance of form acord certificate liability

Add to this discussion

Required: We need to know who you are.

Required: Your email will not be published. This will also give your comment a gravatar. (What is a gravatar?)

Optional: This will make your name clickable.

Required: Kind of the point of this whole form, don’t you think?

Trackbacks/Pingbacks

  1. [...] of adding the date and breadcrumbs to the top of the sidebar, thanks to the suggestion from Neil in the comments the other day. It’s not quite in the header, Neil, but I’m hoping it might pull off a similar effect. [...]

  2. omaha poker said:

    free polyphonic ringtones…

    Choose texas holdem shareware play free slots regles du jeu poker free polyphonic ringtones free texas hold em game…

  3. gioco poker da scaricare…

    Peut-être casino poker games partie poker net regles poker 2 internet casino gambling regles poker mains…