PSDCORE - Photoshop Tutorials

Shine Effects with Gradients

James — Tue, 07 Jul 2009 08:00:22 +0000

Firstly, what I mean by a shine effect is that glossy look, ie:

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 :)

Mastering the Preset Manager

James — Sat, 04 Jul 2009 08:00:38 +0000

Downloading the Preset

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

42 Awesome Abstract Photoshop Brushes

Aligning Objects

James — Thu, 02 Jul 2009 08:00:00 +0000

I only found out about how to easily align objects this year (embarrassingly) – I used to just align things by eye (or other complicated techniques) so hopefully you’ll be able to center stuff easily from now on :)

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.

Classic Shiny Button

Sleek Dark Button

James — Tue, 30 Jun 2009 08:00:28 +0000

Step 1

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.

Jumping on the Twitter Bandwagon at last!

James — Sun, 28 Jun 2009 05:05:10 +0000

Twitter Time

So I’ve joined twitter and posted my first tweet (I’ve been meaning to since last year). Be sure to follow me because it seems a bit lonely at first :( I have added the noteable web designers and developers (according to some sites) but I’m sure there’s more out there to follow.

General Update

Some of the more regular readers of PSDCORE would have noticed that I havn’t made many posts recently and that’s because I’ve been studying for exams ;) In the next few weeks I’ll be posting regular posts for you to read and will hopefully be able to continue doing so!

Twitter icon by Design Reviver

No related posts.

Framing your Web Designs in a Browser

James — Sun, 28 Jun 2009 03:16:50 +0000

Step 1

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.

42 Awesome Abstract Photoshop Brushes

James — Sat, 09 May 2009 05:34:34 +0000

No related posts.

Classic Shiny Button

James — Wed, 06 May 2009 08:22:08 +0000

Step 1

So firstly we are going to want to create a new document to create our button in. Go File > New and I’ve selected a size of 600 by 420 pixels to give us plenty of space. Also note that the resolution is set to 72 pixels/inch – this is the default for web designs.

Step 2

Now that we have our document, we want to have a dark background for our soon-to-come button. The easiest way to achieve this is to go Edit > Fill, using the colour #1a1a1a. Another method is to set your background colour to #1a1a1a and use the shortcut Ctrl + Backspace to fill the background with the background colour.

Step 3

The next task is to create the base of the button – the general shape of it. We’re going to be using the rounded rectangle tool for this, so select it and set it to a fixed size of 500 by 75 pixels and raidus 10 pixels.

Step 4

Click somewhere in your document and this will insert the rectangle. We want this rectangle to be centered in our document, so select the move tool (shortcut V), select the entire layer (shortcut Ctrl + A) and using the icons at the top, center the layer. The colour of your rectangle might be black or white, we’ll sort that up in the next step – but the position should be like below.

Step 5

Now we’ll be adding a coloured gradient overlay to our button so it doesn’t look so… black or white. Right click the layer in the layer’s window and go blending options and go down to the gradient overlay style. To bring up the second window, you can click on the gradient, and then add the colours below.

Result;

Step 6

The next section of the tutorial is going to be focusing on how to create shadow layers to give the button some depth. On a new layer below the button select the brush tool with a soft brush about 65 pixels and 25% opacity. This first shadow is just going to run across from the bottom left to the bottom right of the button – so that you can see the bottom half of the brush.

Step 7

On another layer use the soft brush on a lower pixel setting – about 30 – and with an opacity of 40%, go over the original shadow. This is building up the shadow gradually to give more of a depth feel to the button. If you want you could add some more shadows and lighter sections around the button, but I won’t go into that for this tutorial.

Step 8

Now with in keeping with the theme of making the button as realistic as possible, we’ll be adding some shines and subtle gradients to the button. The first one involves us making a new layer above the button and adding a shine to the top half. To do this select the area of the button (shortcut Ctrl + Click the layer’s icon in the layers window), and using the rectangular marquee tool deselect (just like selecting except holding down the Alt key) the bottom half of the button.

Step 9

Select the gradient tool and with it set to white to transparent, fill the selection – start about four fifths of the way down and drag to the edge, this means it will fade out over the last fifth of the selection.

Step 10

Set the blend mode to Overlay and the opacity to 27%.

Step 11

We’re now going to be applying another shine layer to define the middle subtly. Using the technique in step 8, select the top half of the button and then fill with white (just like at the start of the tutorial, go Edit > Fill).

Step 12

Set the blend mode to Soft Light and the opacity to 17% for this new shine layer.

Step 13

Now we’ll be adding one last highlight to the button. On a new layer, select the area of the button and go Select > Modify > Contract by 1 pixel, and then Select > Modify > Border with a width of 1 pixel. This has made a one pixel border around the button, one pixel inside. Fill this selection with a gradient from white to transparent so you’re left with something similiar as to below.

Step 14

To make the highlight a little more realistic, set the blend mode to Overlay and opacity to 70%.

Step 15

The last step is to add some text to the button – so pull out the text tool and chuck some text in, remember to center the text just like we did the button at the start. The font I’ve used here is Myriad Pro, 30pt and the colour #543823.

Colours

If you don’t like orange, or want a different colour, you can easily change the gradient overlay on the button and the text colour.

Screenshot Focus Points

James — Sun, 01 Mar 2009 00:55:13 +0000

Step 1

First of all, we need to take a screenshot of something, I’m going to be taking a screenshot of PSDCORE. The easiest way to do this is to use an addon to your browser, if you’re using firefox, then I suggest using the FireShot addon. Alternatively you can use the print screen button on your keyboard, open a new document in Photoshop, and paste. If your screen is smaller, you won’t be able to see as much on the sides of the design (and vice versa), don’t worry about that.

Step 2

Now that we have our screenshot which is the size of your screen, we want to make it smaller, to do this go Image > Image Size. Because I want the end result to be 600 by 420 pixels, and later on we are going to be distorting this image, we need to have it a bit bigger than this – I have chosen a width of 700 pixels (and the height is automatically calculated).

Step 3

Thirdly, we are going to be creating the document to add our small screenshot into and add the effects to. Select all of the small screenshot (Ctrl + A) and copy it (Ctrl + C). Now create a new document 600 by 420 pixels, and paste the screenshot. You’ll notice that it doesn’t fit, and as mentioned before, that’s what we want.

Step 4

Now we are going to be distorting the image and putting it on an angle, to do this go Edit > Transform > Scale (Ctrl + T). You can now see the outline of the screenshot outside the document which is handy. Move the image to the center by left clicking in the rectangle and dragging.

Step 5

Right click your screenshot and go Distort, move the corners around until you get a desired effect (take a minute or two to familiarise yourself with the Distort tool if you havn’t done so before). Make sure that the outlines of the screenshot are all outside of the document, because otherwise you are going to have parts that are transparent/white (this is why we had a bigger screenshot that the document – to move it around).

Step 6

Now we are going to be blurring our screenshot, and then make our focal point clear. To do this, duplicate your layer by going Layer > Duplicate Layer (Ctrl + J). Now go Filter > Blur > Gaussian Blur with a radius of 2 pixels.

Step 7

To unblur our focal point, we are going to erase part of the blurred layer using the erase tool (making the clear layer underneath to be seen). Select the erase tool, and using a large soft brush with an opacity of 50%, unblur about 1/3 of the layer about your focal point.

Step 8

Now set the opacity of the erase tool 100% and erase in a smaller area about your focal point, this gives you a two-toned blur effect. To check out some more examples that you can do with this effect check out my last post on my favorite CSS galleries.

Simple Professional Logo

My Favourite 5 CSS Galleries

James — Mon, 16 Feb 2009 07:00:43 +0000

PSDCORE v2

PSDCORE - Photoshop Tutorials

Shine Effects with Gradients

Method 1

Method 2

Gradual Shine Style

Mastering the Preset Manager

Downloading the Preset

Opening the Preset Manager

Loading Presets

Exporting Presets

Renaming Presets

Deleting Presets

Aligning Objects

Aligning Objects in the Entire Document

Aligning Objects in a Section

Sleek Dark Button

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Jumping on the Twitter Bandwagon at last!

Twitter Time

General Update

Framing your Web Designs in a Browser

Step 1

Step 2

Step 3

Step 4

42 Awesome Abstract Photoshop Brushes

Classic Shiny Button

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Step 13

Step 14

Step 15

Colours

Screenshot Focus Points

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

My Favourite 5 CSS Galleries

Best Web Gallery

We Love WP

CSSTux

CSS Remix

FaveUP