Web Design With Adobe Photoshop

Hello graphic design masters of the Universe SitePoint Forums! :smiley:

I know a fair bit about Web Design - When I say this I mean stuff like some colour theory, grid layouts, Web page positioning, design elements and so on. That’s really all I know about the design side. I’m more of a coder. Front-End Web Developer really. I can code a good layout with beautiful code but I can’t design a beautiful layout with beautiful code. I want to be able to design a beautiful layout and add beautiful code. It’s also a requirement really - If I get through to the final of a UK Web Design competition I’ll need to create a Website from scratch using Adobe Photoshop (I don’t know which version they’ll provide me with, probably a recent CS version). I won’t have any Internet access, my own resources or books so I need the ability to design a beautiful layout in Adobe Photoshop in a short amount of time without any prompts or help, just like I can code a Website without any prompts or help. I’ll need to train myself really fast and good because the UK Final is at the start of July this year! :eek:

What I’m asking for is books, Websites (articles, blogs, tutorials, etc), free video tutorials, and / or possibly a Photoshop mentor for the next month or so would be fantastic! :slight_smile:

I have a copy of The Photoshop Anthology and I’ve gone through it but I really feel that it isn’t enough for this competition (or for a professional Website really). It would be great if there was a 2nd Edition! (Hint hint - SitePoint! ;))

Techniques I think that would benefit me:

  • Creation & Manipulation of Shapes (squares, rectangles, rounded shapes, custom shapes, etc)
  • Creation & Manipulation of Lines (straight lines, curvy lines, crazy / weird lines, etc)
  • Creation & Manipulation of Gradients (best colour combinations to use, how to apply them to anything I want, etc)
  • Typographical Manipulation (kerning, line height, font weight, etc)
  • Creation of Web Buttons / Navigation Menus (horizontal and vertical menus, individual buttons, grouped buttons in a bar, other techniques, etc)
  • Textures (apply them to shapes, manipulation of their opacity, etc)
  • Background Creations (beautiful backgrounds, tiles, possibly custom shape style backgrounds, etc)
  • General Beautiful Design Concepts / Techniques
  • Whatever else I should know about to create stunning Web Designs!

Any help would be greatly appreciated. I should be learning Photoshop on a much more professional level anyway but this competition has basically given me a kick up the ass to get moving and learn it to a point where I can use it efficiently and fluently. I have a copy of Adobe Photoshop CS3 and I use MSN Live Messenger and Skype for instant messaging if anyone would like to be my mentor :smiley: I can’t afford to pay anyone any professional rates for mentoring but if I win the competition then you’ll be rewarded for aiding me in my success :smiley:

Thanks very much for whatever anyone can come up with for me!

Andrew Cooper

Definitely agree with the list you posted! Background fills / gradients, logos especially (just the basics I think really), and buttons are a must. I’m fine with the basics of photo editing for now.

I like the idea of not doing a full screenshot layout as I never do that anyway -slaps wrist- I think that would be really beneficial for me and a great way of creating the graphical elements / assets I need for the design and then marking it all up!

Thanks a lot for the example and the little tutorial too :wink: I’ve always wondered how to create the mosaic effect for a banner…Now I know, thanks to you! :smiley:

Yes - Amazing. Gimme that mentoring! :smiley: You’ve already taught me two invaluable tools in Photoshop Shift + Arrow Key to move the selected object by ten pixels, and having to rasterize an object before editing it and playing around with it. Great techniques already!

It would be the best thing ever if I did win, but we’ll see what happens. I didn’t really need to tell you about it because Graham (our tutor, for others reading this) sent out an E-Mail to everyone about it and I was the only one to reply! Besides, if I would have told you and you entered you would have beat me. I can’t have that now can I :stuck_out_tongue: :wink:

I’m getting some really great support from plenty of people who know their stuff about Web Design with Adobe Photoshop and I’m really pleased that everyone is being so supportive so hopefully I should be at a good skill level with Photoshop when I enter the next stage :slight_smile: Thanks again everyone, really appreciate the help from you guys.

Andrew Cooper

I could give you first hand mentoring if you’d like. We kinda go to the same college and are on the same course so that could help a little bit :slight_smile: Everything you stated in the above post I could teach you in a day or two, it’s just then that you would have to incorporate them into your own designs. Photoshop is easy if you know how and when to use the tools and resources it provides.

I could give you the understanding of how to use the software and also provide examples of each technique you stated above, as well as possibly providing some of my own stuff (resources, gradients, brush packs or whatnot).

Would be great if you won the competition, petty you neglected to tell me about it :smiley: Anything I can do to help you win I will do so, just ask…

It’s Chris by the way! :slight_smile:

Yeah it looks cool.

thanks Poes :slight_smile:
I have my moments!!

That’s a very common method, I’ve been doing the same for 10 years or so. It keeps everything in the one file and it’s easy to add extra bits and peices as you create them.

Huh, I’ve never seen anything like that, SpikeZ, having one little graphic with all your necessary little graphics. I’ve always just made them as I needed them. Seems neat so long as you know what you want up front.

As you presumably only have a limited amount of learning time I’d suggest concentraring on the key types of graphics that you might need, eg…

background fills/gradients
the odd button

You already have a good idea about colours, grids, layout etc and that’s 90%+ of designing a good functional web site and most of that is HTML/CSS. Everything else can be easily implemented with CSS, such as roundy corners, text shadows, even background gradients

It isn’t an Adobe competition, but I can see how you made that assumption based on what I said :wink:

When you’re at the “Live Final” you must create a complete Website over the course of 4 days starting at 9:00AM and finishing at 4:00PM. They provide you with a computer that includes Adobe Dreamweaver, Flash, and Photoshop. I’ll be choosing to develop in Microsoft Notepad because of preference however, I can’t exactly design a Website in Microsoft Paint. I guess that they would provide the competitors with whatever software they wanted (within reason) but Adobe Photoshop seems like the best one to use for the competition so they provide it.

The competition I am talking about is WorldSkills UK which if I win the UK Live Final I can be shortlisted for Team UK to compete at [URL=“http://www.worldskillslondon2011.com/”]WorldSkills London 2011 - The vocational skills equivalent of the Olympics.

Can you or anyone else help? :slight_smile:

Andrew Cooper

It sounds like an “Adobe” competition, not a web design competition. Remember that an image editor is only really to create images/graphics that are used in a web site.

Hi Andrew :slight_smile:

I have no time to give you lessons for this, but I have written a bunch of tuts that you might want to look at. There are some tuts about colors in there as well. They are all in my signature.

Have you ever worked with images at all? Have you done some photography that you can include? Just using buttons and gradients is not going to give you a world class design you know. If you know coding well that will give you a great foundation, but cramming in image making for a competition like this will take longer to learn I think.

With such a limited time to design and construct a site it is pointless doing a full screenshot layout.
If I was participating I would do a pencil sketch outlining what I need and where it all goes together and then
a 500 x 500 blueprint of just the elements that I would need.


that gives you most of the basic elements for building the site. Also added a note to self for font, colours, style and line styles.

The pixel line dividers are simply

and the pixelated/ mosaic header in 4 steps…

  1. Use the Marquee to set up a rectangle - create a new layer and fill with a light gradient.
    #e0ddc6 - #f0eee3

  2. With the marquee still active, create a new layer and fill with one pf PS’s default patterns:

  3. Go to Filter > Pixelate > Mosaic and play with the settings - I used 14

  4. change the mosaic layer properties to overlay


That gives you an idea to work on anyway. No need to do too much :slight_smile: