There’s been a few people having troubles with removing pixels outside of say a shape when they apply a gradient. I’ve prepared an example for this quick tip:

Making the Selection

First we need to select our object. The quickest way to do this is Ctrl + Click the layer icon in the layers window.

Inverting the Selection

Now we need to select everything outside of our shape; invert our selection! You can go through Select > Inverse or use the shortcut: Ctrl + Shift + I (three keys at once).

Deleting the Selection

Lastly, hit delete and deselect (Ctrl + D). If you want to make partial deletions, around other shapes you want to keep, use the eraser tool.

Hopefully now it will only take second for you to get rid of those overlapping gradients and such.

Related posts:

1. Page Fold Effect
2. Simple Professional Logo
3. Badge Buttons

I’ll be creating a large icon to show off the details, but it’s more likely to be used at around 32 by 32 pixels.

Set up a new document: my size is 256 by 256 pixels. Display rulers (View > Rulers) and drag a line over to the center so we know exactly where it is.

Step 2

Select the Pen Tool (set on ‘paths’) and add three points. Make sure that the two on the left line up with our center line. Don’t be too concerned with the precise co-ordinates of these points as we will adjust them in the next step.

Step 3

Select the Convert Point Tool and move the points around if you wish. To form the curved shapes: click and drag the points. Two more points appear and you can now drag these to form asymmetric curves. The following three images are for each three points we made in Step 2. It may take a while to get the hang of the pen tool, so just play around with it for a while if you have time.

I’m sure you’ll come up with a better heart-shape than me, but you get the idea!

Step 4

Now we want to convert the outline to a selection: right click > make selection with no feathered radius.

Step 5

Fill the selection with red. We now want to make the other half so duplicate the layer, flip horizontally and move over to the left of our original. Finally merge the two layers.

At this point you’ll probably find that you don’t like the shape of your heart and want to adjust the pen points slightly. Undo (Ctrl + Z) your changes to get back to the Pen Tool stage.

Step 6

Now that we have the shape down we just need to add some finishing touches. We’ll start with adding a gradient overlay to our heart using layer styles. I’ve used a linear gradient from a darker red (#d43d2c) to a lighter red (#e7876c).

Step 7

Next we’ll add a radial shine: I used the radial gradient tool from white to transparent and set my layer style to soft light. Read my tutorial on Shine Effects to add gradients if you’re having troubles. Remove the excess outside the heart by following my Delete Outside Selection quick tip.

Step 8

Now we’ll add a couple of strokes to our heart (the pun may have been intended…). The first one is as a layer style: 2 pixels dark red (#d24e33); definitely just one pixel if it’s for a small icon.

The next one is from selection, Edit > Stroke 2 pixels white (#ffffff), and set that layer style to soft light and 80% opacity.

Step 9

Lastly we’re going to work on the outer glows and shadows. I’ve applied a light outer glow using layer styles. For the shadow, I’ve used the Elliptical Marquee Tool to select almost a straight line underneath the heart, filled with black (#000000) and then applied a Gaussian Blur (two pixels) with 15% opacity.

Last Words

It’d be unlikely to require an icon this large. If you scale it down it may lose ‘crispness’ because the image is pixel-based; but Photoshop does a pretty good job of this as you can see below. Alternatively you can create icons on illustrator if you require many different sizes of the same icon. This was my first time trying out creating icons, so I hope you learnt as much about it as me :)

Related posts:

1. Christmas Ball Decoration
2. Badge Buttons
3. Simple Professional Logo

One of the premium members suggested this tutorial. If you’d like to suggest a tutorial be sure to contact me :)

First off create a new document to house the search box (or add it to one of your existing designs). I’ve filled the background of mine with the colour #2e3033.

Step 2

Using the Rounded Rectangle Tool make a white rectangle with radius 10px and dimensions 200x40px. This will be where we enter our search terms. If you want help aligning the layers check out this tutorial.

Step 3

Using the text tool add in some dummy text. The font styling I’ve used is Arial, Bold, 15 pt, Sharp, #37393d.

Step 4

Now we’ll make a button for the search action. Using the same tool make a 80x40px rectangle.

Step 5

Apply this gradient overlay to the button layer.

Product:

Step 6

Add some text for the button. The font styling I’ve used here is Arial, Bold, 15 pt, Sharp, #ffffff with an outer glow of 30% #000000. I’ve also added another darker rectangle behind the search field and button and a radial gradient in the background. That’s the design part complete, now on to the design to html/Wordpress section.

Related posts:

1. Clean Two-Level Navigation
2. Professional Tabbed Box
3. Modern Web 2.0 Web Layout

First off, we need to make a new document; I’ve made a relatively small one for the purpose of this tutorial (600x420px) but yours will probably be for a web design (1000px or so wide).

To make the background less boring I’ve just added in some clouds (foreground and background colours: #33556e and #1e2a38) and applied a motion blur; both are accessible through the Filter menu.

Step 2

Now we’ll make the main, white bar. Select the Rounded Rectangle Tool with a radius of 10px and a fixed size of 550x65px (or wider if your web design wants it). The colour doesn’t matter at this point as we’ll quickly change that. You’ll most likely want it centered so check out this tutorial on aligning objects.

Step 3

Add an outer glow and a gradient overlay to this latest white bar layer.

Product:

Step 4

Chuck in some text with the text tool for your top level navigation. The font I’ve used is Arial, Regular (and Bold), 15pt, Sharp, #000000.

Step 5

Now for the second bar, using that Rounded Rectangle Tool again make a selection a few pixels shorter in width with a height of 50 pixels. Move this new bar layer underneath the white one (in the layers window).

Step 6

Apply these outer glow and gradient overlay settings:

Product:

Step 7

Lastly, add some text for the sub-level navigation (I’ve put in some links for the Tutorials pages). The font I’ve used for this is Arial, Regular, 15pt, Sharp, #7ca1bc. If you’d like to now learn how to code this into html/css then read this tutorial.

Related posts:

1. Clean White Navigation
2. Search Box
3. Dark Navigation Menu

The above is a picture of my computer setup with the final wallpaper. Notice that there is more than one picture used to fill that space and how the wallpaper takes into account the gap between my screens (see the mountain outline).

Collecting the Pictures

So you’ll need a few pictures of a landscape (or even just outside your house); they’ll need to be overlapping each other so we can connect them. I went on a tramp last weekend up near Arthurs Pass (it’s in New Zealand if you wanted to search for it) and took a few photos.

Open up Photoshop and create a document big enough to fit in all of the photos you want to merge comfortably. The size I’ve used is 8000×2000 pixels (the .psd files can get quite large, mine ended up at 155MB) with three 2048×1536 pixel photos.

Merging the Pictures

Now we want to move the pictures on top of each other so there is one continuous image.

Set the opacity of the layers to 50% and move them around until they overlap each other correctly. This part might take a while if there aren’t many distinctive lines on the landscape. You’ll need to zoom in for this step.

Set the opacity of the layers back to 100%.

Touch ups

As you can see in the picture above there are dark lines at the boundaries between pictures. To fix this we’ll select the eraser tool with a soft 200 pixel head and remove those lines by erasing the sides of the picture on the top (leaving the bottom one showing through).

Finding the Gap

We’re just about ready to cut it up into a series of wallpapers but first we need to find out how many pixels the gap between our screens take up so we can allow for it.

Take out a ruler (yes, in the real world) and measure the gap between your screens: take note of this. Open a new document (500 pixels wide should do) and make sure it’s at zoom 100% and the ruler is on (Ctrl + R or View > Rulers if it’s not). Using that ruler measure along the pixel dimensions on the document so you can find out the equivalent in pixels.

Forming the Wallpapers

Make a selection of the size of your screens plus the gap. My screens are 1920×1200 each and the gap is 130px so I made a selection of 3970×1200 (or you can use the same ratio and then resize later).

Copy the selection, open a new document, paste and then make a selection of your screen size on the left (1920×1200 in my case). Copy and paste this selection into another document and save it as left.jpg (or similar). Do the same for the right side and the middle if you’ve got three screens etc. Note how you’ve missed out the gap section(s); these are ‘lost’ pixels that won’t show up in your wallpaper.

Now you just need to set the new images as your desktop wallpapers. I use DisplayFusion for dual screen.

No related posts.

There are a couple of methods for achieving this: you can either select the area where you would like to apply the shine and fill with a white and then lower the opacity and/or adjust the blend mode or you could use the gradient overlay layer style which is a lot more easier to adjust and duplicate to other layers however it is difficult to have shapes so we’ll be exploring both methods.

Method 1

Start with the thing you want to add a shine effect to:

Select the area of where you would like to apply the shine to:

Fill the selection with white (Edit > Fill with the colour #ffffff).

Set the blend mode to Soft Light and Opacity to 50%. Depending on how harsher shine you’d like a different opacity and blend mode is appropriate so test out a few different combinations until something fits your needs.

Using this method, you can make whatever selection you’d like to apply a shine to – ie in the example at the start of this tutorial.

Method 2

This time we’ll be using a layer style, so with the layer you want to add a shine to selected, go Layer > Layer Style > Gradient Overlay and apply the settings below (the 50% refers to the posititon – one is on top of the other: ie the gradient changes immediately).

Result:

So this yields the same result, but you can also copy the layer style and then paste it to another which makes it easily duplicatable.

Gradual Shine Style

This effect will use a gradient from white to transparent rather than filling in the selection with white (this is only applicable to the first method).

Start with a box and select the area you want to apply the gradual shine to:

Using the gradient tool apply a linear gradient from white to transparent but start a bit below the top of the selection and drag down past the bottom of the selection slightly – this will make the gradient end a bit further than the selection: ie have a gradual shine.

Now you can set the layer’s blend mode to Soft Light and Voila, check out some of the related posts listed below for some applications of this effect :)

Related posts:

1. Christmas Ball Decoration
2. Classic Shiny Button
3. Badge Buttons

So you’ve found a great list of brushes and you’d like to use some in your designs. Firstly download the preset and if the downloaded file isn’t in the appropriate format (ie .abr for brush files) and is in .zip or .rar format, that means that you need to unzip that folder to get to the brush. My favourite program to do this is 7-Zip which is free. Below is a list of the file extensions for the available presets.

• Brushes: ABR
• Swatches: ACO
• Gradients: GRD
• Styles: ASL
• Patterns: PAT
• Contours: SHC
• Custom Shapes: CSH
• Tools: TPL

Opening the Preset Manager

To access the preset manager go Edit > Preset Manager.

Loading Presets

So if you wanted to import some brushes into Photoshop then you’d select the Preset Type: Brushes (click on the down arrow and then click on Brushes).

Now click “Load…” and search for your downloaded brush(es) and click “Load”.

Now that you have the brushes loaded you can click “Done” and select the brush tool and choose which brush you’d like to use :)

Exporting Presets

Say if you have a collection of brushes (or any preset) that you’d like to save as a set for backup (moving computers etc) or to share with others, go back to the Preset Manager and select all of the brushes you wish to export (shortcut: Crl + A for all presets) click “Save Set…”.

Choose a file name and click “Save” and voila you’ve got your own set of brushes or whatever preset set you created :)

Renaming Presets

To rename a preset, open up the preset manager and select the preset(s) that you want renamed and click “Rename…”.

Deleting Presets

Again, with the preset manager open select the preset(s) and click “Delete”.

Related posts:

1. 42 Awesome Abstract Photoshop Brushes
2. 42 Kickass Grunge Brushes

Aligning Objects in the Entire Document

Say you have some text that you would like centered (vertically and horizontally).

Because the section that we want the text centered in is the entire document; select the entire document (shortcut: Ctrl + A).

Select the move tool (shorcut: v) and at the top of Photoshop below the menu click ‘Align vertical centers’ and ‘Align horizontal centers’.

This will center your text vertically and horizontally like so:

You can use the same procedure to align it at the top, bottom or sides.

Aligning Objects in a Section

Now, if you wanted to align an object say in a box, then it’s quite similar to the method above.

Select the box you want the text aligned inside (Ctrl + click the layer’s icon).

Using the move tool align the text to where you want it.

This technique is quite useful when centering text in a navigation bar or centering objects in the middle of a wallpaper, image or anything else that needs centering.

Related posts:

1. Clean Two-Level Navigation
2. Search Box
3. Classic Shiny Button

First of all you’ll need to create a new Photoshop document – the size I’ve chosen is 600 by 420 pixels just like all my other tutorials – but the button will be considerably smaller ;) With that open, fill it in with a dark radial gradient (I’ve used the colours #131313 and #090909).

Step 2

It seems to be quite popular to add noise to backgrounds so I’ll just quickly teach you how to achieve that effect: with your background layer selected go Filter > Noise > Add Noise with Amount 0.5%, Distribution Uniform and Monocrhomatic ticked. It isn’t too noticeable on this dark gradual gradient but with lighter colours, and more distinct gradients, it would be more visible.

Step 3

Now it’s time to form the button: create a new layer and using the rounded rectangle tool (radius set to 5 pixels, width: 250 pixels and height: 40 pixels) create a rectangle in the center of the document. Any colour will do (I’ve used white so that it is easier to see).

Step 4

Next, we’re going to be applying a gradient overlay to our button using layer styles. Go Layer > Layer Styles > Gradient Overlay and apply these settings:

This gives it a nice shiny look with a result of:

Step 5

The next step is to add the text for the button which can be done using the text tool.

Step 6

The next section of the button is the little icon beside the text: I’ve used a slightly different font style for the down arrow to make sure it is clearly defined. If you didn’t know how to make a double arrow simply hold down the Alt key and type in the numbers 1, 7 then 5 – it’s just an ascii symbol short key – and then rotate using transform (Edit > Transform > Rotate or Ctrl + T).

Step 7

Now we’ll just make the background for the down arrow icon: using that rounded rectangle tool we used before, make an 11 by 11 pixels square with a radius of 2 pixels. Again it doesn’t matter what colour yet, we’ll be changing that very shortly.

Step 8

Apply this gradient overlay to our new layer in the same way we did with the button.

Result:

Step 9

The button isn’t standing out very much, so to fix that we’ll add a highlight underneath. To do this select the button layer’s area (ie Ctrl + Click the button’s icon in the layers window) – we do this because we want to have the same curvature of the button without too much effort.

Fill the selection with a reflected gradient with your foreground colour set to #95c622 and background #486e10. To do this: left click in the center of the selection and drag to one of the sides and release (ie it will reflect from where you start the gradient). Keep the selection (as I have).

We only want the highlight to be a couple of pixels high (ie: a highlight) so nudge the selection up two pixels by tapping the up arrow key (on your keyboard). You can now deselect your selection (Ctrl + D). Now we want to move the highlight below the button so nudge the layer down two pixels by tapping the down key while holding the Ctrl key.

Step 10

So that’s the button complete, to add a hover effect in Photoshop simply means that when your mouse is hovered above the button it changes slightly so that it is obvious that the user can click it. Create a new layer above the base button layer (the shiny gradient layer) and select the area of the button and apply a radial gradient from white (top) to transparent (bottom) in the selection.

To tone down the brightness set the blend mode of this layer to overlay and the opacity to 50%.

If you’d like to follow on with the coding of this button and create the rollover effect in CSS continue this tutorial here.

Related posts:

1. Classic Shiny Button
2. Sleek Dark Navigation
3. Simple Professional Logo

Firstly get out the design that you want to use, if it’s in a PSD file, an easy way to copy all the layers and compress them so that you can straight copy and paste is the short cut keys Ctrl + Shift + Alt + E (there you go, that might be your first four-key short cut – it comes in very handy when coding layouts ;)

The size of the browser window we’ll be adding the design to is 1024 by 686 pixels, so using the rectangular marquee tool (with a fixed size of these dimensions) select the design ready for a step later on.

Step 2

Now we want the frame of the browser to stick our design into, there’s a few online and the one I’ve chosen to use is at teehan+lax. I’ve chosen to use the Safari browser because it looks nicer even though I use FireFox :P But there’s also Internet Explorer in that PSD file too. If you’re using Windows and want to use the Safari frame make sure you have the Lucida Grande Font (another free download too). Copy the frame across to a new document (1200 by 840 pixels are my dimensions used) and edit the page name etc – and I’ve added a dark background.

Step 3

Flick back to your design that we selected back in step 1 and copy & paste it onto the browser frame. Using the move tool align it so that it fits perfectly :)

Step 4

If say you have some neat rollover effects (unlike mine) that you designed in Photoshop and want to display it with a cursor you can use the cursors provided in that downloaded PSD file and move it across to your link.

Related posts:

1. Modern Web 2.0 Web Layout
2. Widescreen Wallpaper from Merging Photos
3. Portfolio Web Layout