UI Mockups with Adobe Photoshop @ninjasavant-blog - Tumblr Blog

Life is what happens when you're busy making other plans

More content coming soon!

I uploaded some of my work

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.

The Tools Series: Pencil Tool

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 . . .

In computer graphics there are bitmaps and there are vectors. Bitmaps define the colors in an image pixel by pixel. This means that bitmap files are affected by file resolution. It also means that since the file requires information about each pixel the file size can potentially be quite large. We'll get more in depth into bitmap issues when we look at the anatomy of a file and saving for the web. Bitmap file formats include jpg, gif, bmp, png, and tif. The Pencil tool works with this type of information.

Vectors on the other hand are defined by coordinates and colors; just like how shape layers, paths, and Illustrator files work. For example, while in a bitmap a square is defined pixel by pixel, color by color, a vector is defined by the four corners and a single defined color or gradient color stops. This means that the files can be much smaller and that files are not so dependent on resolution.

Back to the Pencil tool.

When using the pencil tool, you can't draw on an existing shape layer. You can draw on:

The Background layer

Bitmap layers

Layer Masks

The Pencil tool draws using the color in the foreground color well. That's the top left color either in the Tools palette or the Color Palette (it's the same color) using the size and brush shown in the Brushes palette or in the Brush drop down in the Pencil option bar. Hardness doesn't come into play because that's the difference between the Pencil and Brush tool. The Pencil tool is always a hard edge with no anti-aliasing while the Brush tool has anti-aliased edges (at sizes larger than 1 pixel) based on the hardness specified in the Brushes palete/drop down.

Now to be honest, the Brushes palette is one of the most powerful features in Photoshop and worth getting to know. One of the best tutorials I've found that shows how powerful the Brushes palette can be is Abduzeedo's very popular Digital Bokeh tutorial. For the purposes of mockup creation, however, you'll rarely ever use anything more than the basic 1 pixel brush.

Pencil tool keyboard shortcuts:

B - Switch to Brush/Pencil/Color Replacement Tool group

Shift+B - Cycle between Brush/Pencil/Color Replacement Tool

D - Set colors to default: black foreground, white background

X - Swap foreground and background colors

[ - Decrease brush size

] - Increase brush size

Pencil tool modifier keys:

Shift

Constrains drawn line to X or Y axis

Alt

Turns the cursor into the eyedropper crosshair. While holding Alt you can sample any color in any document by clicking on it.

Here's a little known fact about the eyedropper: you can sample any color on the screen. In this case, while holding Alt, click and hold anywhere in a document and drag the cursor off of the document. You'll notice that the crosshair cursor persists and the foreground color changes to whatever color your cursor is over on the screen when you release the mouse button. I use this trick a lot.

If you hold the Shift key while you click you can sample up to 4 colors at once, each of which will be shown in the Info palette:

Last thing about the Alt key is that the color sampling is done as defined in the Eyedropper's Sample Size in the option bar:

When working with photos, you'll want to use one of the x by x averages which will set the foreground color to the average color computed with x pixels of where you click. This is good for airbrushing and such.

However, when sampling colors for mockups you want the exact color you click on so you'll always want Point Sample selected. The good news is that Point Sample is selected by default and there's no way to accidentally change it so you don't really need to do anything but if you're not getting the color you expect when using the Alt key with the Pencil tool this may be the culprit.

Cmd (Ctrl on a PC)

Changes the cursor into the Move arrow. When you click and drag on the layer it moves it. Holding down Shift when you drag constrains the layer along the x or y axis.

Cmd (Ctrl on a PC) + Alt

Changes the cursor into the Copy arrow. When you click and drag on the layer it creates a copy of the layer and moves it to where you drag it. Holding down Shift when you drag constrains the layer along the x or y axis.

Drawing with the Pencil Tool

When I'm using the Pencil tool I'm typically drawing an icon or drawing straight lines. So I'll turn on grid, make sure I'm snapping to it, and basically start coloring in the lines. It's worth noting that when painting into the grid with a 1 pixel brush, your cursor will color the pixel that it's covering to the bottom right of where your cursor is. This is easier to see when you're zoomed in far enough to see the individual pixels. Before I figured this out I'd get frustrated when the Pencil would mark the pixel I was barely touching to the bottom right instead of the one I thought I was clicking on because I had more coverage over it.

That's enough Pencil info for today. In a future post we'll put it to use and draw an icon.

#pencil #photoshop #eyedropper #info palette

Today I learned . . .

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.

The Tools Series: Slice Tool

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.

The slice tool works in conjunction with the Save for Web... function to export ready cut images for web sites (and the markup for them if you're so inclined). When I make mockups I typically export full size screens as reference mockups. When you export a mockup as an html page it will only make a fixed size website so if you resize your browser bigger or smaller than the image it will scroll the whole thing. Doesn't seem to make sense for actually developing a web app.

If I want cut up UI pieces, I create them in a separate file using the slice tool because I typically need to create background graphics that grow or repeat with a dynamically sizing div. However, with CSS3 and image sprites (a whole other topic) the need to use background graphics is soon to become largely obsolete.

There are other practical uses for it though. For example, when I'm creating a set of icons at different sizes, I like to create them all in one document so I can make a copy of the icon and resize it quickly. By making slices you can export them all at the same time, properly named even.

So here's how it all works. Make a document, grab the Slice tool and draw a box somewhere on the canvas. It will look something like this:

Slices with the blue flags (and outlines when not selected) are User slices. The slice number can be shown/hidden via the ..>Preferences>Guides, Grid, Slices, and Count preferences panel. The next flag specifies the slice type (all of these are images). The 8 in the grey flags means that slice was automatically generated.

Right click on a slice with the Slice or Slice Select Tool and you'll get this menu:

Delete Slice deletes the slice.

Edit Slice Options... does the same thing as double clicking on a slice with the Slice Select tool; which is bringing up this dialog:

The important thing to notice is the Name. Whatever you put in here is what the image made from the slice will be named when you save for the web. The rest is kind of self explanatory and I never use it.

Promote to User Slice makes an auto-generated slice into a User slice. This comes up when you Save for Web...

Combine Slices combines slices when you have more than one selected with the Slice Select Tool.

Divide Slice gives you the following dialog:

As you can see in the dialog I cut one of the slices into 3 equal slices. I've never used this function.

The rest of the functions work because you can overlap slices which comes in handy sometimes but I don't use it. You can also do a lot of these actions with the Slice Select Tool Options bar at the top of the screen.

You'll also notice that there are align functions. You can select 2 or more slices with the Slice Select Tool and align them.

You can also hide the auto slices with that button so your canvas isn't all cluttered up with all the lines you don't need.

The Slice Select Tool

When you have the Slice Select Tool you can do the following things with it:

Double click a slice to edit the Slice Options

Move a slice around the canvas

Copy a slice as you drag it by holding Option (Alt on a PC).

Draw a slice by holding Cmd (Ctrl on a PC)

The way I use the ability to copy slices most often is to quickly create several related slices. For example, if I'm creating a tab with rounded corners using graphics I want to use 3 tall slices.

So I'll draw a sufficiently tall tab and then create a slice the contains the left edge. Then I'll double click the slice to edit the name to something like 'tab_left'. Then I'll use the Slice Select tool with the Option/Alt key to copy the slice to contain the right edge. Then I double click that slice and change the name to 'tab_right'. Then copy it into the middle, resize it with the handles down to 1 pixel wide (this will be the repeating background for the middle), double click it and rename it.

Then when I Save for Web... the files are just named correctly.

When you draw a slice on your canvas the slices will stay shown unless you uncheck slices at View>Show>Slices. You can also lock and clear slices right from the View menu as shown below.

And that's the Slice Tool. I'll cover the Save for Web... dialog in its own post because there's a ton of stuff in it.

#slice

The Tools Series: Marquee Part III

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.

So the first thing we'll cover is one of my favorite resources for graphics stuff: Designers Toolbox. They're not paying me to say this either. I seriously use the stuff they have like lorem ipsum generators, standard size templates, and the thing I use the most: web browser GUI elements.

So the first step today is to go to the site and download your browser/platform set of choice (or all of them). I'll be using the Mac Safari set.

Once you've got the browser GUI set downloaded and open in Photoshop, create a new document thats 500 x 500 pixels.

With the Move tool, make sure that Auto-Select Layer is checked and selected. In the GUI elements document click on the vertical scroll bar and drag it into any area of the blank document you created. When you release it, that layer will be added to your document. Drag the newly created scroll bar into the top right corner of the canvas. Unless you've changed the default settings it should snap to the document edges. Your canvas will look like this:

What we want to do is make the scroll bar reach all the way to the bottom, but if we were to just resize the layer we'd get weird, ugly distortion. So we will use the marquee tool to copy a section of the layer.

Using the Marquee tool to select roughly the bottom half of the scroll bar. You don't need to get it exactly right but you want to be sure to get all the way to the edge.

Now press and hold Cmd (Ctrl on a PC) + Alt. The cursor will turn into the Copy tool. Click on the toolbar and drag down so that the copied section begins to fill in the area below.

If you want to constrain the cursor so you only drag along the Y axis, press and hold Shift AFTER you click on the toolbar. If you press Shift before you click you'll only deselect the canvas. If you do that you'll have to click on the toolbar layer in the layers palette to reselect the layer to be able to copy the selection.

If you've done everything correctly, it will look like this:

This technique has a variety of uses that you'll use when working with the bitmap imagery on your UIs.

You can also resize selected elements. After you've made a selection on a bitmap layer, press Ctrl+T and you'll get resize handles. Use the handles to modify the selection, hit enter, and you'll have a modified layer.

#Marquee

The Tools Series: Marquee Part II

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.

This is the option bar, you'll get one for each of the tools at the top of the UI. For UI mockup creation, you won't use any of these options. The only ones you would use are the four options on the left to Create a new selection, Add to selection, Subtract from selection, or Intersect with selection. Instead you should learn how to do these with keyboard shortcuts as descried in The Tools Series: Marquee Part I.

Similar to the options bar, the Select menu has a number of options you won't use.

The only thing you'll really use in this menu (you'll use the select all/deselect keyboard shortcuts quite a bit) is the Modify>Contract and Expand options. Every so often you'll want to make a selection and then add or subtract a pixel for a variety of reasons, but not that often.

So this post was kind of odd in that it was just an explanation that you'll never really use the Marquee or Select options. It's because most of the power of using Photoshop for UI mockups is in using the vector based tools. Although, in the next post I'll show a practical example of how to use the Marquee tool in a UI project.

#Marquee

The Tools Series: Marquee Part I

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

Creating masks

To create a layer mask simply:

Choose a layer or layer group

Make a selection indicating what part of the layer (or group) you want to be shown after the mask is made

Click the Add Mask button at the bottom of the Layers palette

Now only the selected area will be visible as shown in the example below:

That middle thumbnail is the mask I created with the Marquee tool. You can still see the shape outline because I have the Vector Mask selected.

I'll cover more advanced Layer Mask options when I cover the Layers Palette.

Manipulating selections

When you draw a selection, if you then click in the selected area you can move the selection around the canvas without affecting the layer you are editing. You can also use the arrow keys to nudge the selection 1 pixel at a time.

You can use the following modifier keys with the marquee tool:

With nothing selected:

Shift Constrains selection to a square or circle.

Alt Draws selection using your initial click as the center point.

Cmd (Ctrl) Changes cursor to the Move tool. If you have your Move tool set to 'Auto Select Layer' you can click on a layer you want to manipulate with the Marquee tool to select it. Otherwise you'll move the layer you are working on before making a selection.

Shift + Alt Draws selection using your initial click as the center point and constrains the selection to a square or circle.

Shift + Cmd (Ctrl) Same as Cmd (Ctrl)

Alt + Cmd (Ctrl) Changes the cursor to the Copy tool which is a modified Move tool that makes a copy of the moved layer to a new layer.

With an existing selection

Shift Adds to existing selection.

Alt Subtracts from the existing solution.

Cmd (Ctrl) When you hold Cmd (Ctrl), click within the selected area, and drag the selection, you will cut the selected portion of the layer you are editing within the same layer.

Shift + Alt Modifies the selection by leaving the overlapped area of the existing selection and the drawn selection

Shift + Cmd (Ctrl) Makes the same cut as Cmd (Ctrl) but contstains the movement of the cut selection to the X, Y, and 45º axis.

Alt + Cmd (Ctrl) Changes the cursor to the Copy tool and makes a copy of the selected area on the same layer.

Shift + Alt + Cmd (Ctrl)

The only thing this does is deselect the layer you are working which will pop up an annoying message to let you know that you have no layers selected. If you are trying to copy something and constrain it as you move it, you have to:

Hold Alt+Cmd (Ctrl)

Click the layer/selection

Press and hold Shift

Move the layer/selection

Using Selections as references for guides

In case you don't know, you can add a guide to your canvas by clicking within the canvas rulers at the top and left edges of the canvas and dragging into the canvas. If you don't see the rulers press Cmd (Ctrl) + R or go to View>Show Rulers. You'll want to ensure that your units are set to Pixels by right clicking in the ruler area and choosing Pixels.

For this example you'll also want to make sure that Snapping is turned on by either pressing Cmd (Ctrl) + ; or making sure that View>Snap is checked. You'll also want to show the Info Palette by either clicking on the palette tab or going to Window>Info if its not already shown.

When you're adding guides (with snapping turned on) the guide will snap to the edges or center of the layer you have selected. If you have a selection on the canvas, the guide will also snap to the edges and center of the selection.

For example, say you want to make a mockup that has a 25 pixel margin around the whole working area. To make sure you keep this margin consistent when drawing, guides would be a good idea. To make sure you have them at exactly 25 pixels from the edges of the working area you can do the following:

Using the Marquee tool, draw a 25 x 25 pixel selection anywhere in the canvas. Constrain the proportions by using the Shift key and track the size as you drag by looking at the Info Palette (it shows you the selection size as you drag it).

Click and drag the selection to the top left corner of the working area so that the top left corner of the selection is in the top left corner of the work area. If you're just using the canvas edges you'll probably notice that the selection snaps into place.

Click in the ruler area and drag a guide to the right and bottom edges of the selection area.

Grab the selection area and drag it to the bottom right of the work area.

Click in the ruler area and drag a guide to the top and left edges of the selection area.

Press Cmd (Ctrl) + D or go to Select>Deselect to deselect and there you have it, guides that show you a 25 pixel margin.

That's it for today. In my next few posts I'll show you some practical examples of using the marquee tool to modify a scroll bar, an existing screen capture, and create an icon, and we'll take a look at the Select menu. See you then.

The Tools Series: Move

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

If you want to click on something directly to move it, make sure that the Auto-select box in the tool options is checked and the option is set to Layer. With the number of nested layers you will usually end up with in the mockup process, you’ll rarely find Group to be a useful option for this. You’ll have to uncheck the box from time to time when you select a number of layers and groups and want to move them without accidentally unselecting them (which you’ll do all the time anyway).

Moving a selection

When you have a marquee selection on a pixel based layer, using the move tool will cut the selection out of the bitmap and move it around within that layer. If you press the Alt key it will copy instead of cut (leave the original image behind and slide a new copy of it around). A practical example of how I use this is when I’m placing a scroll bar on a mockup. I just use a screen cap of an existing scroll bar and place it in my image. I obviously don’t want to resize it or the dimensions would get messed up and not look real. So if it’s too short, I’ll make a selection on the tool bar layer, press Alt, click on the layer, press shift, and then move the bottom of the scroll bar down to fill the space. When doing this, every time you stop dragging and start dragging again, a new copy point will be made. What that means is that if you don’t have enough available image to copy to fill the space you can copy a little bit at a time until you fill the space without running out of image. To see an example of this in action open the video “Using the Move Tool with Marquee Selections.mov” in the [PATH] directory on the DVD.

Aligning

I also use the align functions in the options bar but not as much as I use the smart guides. you can enable Smart Guides by making sure the option for it is checked in View>Show. Objects will snap to these guides if you have snapping on and set to snap to Guides.

Snapping

Photoshop will snap to a grid before it snaps to a guide if you have the grid shown. I use guides to get the basic framework laid out but don’t really use them beyond that since I find snapping to the 1 pixel grid to be more efficient in my workflow. If you do want to use guides I would suggest enabling the grid first because when you’re dragging guides around, they will snap to the grid if enabled. If you don’t have the grid enabled then Photoshop will place the guide anywhere you drop it which may not be on the pixel line. In this case your guide will always look off when working with pixel perfect objects.

Nudging

When you nudge an object using the arrow keys on your keyboard, the object moves 1 pixel in the direction you press but it does not snap to the grid. So you if you have an object with an outline that is not on the pixel line (see Pixel Line on page x), when you nudge the object it will retain that blurry edge.

Modifier Keys

You can use the following modifier keys when using the Move tool:

Alt

Makes a copy of whatever layers you have selected when moving them. I use this to quickly duplicate objects directly on the canvas.

Shift

Constrain object to x, y, or 45º axis when moving the object.

Select multiple objects on the canvas.

Note: If you want to make a copy of one layer AND constrain it as you move it, press Alt first, click the object, and then press Shift. If you are holding shift when you click the object you will deselect it and get the most annoying error in all of Photoshop:

I hate this error. I get it constantly because my fingers don’t always move as quickly as my mind does when I’m working. There’s no way to dismiss it permanently and it just breaks up my workflow.

Styling the Cylinder

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:

What we want to do is overlay a black and white gradient over the color to give it some highlight. To do that we want to click on the bottom layer and add a Gradient Overlay effect.

Once on that dialog click in the middle of the gradient preview to open up the gradient dialog. If its not already chosen, click on the black to white gradient. Now you're going to want to add a color stop somewhere around 40% by clicking just below the gradient preview and then clicking on a white swatch in the swatches palette (or click in the color preview in the bottom left of the dialog and making the white color in the Color Picker).

Then click the white swatch on the right and change it from white to black. Before you click OK it should look like this.

Next set the Blend Mode to Screen, the Opacity to 50%, and the Angle to 0º. It should look like this:

Now we have to add the Inner Glow. Click on the check box next to Inner Glow on the left. Change Opacity to 25%, click in the little color box and change it from yellow to white, and set the size to 10px. It will look like this:

Click OK and click on the top layer and add a Gradient Overlay to that layer. Do the same thing with the gradient and the color stops with the order from left to right go like this:

0%: White

25%: Black

50%: White

75%: Black

100%: White

Click OK and set the Blend Mode to Screen, Opacity to 50%, Style to Angle, and Angle to 65º. It should look like this:

Click on Inner Glow and do the same thing as with the other layer. When you click OK your cylinder should look like this:

We're almost there, just need to add the stroke and the shadow. We want the stroke to go over the whole shape. To do that we'll use a few shortcuts. First duplicate the bottom layer by selecting it and pressing Cmd+J (Ctrl+J on a PC). This creates a duplicate layer above selected layer so right click on the original layer (the one on the bottom) and choose Clear Layer Style in the menu.

Then click on the Layer Effects button and click on Stroke... and click on the color swatch and choose a dark blue.

The cylinder will look like this:

OK, hang in there, one more step. We want to add a shadow to give it that extra bit of dimension. We could just add a drop shadow to the bottom shape but that would just make it look like a 2 dimensional drawing on top of the canvas. We need to just add it to the bottom of the cylinder.

To start, select the top layer (the top of the cylinder) and press Cmd+J (Ctrl+J on a PC). Grab the Move Tool and drag the ellipse to the bottom of the cylinder shape

and drag the layer (in the layer palette) down below the other layers (but still above the Background layer). Clear the layer style and add an Outer Glow to the layer. Set the size to 15px.

Click OK and you've made it! You've got a cylinder.

#layer styles #photoshop #gradient overlay #inner glow #stroke #outer glow #color picker #pathfinder #path selection tool

Let's continue making a cylinder

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!

Now we want to add the rectangular piece to that vector mask. Make sure the vector mask is selected. You can verify this by seeing the weird edge around the ellipse and by seeing the corner brackets around the vector mask on the layer.

Click on the Rectangle Tool (or select it in the options bar at the top of the screen) and look in the middle of the options bar and click on the Add to shape area button.

These buttons work like the Pathfinder tool in Ilustrator except that you enable them before you draw the shape, not after. The options are:

New shape

Add to shape area

Subtract from shape area

Intersect with shape area

Exclude overlapping areas

These options are only available when you have the vector mask of a shape layer selected.

So with the Rectangle tool selected, zoom in until the shape fits fully on your screen and turn on the Grid by clicking View>Show>Grid or pressing Cmd+; (Ctrl+; on a PC). Draw a rectangle that extends exactly to each side of the ellipse. You can use the grid to line this up.

The problem is that you'll have to draw the rectangle shorter than you want to be able to make sure that the edges line up so you'll have to make the rectangle taller. You might also not get the edges exactly right. You'll need to resize.

Grab the Direct Select Tool (the white arrow)

Click in the rectangle shape so you see the little squares in the corners (called handles), here's what they look like zoomed in:

Now click on the top edge of the rectangle and drag it up near the top of the canvas. When it's done it will look like this:

With the direct select tool you can drag edges and handles to get the shape right.

There's another way, too. You can use the Path Selection Tool to select the rectangle. Choose Edit>Transform Path or press Cmd+t (Ctrl+t on a PC). You'll get resize handles just for the selected path.

Now we need to put the top on the cylinder but we want the shape to be the same dimensions as the ellipse on the bottom, so we'll reuse the shape.

With the layer selected choose Layer>Duplicate Layer... or press Cmd+J (Ctrl+J on a PC).

At this point you might want to change the color of the shape to help distinguish the two layers. It doesn't matter what color you choose, we'll be changing it later. In my example I left it black.

Grab the Path Selection Tool (the black arrow)

and click on the rectangle. You'll see the handles on each corner of the rectangle. Press Delete (or backspace) on your keyboard to delete the rectangle. You'll be left with the ellipse.

Now you can either use the Path Selection Tool or the Move Tool to drag the ellipse up to the top of the original shape so that the center of the ellipse lines up exactly with the top of the original shape. Since we turned on Smart Guides in the last post, Photoshop will let you know when you've done that. Hold down Shift when you drag to keep the shape centered vertically.

Now our cylinder is coming together. We'll do one last thing before I have to go. Double click on the layer thumbnail of the body of the cylinder shape to bring up the color picker and choose a medium blue color from the Swatches palette. Then do the same thing with the layer for the top of the shape and pick a slightly lighter blue.

Some info on the color picker and the swatches palette. In UI speak, a dialog that forces you to close the dialog before you can click in the main UI again. Most dialogs in Photoshop are modal, the color palette is only partially modal in that you can click on the Swatches palette to choose a predefined color. I chose two colors from the same vertical stripe of medium blues from the default Photoshop palette as shown.

Here's the result:

That's all the time I've got for today. Check out the blog in a couple days when I post the final part in this series: Styling the Cylinder.

#tutorial #color picker #ellipse tool #rectangle tool #path selection tool #direct selection tool #smart guides #pathfinder

Let's make a cylinder - Part I

Welcome back Photoshoppers, today's episode is all about making a cylinder. At the end of it all we'll have made a graphic that looks like this:

So let's get down to business.

First things first, create a 300x300 pixel document at 72dpi with a white background. Now let's make sure some settings are set up correctly. Go to Photoshop>Preferences>Guides, Grid, Slices, and Count... (File>Preferences>Guides, Grid, Slices, and Count... on a PC)

Set your Gridline to 1 pixel with 1 Subdivision

Some info on this 1 pixel grid setup. Each square of the grid is a single pixel so when the edge of a shape line up on these grid lines, the edge will remain sharp. If the edges end up between the grid lines, Photoshop will display an anti-aliased edge to approximate the line. The result will be a blurry edge which doesn't look very clean. So a lot of the technique and set up involved in creating UI mockups is making sure your edges are clean.

Click OK.

Go to View>Show and make sure Smart Guides is checked.

Now go to View>Snap To and make sure Smart Guides is checked.

Next up, making the shape

#tutorial

Making an RGB color wheel

For our next tutorial we're going to learn a little bit about how you can combine layer content with layer effects to achieve certain effects. When we're all done we're going to have an RGB color wheel that looks like this:

Keep reading to see how to make the magic happen.

So first thing we're going to do is create a new 300 x 300 @ 72dpi image with a white background. Use the Ellipse Tool to create a circle using the shift key to constrain the proportions on a new shape layer. You should have something that looks similar to this:

It's a shape layer full of a color as indicated by the layer palette. Now we're going to change the content of the layer from a color to a gradient. To do this click on Layer > Change Layer Content > Gradient...

In the dialog that comes up, click on the drop down arrow for the gradient list and choose the Spectrum without transparency:

Change the Style to Angle

and click OK. Now we've got a color wheel:

Now we need to add the RGB saturation. To do that we'll go to our layer effects and choose Gradient Overlay ...

In the gradient overlay dialog, edit the gradient so that it goes from white in the middle to black on the edge and change the Blending Mode to Screen

Viola! You've got your RGB color wheel:

What's that you say? You want to make a CMYK color wheel? Here's how:

Double click the Gradient Overlay effect on the layer

This will bring up the Gradient Overlay dialog again to edit. Click the Reverse check box and change the blending mode to Mulitply:

Click OK and you've got your CMYK color wheel:

As you can see, there's a lot of potential in layer content, effects, and blending modes. In fact, if you play around with the blending modes a bit, you'll be able to see the fun things you can do; especially with these 2 gradients together.

#layer effects #gradient overlay #layer content #blending mode #ellipse tool

Creating a glassy sphere

So here goes my first attempt at writing a tutorial. To get started, we'll create a simple glassy sphere to get acquainted with the tools and options. We'll only scratch the surface of what shape layers and layer effects are capable of and the nuances of really making them work. Here's what it will look like when we're done:

Continue reading for all the step by step details.

So let's get started. First, create a new document in Photoshop and specify the following:

Height: 300 pixels

Width: 300 pixels

Resolution: 72 dpi

Background: White

Then switch to the Ellipse Tool

And make sure the option bar in the top left of the screen looks like this

with the Shape Layers option selected. This will make sure that the shape you draw is created as a new shape layer. The other options are to make a new Path, or to just fill the pixels on the currently selected bitmap layer. I never use those other options.

Now, draw a circle by dragging from one corner to the opposite diagonal corner. Hold down the shift key to constrain the dimensions as a circle. If your foreground color was set to black you should now see something like this:

If you look over at your Layers palette, you'll see that a new layer has been created with 2 thumbnails. The first is the layer content, this is color by default. I'll cover other content options in later posts. The second thumbnail is the vector mask. This is the shape itself. The shape is made up of paths and there's a lot of functionality available which will be covered in later posts. For now, we'll continue on with the lesson.

With the newly created layer selected, click on the little scripty 'fx' in the bottom left corner of the Layers palette and click on Gradient Overlay...

Now click directly in the middle of the little gradient preview in the middle of the dialog that comes up to get the gradient editor. In the example below, I've set the gradient from medium red to a darker red. To do this, click on the bottom left color stop on the bottom of the gradient preview and then click directly on the color swatch in the Stops area. This will bring up the color picker. Choose a color and click OK. Then click on the right side color stop, open up the color picker, and choose a slightly darker color. You'll have a gradient that looks like this:

Click OK on the gradient editor to go back to the Gradient Overlay dialog. Set the gradient style to Radial and set Scale to 125%. The dialog should look like this:

Before you close the dialog, move your mouse cursor over the circle on the canvas and it should change to resemble the Move tool. Click and drag within the circle and you'll notice that the center of the gradient will move. This comes in handy a lot. Move the gradient into the top half of the circle. Click OK and your circle should now look like this:

Next we'll add the glassy highlight. If you don't still have it selected, grab the Ellipse Tool and draw another small ellipse in the upper half of the existing circle that looks roughly like this:

Now click on the Layer Effects menu and choose Blending Options... from the list. Set Fill Opacity to 0% and the black ellipse will disappear.

(This actually does the same thing as setting the Fill to 0 on the layer palette itself)

Now choose Gradient Overlay and set it up so the gradient goes from white on top to black on the bottom. Set the blending mode to Screen. Click OK and you should have a circle that looks like this:

You've probably noticed that there's a weird outline around the shapes on the layers you have selected. The reason is that you have the vector mask selected. You can tell by the corner brackets around the vector mask thumbnail:

If you click on the vector mask it will select/deselect the vector mask or when you select a different layer. When deselected there will be no outline around the shape. This selection state matters and will come into play in later posts.

It looks ok, but we can make it better. Select the red circle and choose Inner Glow... from the Layer Effects menu. Set opacity to 25%, click the yellow box and change it to white, and set the Elements size to 15 px. Click OK and we've got ourselves a glassy sphere:

This being my first attempt at writing a tutorial, I'd be interested in hearing what you think about it. Did you find it clear, interesting, useful, etc? Let me know. Thanks!

#photoshop #one column

Photoshop vs Fireworks

The obvious question to some as I show how to create UI mockups in Photoshop is "why not use Adobe's tool created specifically for creating UI mockups: Fireworks?" This can be a divisive issue that I think comes down to preference. It seems like those who grew up with programs like Freehand and Flash in the pre-Adobe days tend to prefer Fireworks. Those of us who were raised in Adobe households prefer Photoshop. I fall into the latter category.

But to quantify my rationale for preferring Photoshop, it boils down to these issues:

I prefer the way Photoshop handles layer effects to the way Fireworks handles adding effects to layers and shapes.

I don't like Macromedia style edit panels and dialogs.

There's no way to numerically specify some properties like rounded rectangle border radius.

Fireworks tends to generate auto slices when adding things like buttons so there's no real way to just export a solid image that's not all cut up. That's a real deal breaker for me since I deliver these full images as specs to developers.

Full disclosure: CS3 is the most recent version of PS/FW I've used. Some of these issues may very well have been addressed in CS5. I do hope to get my hands on the latest version soonish but last I saw in the FWCS5 beta, they hadn't fixed them.

#photoshop #fireworks

Why are we here?

I make user interface mockups for a large software company using Adobe® Photoshop®. I'm able to go from a blank page to a fully realized, pixel perfect mockup faster than anyone I know. I've taught a good number of people how to do it and I figured I would begin to document all the tips and tricks I've developed over the years.

I hope that you find this information useful and welcome any feedback on how I can make it more useful or clear and welcome any questions you may have.

Trending Blogs

Recently Viewed Blogs

UI Mockups with Adobe Photoshop