UI Mockups with Adobe Photoshop

Hi everyone,

Taking a break from content for a minute but I did manage to post some examples of work that I have done on the My Work page over there on the right.  Go ahead, click it :D

rob.

OK, so let’s try this again, we’re gonna learn about the Pencil tool. Now I know this blog focuses on using the vector capabilities of Photoshop, but sometimes you need to dabble in pixels; mostly when drawing icons (we’ll have a couple icon tutorials later).

First thing we’ll cover is the difference between vectors and bitmaps and then get into the how to use the Pencil tool. 

Read on …

That I should draft my posts in something besides a web browser so I don’t lose an hour’s work when Safari crashes. We’ll have to learn about the Pencil tool later this weekend.

Hi everyone. I’m back from my camping trip, beer in hand, Daniel Tosh on TV, its time for some Photoshopping. Click on the little blue square and lets go. Today we’re learning about the Slice tool.

The good news is that we won’t need a box of bandages nearby.

Greetings Photoshoppers. My fiance is watching American Idol so its the perfect time to distract myself with dropping Photoshop science on y’all. This time we’re going to learn a practical use for the Marquee tool. I use this technique quite a bit to work with bitmap imagery that I bring into my mockups.

The most common way I use it is to add an image of a scrollbar to an are of the UI to indicate scrolling.

Keep reading to see where I get the imagery and how I edit it.

Selection options. There’s a myriad of ways to make and modify selections; most of which you’ll never use in making UI mockups. I’ll show you the options available and explain which ones you’ll most likely use.

You will likely only ever use the Rectangular Marquee. The primary ways you will use the Marquee tool when creating mockups are:

• Creating masks for layers or groups.
• Manipulating bitmap layers.
• Making reference selections for creating guides.

Broader discussion and examples after the jump

In the next part of the site, I’ll be giving an in depth overview of each tool used in creating UI mockups. We’ll be covering the following tools:

• Move
• Marquee
• Slice
• Fill/Gradient
• Pen
• Text
• Path Selection/Direct Selection
• Shapes
• Eyedropper
• Pan
• Zoom

First up, the Move Tool 

This is the last one, I promise. After this we’re going to take an in depth look at the tools.

We’re going to style the cylinder now and make it look all shiny and dimensional. If you haven’t been following along until now be sure to check out parts 1 and 2.

If you’re ready to go, let’s bring this one in for a landing. In our last post we got as far as this:

Assuming you’re already completed the steps in Let’s Make a Cylinder - Part I, grab the Ellipse Tool and draw a short ellipse near the bottom of the canvas.

Let the drawring ensue!