Vector vs. Raster

A smart object is basically a vector object inside Photoshop’s (mostly) raster world. If you don’t know the difference between vector and raster, a basic rundown goes like this;

Vector images are created by using calculated lines. This essentially means that the curves, shapes, lines, et cetera are displayed as a result of a lot of calculations on the part of the program you are using (in this case, Illustrator and Photoshop). It’s kind of like an extended version of what you learned with point-plotting, sine waves, and function graphs in geometry, mixed with colors and transparency values.

Raster images are basically plots of color on a pixel map. This means that each pixel in your image is assigned a color, and depending on what kind of file, sometimes an alpha value.

If this still doesn’t make sense, the best thing to remember is basically that vector images can be blown up or shrunk to any size and will not lose quality; a raster image will lose quality if blown-up above its original size. Vector, thus, is the preferred format for logo design and typographically based design. However, vector images are somewhat limited in their ability to be manipulated in Photoshop. Be sure to check out the last tip in the article for a possible workflow-based solution to this problem!

What is a smart object?

A smart object in Photoshop can be one of two things.

1. A version of a raster layer that doesn’t lose quality when it is transformed down and then back up
2. One or multiple vector lines/shapes/information

Today, we will only be dealing with the second variety.

Traditionally, vector images are created inside Illustrator; however, as many designers have found, it helps to be able to move from Illustrator to Photoshop fluidly. One of the easiest ways to do this is by using – you guessed it – copy and paste.

So, say we need a striped design we have created inside Illustrator for a design we’d like to finalize in Photoshop. What is an easy way to get it into Photoshop? Cmd or Ctrl + C, of course! With the document open, copy either with the copy keyboard shortcut (Cmd or Ctrl + C) or by going to Edit > Copy.

Switch to your active document in Photoshop and either use the keyboard shortcut for paste (Cmd or Ctrl + V) or choose Edit > Paste. You are given the option to paste with different forms. Smart Object is one of the choices. Make sure the radio button next to smart object is selected, and press OK.

You then have the option of transforming the object in the same manner as you would if you chose Edit > Free Transform. Here, you can scale, skew, etc.

Once you have made any transformations you’d like to make, press Enter to accept the transformation. In your layers palette you will see a smart object layer.

If you decide later that you’d like to change something about the object, simply double-click the layer thumbnail. This will open an Illustrator editing window. Once you have made any changes you’d like to make, choose File > Save and exit the window.

The Photoshop document will automatically reflect the changes.

Tip: It helps to duplicate smart objects up front so that if you decide to use any kind of filters or warping on the layer that requires you to rasterize it, you will have a copy of the original vector object. An easy way to duplicate layers is to first select the layer you’d like to duplicate, then press Cmd or Ctrl + j. After doing this, you can place it in a folder, such as the “Originals” folder below, along with any other layers you’d like to preserve the original version of. This is mostly effective when using effects or filters that “destroy”, or change the value or location of, the actual pixels in the layer.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

One of the easiest ways to create a color state is to use an adjustment layer in Photoshop. In basically one step, you can create great looking buttons for your interface!

Let’s get it done.

Open your color button in Photoshop. It is important that your button has a transparent background; you will likely be opening a png image unless you have a layered PSD file. If you do have a layered PSD file, it would be easier to put the button layers into a layer folder.

Next, click the “Create a New Fill or Adjustment Layer” button at the bottom of the Layers Palette. This will give you a flyout menu with multiple options, some of which you may be familiar with from the Image > Adjustments menu. For this tutorial, we will select the Hue/Saturation option.

Adjust the settings in the Hue/Saturation window (the screenshot is of Photoshop CS4, but the options are very similar in other CS versions) until you are happy with the result. I’ve chosen to desaturate the button entirely, and add a bit of lightness into the button (value for saturation: -100; value for lightness: +20). These aren’t the only settings possible, of course; perhaps you only want to desaturate the button slightly, or even just add lightness? This is the place where your discretion is in play.

So your final result will look something like this if you chose the options suggested.

The Best Part is…

But wait! It gets better. There are a few perks with using this technique. Adjustment layers are non-destructive; this basically means you can always change your values later if you don’t like the result. This also means you always keep the original button underneath the adjustment layer.

Also, you can always drag adjustment layers between multiple Photoshop documents; you can even take all of your buttons and place them beneath a single adjustment layer in one Photoshop document, and voilà! You’ve created another button state for all of your buttons with just one layer. From there, all you have to do is save as a PNG with transparency, and you’re set!

We could go on, but…

There are a million things we could say about adjustment layers in Photoshop, and how effective and time saving they are; but hey, we’re trying to get this done in three minutes, right? Don’t worry, you can always come back for more FYI tips in the future. Follow use on Twitter for the latest information!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

1. Steal Some Color

Sometimes, you want to take color from something that isn’t inside Photoshop. Perhaps you like a certain color scheme in another application you use, or even a specific color you find in a picture on the web. Sure, you could take a screenshot of the app or the browser window and open it in Photoshop; but why would you do that when Photoshop can read color no matter what application you are using? To steal color from, say, kuler.com quickly and easily, follow these steps.

1. Create a new document if you do not already have a document open.
2. Open the color picker by clicking the foreground color (bottom left)
3. Make sure that the window that has your target color is visible behind Photoshop’s open window
4. Click inside the open Photoshop document and, while holding the mouse button, drag out of the Photoshop window to the target color.

See the illustration below for the technique described.

2. Enlarge Layer Panel Thumbnails

I’ve been using Photoshop for years, and for years I have wanted to know how to increase the size of the tiny little layer thumbnail representations in the layers palette. This in particular is important for being able to see a layer mask. I never took the time to look it up, but I finally took the time to figure it out when I (inevitably) got frustrated with it. Hey, we love Photoshop, but sometimes… there’s a few flaws there. (Sorry Adobe. No one is perfect.) It’s oddly quite a simple little setting tweak, but one that will save me (and hopefully you) a lot of upsetting effects that result from tiny-thumbnail-stress-syndrome.

What you do:

1. Open the layer palette.
2. Click the flyout menu on the right side, and choose “Panel Options”
3. Click the radio button next to your desired thumbnail size
4. Press Ok

3. Make Selection from Alpha Information of a Layer

This one may be the fastest of them all. Maybe even two minutes. Or really, as long as it takes for you to make a click. That’s how long it takes to make a selection from the alpha information of a layer in Photoshop.

For those of you who are unfamiliar, alpha deals with the amount of transparency of a given pixel. So, a pixel’s information includes both color (for screen, RGB) and alpha (a). This is where we get RGBA images from. Saving as a PNG allows you to preserve the alpha information of an image created in Photoshop.

So, how do you do it?

It’s as simple as CMD+Clicking on the layer’s thumbnail (or CTRL+Click for PC’s). This simple shortcut gives a marquee around whatever alpha information is held within a given layer.

Conlusion

We hope that you have enjoyed this first installment of Three Minute Tips. This will be (affectionately) hashtagged as 3MT in the future, in case you want to make sure you don’t miss out on any future Three Minute Tips! As always, we would love to hear your feedback. Do YOU have any three minute tips to share of your own? Let us know!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

In this tutorial we’re going to recreate the nav bar for the iTunes Store in Photoshop CS4. The techniques used should be able to be done using CS2 and 3 so if you don’t have the latest Adobe Creative Suite you can still follow along. At the end of the post you will find a downloadable zip file containing the completed PSD.

Let’s start by creating a new document 600px by 150px.

Next, create a shape layer that’s 600px wide and 24px tall. This will serve as the base of our nav bar. Name this layer whatever you want, but for this tutorial I named it, “nav-bar-bg”.

Now we want to apply some layer styles to “nav-bar-bg”. Start with the “Gradient Overlay” using the settings from the image below.

The colors we want to use are “1e1e1e” for the left (bottom) color and “202020″ for the right (top) color.

Leaving the Layer Style palette open check the box for Inner Glow. Use the settings from the below image and change the color to “4e4e4e”

Lastly, with the Layer Style palette still open check the Stroke and change the settings to what you see below with a color of “101010″. Now apply this style by clicking “OK” or just hit “Enter”.

Now we’ll move on to the glossy highlight. Create a new shape layer above nav-bar-bg that is 600px wide but this time only 11px tall.

TIP: You could duplicate the nav-bar-bg layer by selecting the Layer and hitting CMD/Ctrl+J which will create a copy of that layer above. Then you just remove the styles and transform it to the correct size.

Now rename this layer, “highlight” and nudge it 1px down from the top of the base.

To give the highlight that glossy shine, we’ll apply a Gradient Overlay setting both the top and bottom colors of the gradient to white. This time we’ll be adjusting the gradients opacity which we do with the top “ticks”. Changing the left (bottom) of the gradient to 50% opacity and we’ll leave the right (top) at 100%.

With the Layer Effects dialog box still open, we will adjust the “Fill” and “Opacity” of the overall settings. Changing the “Opacity” to zero and set the “Fill” at 14% (or so).

The end result should have your document looking like this.

Our next task it to create the inset dividers that go between each of the links. First we need to create a new layer, no need to name it yet. To create the 1px thick line you could use the Line Tool and set the width to 1px, but there is always some aliasing on the shape and it’s not a perfect 1px line so, we’re going to use the Marquee Tool and change the style to a fixed size of 1px wide and 100px tall as seen below.

Now fill this layer with white and then deselect by hitting Cmd/Ctrl+D.

TIP: If you ever need to fill with either Black or White the quickest way is to hit "D" on your keyboard, this will put the foreground and background color to its default state and then hit Cmd+Delete (Mac) and Ctrl+Backspace (PC) to Fill with Background (white) and Opt+Delete (Mac) and Alt+Backspace (PC) to Fill with Foreground (black).

Now that we have the 1px white line, we need to create the shadow of the inset. To do this we’ll duplicate the white line. We’ll use the "Duplicate Layer" tip we learned earlier. With the white line selected hit Cmd/Ctrl+J. Now you should have an exact copy of the white line in the layer just above the original.

Next we need to change this line to black and we do this by hitting Cmd/Ctrl+I (Invert) and we nudge this line to the right by 1px.

Our next step is to change the opacity on both of these lines so we’ll set the Opacity of the White Line to 20% and the black line to 50%.

TIP: Did you know you can change a layers opacity in increments of 10 by hitting the number keys 1 through 0 with the Select Tool (V) active? 1 being 10% and 0 100%.

After we’ve set the opacity on both of the lines let’s merge them together by highlighting both layers and hitting Cmd/Ctrl+E. Now we can rename this layer to "divider"

By now you might be wondering why these lines are way longer than they need to be. Well let’s get into that right now shall we?

Since we’re going to be using this inset divider quite a few times, and you may have made, or may want to make your nav bar deeper than we did in this tutorial, what we’ll do is create a mask that’s the same size as our base and will hide all of the overlapping bits.

With the divider layer selected we create a group by hitting Cmd/Ctrl+G and we’ll name this group, "Dividers"

This next step we’re going to create a mask on the “Dividers” group layer that is the exact size as the nav-bar-bg. So, with the "Dividers" Group as the active layer we will Cmd/Ctrl+click. This will give us a selection in the shape of nav-bar-bg, but on the group layer "Dividers".

With the group layer, “Dividers” selected we create a Layer Mask by going to Layer > Layer Mask > Reveal All.

Now hit Cmd+Del (Mac) or Ctrl+Backspace (PC) to fill the selection and hit Cmd/Ctrl+D to deselect. But wait!! The divider is missing over the base and the naughty parts are hangin out all over the place!! No problem, a simple Cmd/Ctrl+I to invert that mask and viola! We have a perfect height divider.

Now that our navigation bar is looking pretty good, all we need is some text, some icons, and some more of these dividers separating them. We will go through these steps fairly quickly since I’m sure you’re itching to get started on your own version of this nav bar.

So let’s get our text in there first. The font I found that most closely matches the iTunes nav-bar font is Tahoma 11pt bold, with a kerning of 10 and the anti-alias set to "Crisp". Let’s type some link names in and change the font to these settings.

Next we’ll add our dividers between each of our links. With the "divider" layer selected drag the divider while holding down Opt/Alt+Shift and moving it into place.

Opt/Alt will drag a copy and adding the “Shift” key locks the object on it’s vertical or horizontal plane.

The last step is to add our "Home" and "Left/Right" icons. We’ve supplied our own home and arrow icons in the download for you to use any way you wish, or not at all, but I will show you how to style them. Let’s get to that now.

The "Home" doesn’t need any styling really but the arrows do. So if you’ve used the supplied arrows you can just follow along. But if you created your own here’s how we’ll dress them up.

We set the color of the arrow to "6F6F6F" and add an Inner Shadow with the settings below.

That’s it! We’ve created all the elements needed (sans home icon) and styled them all to look like the Apple iTunes interface.

I really enjoyed creating this tutorial and hope you enjoyed reading it. I’d like to think that you not only learned how to create this interface but that you will be able to apply some of the techniques we used in other designs you create.

Download the Finished PSD Here.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

A lot of us know how to find great textures and throw them into Photoshop and set the layer blending mode to overlay.

But sometimes, this doesn’t give the desired result. In this particular instance, the color in the texture is causing the color in the main composition to look a little off from what I had intended it to look like. The texture itself isn’t having as much of an effect as I’d like for it to on the edges of the composition, but I don’t want it to affect the middle as much either. Also, I’d like it to be a bit more grainy.

All of these things can be achieved right inside Photoshop. To fix the color issue, the first thing we need to do is desaturate the texture. (Shortcut: Cmd/Ctrl + Shift + U)
This removes all hue properties, and leaves only luminance (grayscale) properties.


Now, we want the image to have more of an effect on the edges of the main composition. What we want to do is increase the contrast of the texture in its original form, but also keep another less contrasted version. (We will get to how to make the edges more affected after we bring the texture over onto our main composition.) First, we want to duplicate our layer (Shortcut to duplicate layer: Cmd/Ctrl + J) twice, and delete our background layer. We can name these two new layers “contrasted” and “flat”. Then we will apply Curves to our “contrasted” layer. Make sure this layer is on top, or else you will not see the effects of Curves. (Shortcut for Curves: Cmd/Ctrl+M) The amount of contrast you use will depend on your project, but I usually like to keep quite a bit of mid-tones in textures I use. (See the curve created for an idea of how to increase contrast with Curves.)

We now have our original desaturated texture and our higher contrast texture. we can bring these layers over to our main composition. Select both layers by holding Shift or Cmd/Ctrl and clicking. Now drag from the layers palette of the texture composition into the main document composition.

One of the first things we want to do at this point is make both of our texture layers smart objects. This basically will allow us to scale them without doing irreversible damage to the resolution.

Next, we want to set both layers to overlay for the time being, and turn off the “flat” layer. We can immediately see the difference that adding contrast has made. But again, we are looking for the texture to be a bit more grainy, so we are going to scale down the “contrast” layer so that more detail can be seen. Transform the layer, and zoom out until you see the edges of the texture. This could mean zooming out quite far, depending on how high resolution your texture is. Holding Opt/Alt + Shift, you can scale the texture layer towards the middle. You then can zoom in and take a look at how the texture is affecting the composition before you accept the transformation. Once you are satisfied with the look of the texture, press Enter to accept the transformation.

We will now add a layer mask in order to remove some of the texture from the center of the composition. Unlink the layer from the mask by clicking the chain between the mask and layer. (This will allow us to move the texture beneath the mask if we decide we want to scale it again, etc).

Take a basic brush with a fairly low hardness between 10-20%, and set the foreground color to black. Make sure that the mask is selected, and paint in the middle of the composition to remove parts of the texture. If you remove more than you intended, simply change the foreground color to white and paint over that portion again to restore it. This stage is very subjective, and can’t really be covered step-by-step; the main idea here is that you can use the mask to create changes, but that also you can undo those changes if you need to.



Once you get the contrast texture the way you like it, turn off the layer for now. Turn on the “flat” layer. If it doesn’t seem grainy enough, scale it in the same manner as the contrast layer was scaled. This will be the texture we apply to the inner portion of the composition, so that it doesn’t look too “cold” in comparison to the higher contrast edges.

Now duplicate the layer mask from the contrast layer by Opt/Alt-Clicking and dragging it. With the layer mask selected, invert it. (Shortcut: Cmd/Ctrl+I)
Now turn on all layers.


The “flat” texture towards the middle is a bit too strong for what we are going for; change the opacity of the layer from 100% to 30-50%. Do the same for the “contrast” layer if it is too strong. This is based on taste as well.

Adjust the masks and opacities until your desired affect is achieved. It is better in most cases to use textures in a subtle manner rather than as strong as possible. In this case, I ended up bringing the opacity of both texture layers down even further, and adjusting the masks slightly. The final product again is a matter of taste; this article’s purpose is to show you the flexibility that photoshop offers with regard to textures; now, instead of simply dropping a grunge texture onto a file, you can refine your use of textures.

Other tips:

• Only use textures if it makes sense to use them. If the interface doesn’t call for grunge elements, don’t use them.
• Expand your texture library to include color-based textures, fabric and paper, liquid, wood, metal, grunge, lens blur, lights, and many of thousands of other textures by researching for free texture sites online. The texture used in today’s examples is part of Andrew Kramer’s Riot Gear, which you can find here. Other great places to get textures include Lost and Taken, Bittbox, and CG Textures.
• Don’t be afraid to create your own textures! Sometimes, you can’t find the best one to suit your particular project. Pull out that digital camera, or borrow your buddy’s, or use a scanner.
• Contact FYI through Twitter @fuelinterface if you have any questions! We love to help.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)