Photoshop Zone

Step 1 This time we’re going to create a full web design in grunge style using Photoshop and a lot of stock images. As this is a intermediate to advanced level tutorial, I’ll skip the explanation of some basic steps. First create a new document 950 px by 800 px at RGB 72dpi. Show the rulers and drag four guides bounding the document, this will be the optimal area of the design. I’m planning to keep a fixed width layout. Go to Image > Canvas Size and increase the width and height a lot more, 1200 px by 1000 px is OK, this way we’ll be designing for wider screen resolutions. Then add more guides where you’re planning to add the containers (Header, Navigation bar, Sidebar, Footer). Let’s imagine this design is destined for a WordPress template, so we’ll need a header, a navigation bar inside the header, and a right sidebar. Take a look at the bottom of the following image. Then fill a background with this color #7A8173. Step 2 Now we’re going to create a patter...

Making a premium WordPress theme from scratch is an essential skill for designers to learn and will become increasingly important as WordPress continues to become the web publishing tool of choice. In this two part tutorial will we cover how to make premium WordPress themes happen. Part 1, covered below, shows how the photoshop mock up is created, and in Part 2 we’ll outline how to turn the psd into HTML/CSS and wordpress theme files. I’m Alvaro Guzman and in part 1 I’ll show you how to design a modern web interface from scratch using Photoshop and stock pictures. You can download the finished psd file at the end of this tutorial. Firstly let’s have a look at the finished psd mock up: The Finished Mock Up Step 1 Let’s get started, first create a new blank document and draw some guides to delimite your design, 960px width is just fine, then increase your canvas size to see how it looks on wider resolutions, maybe to 1200-1260px. Do the same with the Height, start...

10 Tips For Creating Website Mockups In Photoshop Here are some things I’ve discovered while creating website mockups in Photoshop. They’re not gospel, just things that you may find helpful: 1. Use shapes and shape layers as often as possible. You can resize then easily without quality loss, good for later changes. 2. Blending options are your friend. Double click a shape layer and you can do all sorts of effects: gradients, shadows, color overlay. They’re much easier to make changes to later on when a client says: “Can I see that gradient in blue?” 3. Use Crisp antialiasing on your font layers. It’s much closer to browser rendering. Keep in mind that most modern operating systems don’t smooth fonts below 11 or 12 pixels, so for smaller fonts, you’re probably better off setting it to None. 4. Use web safe fonts on any parts of the site with live text. You might be able to wow the client by using Verlag for the body text of your mockup, but you’ll have a...