Photoshop Helper

6 Free PSD / HTML / CSS Templates

2009-06-18T12:01:00.001-07:00

Shape

From a long time we have been playing with the idea of creating a fusion design. Then we thought why not try a fusion between retro and contemporary design trends? Thus the 'Shape' template was born – an attempt to recreate the magic of the 70s while using a modern look. For this purpose we used typography and the Dahlia/Sunflower right in the centre to emphasize the retro look. The colour wheel behind the Dahlia/Sunflower is our view on changing times and colour preferences. Our love for nature shows through the entire design as we used a lot of green – in different shades, floral patterns and bamboo trees in the header.

That's with the design. Coming to the page elements, the header section shows links to 8 pages, a registration, login and bookmarking link. The header also has an integrated search feature.

We wanted to have a distinct background colour for the company description and thus used black to make it look prominent. Then there is a news section, an awards column and a portfolio section. If you are one of those designers who have just too many designs to showcase, you can upload as many designs as you want as wehave provided a number of pages for it. The footer shows links to 8 pages.

The template code is validated by W3C and also conforms to section 508 of the US Rehabilitation Act for Accessible design.

large fullscreen preview (.jpg)
live demo
download the template (.zip, PSD + (X)HTML/CSS)

Projection Template

This template incorporates the look and feel of graffiti art. You will see the header section with a wall as the background. We have used a bright shade of green as we wanted this template to exude a certain amount of freshness. If you are wondering what the wheel is all about, it's a wheel of latest projects/services by the company.

We have deliberately used a dark colour for the footer so as to make it conspicuous as it contains important information like latest projects worked on and the corresponding client testimonials. The template code is validated by W3C and also conforms to Section 508 of the US Rehabilitation Act for Accessible design.

large fullscreen preview (.jpg)
live demo
download the template (.zip, PSD + (X)HTML/CSS)

Artificial Casting Template

We have always seen the game of chess as a very powerful game which requires immense intelligence and presence of mind on the part of the players. These little figures, though inanimate, look very powerful and mysterious. We used their images for the template to represent their power and mystery. 'Artificial Casting' shows the chess pieces 'Knight' and 'Bishop' standing aloof to show their sophistication and a sense of mystery.

The template code is validated by W3C and also conforms to Section 508 of the US Rehabilitation Act for Accessible design.

large fullscreen preview (.jpg)
live demo
download the template (.zip, PSD + (X)HTML/CSS)

2 Breed Template

Nature has always fascinated us with its attractive and vibrant colours. The natural colour of fruits and vegetables is where we drew inspiration for the design of this template. Therefore, you will see that we have used tomato and kiwi to give the template a natural feel. We have placed two of the main sections of the page – 'Who We Are' and 'Latest Events' on these to draw the reader's attention to it instantaneously.

The right navigation shows links to 8 pages. We have also placed a box advertising the latest jobs by the company. Then there is a section which shows links to the latest blog posts. The links have rollover effect. We have used separate boxes for Ideas, Sign-up and Blog so as it to give them distinctive. Just below that you will find a newsletter sign-up box through which readers can stay updated on the latest activities on the website and by the company.

There is a Features section which enlists all the features of the services by the company. Beside that you will also find a Member Login box and a contact number for quick contact. To balance the light colours usage, we have used a dark colour for the footer which shows 8 links.

The template code is validated by W3C and also conforms to Section 508 of the US Rehabilitation Act for Accessible design.

large fullscreen preview (.jpg)
live demo
download the template (.zip, PSD + (X)HTML/CSS)
2 Breed Joomla Theme Release

Dusky Template

This template titled 'Dusky' is an illustration of the twilight which is our favourite time of the day. It is a time when the sky shows different hues of colour in a peaceful and serene setting. The sky bustling with chirping birds is also a treat to watch. We tried to replicate this beautiful part of the day in the template by using light shades of blue, green, and yellow and pictures of birds and sky.

The left navigation of the body area shows a User Login box and a Portfolio of projects. The users can browse through all the projects by clicking on Next. The right navigation provides information about new services and a Quick Contact box wherein users can enter their name and email ID to contact instantly. The central area provides a brief overview of the company.

The template code is validated by W3C and also conforms to Section 508 of the US Rehabilitation Act for Accessible design.

large fullscreen preview (.jpg)
live demo
download the template (.zip, PSD + (X)HTML/CSS)

Solitude Template

In this hustle bustle of life, we are always surrounded by people and our responsibilities and often long for solitude. This template, titled 'Solitude' depicts this reality of life. Solitude or quiet time has often been regarded as a blessing as this is the time when we think deeply, feel rejuvenated, and have our minds brimming with bright new ideas. If you are thinking that I am taking you on a spiritual realm, you are right! This is our intention through the template titled 'Solitude'.

The header section shows a bird perched on a branch and looking upwards as if looking for inspiration. This is us, the designers who are always looking ahead for new ideas, inspiration and of course solitude! We used light colours and abstract art to complement the theme of the template.

The body shows a short description of the company, the services provided, and a testimonial column. The services column also shows the related icon. The right navigation shows a preview of photos by the company, a Quick Contact box, and Links to Projects completed.

The template code is validated by W3C and also conforms to Section 508 of the US Rehabilitation Act for Accessible design.

large fullscreen preview (.jpg)
live demo
download the template (.zip, PSD + (X)HTML/CSS)

(Refered From www.smashingmagazine.com)

Adobe Photoshop Files

2009-05-01T03:32:00.000-07:00

Yellow Smilie

Glossy Smilie, this one is made just like the Glossy Orbs file that you find on this page, this one has an extra layer that represents the eyes and mouth, the others are background color with inner glow effect and a layer (white to transparent).

Glossy Buttons

Glossy buttons made with Adobe Photoshop, some techniques/effects used are color overlay, inner glow, white to transparent overlay.

Glossy Orbs

Glossy Orbs made with Photoshop. The images are made of 2 layers, one that represents the color and with an inner glow and the other layer is a white to transparent gradient (the light), this file can be used as starting point to create buttons, smilies or other objects.

PSD Buttons

Different button styles made with Adobe Photoshop, most psd buttons have a glossy plastic look. One way to use these buttons is to change text in them then merge all layers, crop the area that represents the button and save it as gif or jpg.

2 Color Pill

Colored pill made with Adobe Photoshop, transparent layers, like most of the glossy graphics the lower light is a white to transparent gradient with layer type set to 'overlay'.

Sigma Sport

Sigma Sport BC 1200 bike computer, the object is made with Adobe Photoshop, LCD and all items are placed on separated layers, most of them have 1-2px bevel styles, some of them are made with drop shadow but overall it is made by layers styles only, without other effects or techniques.

Aqua Button

Aqua button made by a tutorial, it contains some overlayed layers, blur effects, inner glow, drop shadow.

Original Source : www.adriantnt.net

Compare Photoshop CS4 editions

2009-04-19T07:46:00.000-07:00

Overall product features	Photoshop CS4	Photoshop CS4 Extended
Revolutionary new features, a fluid user experience, and improved access to the unrivaled power of Photoshop	yes	yes
A more intuitive user interface and new nondestructive editing features that put you in control, including the new Adjustments and Masks panels	yes	yes
New and revolutionary Content-Aware Scaling, advanced auto-blending that extends depth of field, and industry-leading editing and compositing with reengineered color-correction tools	yes	yes
Significant productivity enhancements that provide increased flexibility and enable you to leverage the power of today's faster graphics processors	yes	yes
Breakthrough 3D editing and compositing capabilities and improved video controls to dramatically expand your creative options	no	yes
Comprehensive image analysis with enhanced measurement and counting tools, as well as support for DICOM images and MATLAB processing routines	no	yes

New and enhanced features	Photoshop CS4	Photoshop CS4 Extended
Unrivaled editing
Adjustments panel for live, nondestructive image adjustment	yes	yes
Masks panel for creating editable, feathered, density-controlled masks	yes	yes
Content-Aware Scaling	yes	yes
Enhanced auto-blending of images	yes	yes
Enhanced auto-alignment of layers	yes	yes
360-degree panoramas	yes	yes
Extended depth of field	yes	yes
Better raw image processing	yes	yes
Enhanced expert retouching	yes	yes
Increased productivity
Smoother panning and zooming and fluid canvas rotation	yes	yes
Industry-leading color correction with reengineered Dodge, Burn, and Sponge	yes	yes
Efficient file management with new Adobe Bridge CS4	yes	yes
Tighter integration with Adobe Photoshop Lightroom®	yes	yes
Adobe Kuler™ for color harmony creation and sharing	yes	yes
N-up and multiple document view	yes	yes
More powerful printing options	yes	yes
Superior performance on very large images*	yes	yes
Multi-Touch support on Mac laptops†	yes	yes
Adobe Community Help	yes	yes
Breakthrough 3D, motion graphics, and image analysis
Direct painting on 3D objects	no	yes
Easy conversion from 2D to 3D	no	yes
Editable 3D properties (scene, materials, meshes, lights)	no	yes
High-quality output with new ray-tracing rendering engine	no	yes
2D and 3D image compositing	no	yes
3D object animation	no	yes
3D/video support	no	yes
New, high-performance, nonmodal 3D engine	no	yes
Volume rendering	no	yes
Single-key shortcuts for editing motion graphics	no	yes
Preview and export of audio content and frame comments	no	yes
Quantitative data extraction	no	yes
Enhanced Count tool

Download History Of Photoshop

2009-03-01T07:50:00.000-08:00

History Of Photoshop

Download

Destructive Black and White Lettering with a Dramatic Splash Effect

2009-02-24T11:18:00.000-08:00

Final Image Preview

Step 1

Let's reset the colors to default. First thing you need to do is hit D on the keyboard to make the colors change to black/white. Now create a new document of 1400px width and 1000px height, and let's say a resolution of 300 px/inch

Make a new layer and name it "Lust." Grab the Paint Bucket Tool (G), change your Foreground Color to black, and fill the background with it. Then change the color to white, grab the Type Tool (T) and create text in the middle of the image. As a font, I used Trajan Pro with the font style set to Bold.

Step 2

Let's take care of the text. We need to add a touch of depth to it. Go to the "Lust" layer's Blending Options and use the settings shown below.

Step 3

Create a new layer below the "Lust" layer, name it "Back stars." Grab the Paint Bucket Tool (G), change the color to black and fill this layer. Next go to Filter > Noise > Add Noise. Set the Amount to around 12% and the Distribution to Gaussian, also check Monochromatic. Next, select Image > Adjustments > Levels, and make half of the dots blend in.

Step 4

Create a new layer above the "Back stars" layer. Switch your color to white, grab the Brush Tool (B) with Hardness set to 0% and Flow to 18%. Then make a few dots behind this type. Next, open this splatter image in Photoshop, left-click twice on the layer to unlock the background. Go to Image > Adjustments > Invert, to make the splatter white. Next, apply Filter > Blur > Gaussian Blur with a Radius around 50px (not more).

Now when you drag this "Back blur" layer into our main project and change its Blending Options to Screen, the dark colors will almost totally vanish, and won't disturb our illustration. So make around two duplicates (Command + J) of this layer, place it somewhere behind the text, and lower their Opacities somewhere between 10-20%.

There might be some bad looking parts with this blurred splatter. So help yourself with the Eraser Tool (E) with Hardness set to 0%, and Flow of 50%, and erase something if it's necessary.

Step 5

Drag the "Blur back" layer again to our project document. Lower its Opacity to somewhere around 10% and place this layer below the "Lust" layer in the Layers Palette. Duplicate it four times (Command + J), and place each one in all four image corners. Now grab Smudge Tool (R), set the Strength to around 50-60% and smudge these four layers to make them look foggy.

Step 6

Now, find some messy splash/scratch black and white images. You can use the same one as I did. Open it in Photoshop (do not drag it to project document yet) and go to the Channels Palette. While holding Command, left-click on the "Gray" channel's thumbnail, this will load the pattern selection. Next, go back to the Layers Palette and create a new layer.

In the channels palette we loaded the selection of the white area, but we want the black stains to get selected. So now hit Command + Shift + I to inverse the selection. Grab the Paint Bucket Tool (G), change your Foreground Color to white and fill the selection. By now you should have something looking similar to the fourth image below.

When you're done, hit Command + D to deselect the selection.

Step 7

Drag this stains layer to our main project and name it "Back stains white." It's important to place this layer above the "Back blur" layers. Now resize it down using Edit > Free Transform and rotate Edit > Transform > Rotate. Now change its Blending Mode to Overlay and lower the layer's Opacity between 50-90%. The opacity level is up to personal taste.

Now using Command + J, duplicate this layer a few times and position it as you like. Also, play around with those layer opacities. Help yourself with the Eraser Tool (E) with Hardness set to 0% and Flow around 40%. I erased some stains that bothered me.

And to achieve a better result, you can repeat Step 6, but this time color the selection with black, name this layer "Back stains black" and repeat the same process - making the background even more messy (look at the fourth image below).

Also, notice that the Overlay Blending mode in the "Back stains white" layers works only when you place them in non-black spots, so position those layers on gray blurred background. But the Blending Mode in "Back stains black" can be set to Normal, as it makes no difference in this case.

Step 8

This step is something not necessary, we will add a text gloss. It sometimes works good when text is more visible or shattered. Anyway, create a new layer, name it "Text gloss." Grab the Elliptical Marquee Tool (M) and draw the ellipse. Next, select the white color, grab the Gradient Tool (G), set the gradient to Linear, and the preset to Foreground to Transparent. Drag the gradient from top to bottom. Hit Command + D to deselect.

Now hold Command and left-click on the "Lust" layer's thumbnail to load its selection. Go to Select > Modify > Contract. And if your text is similar to mine, type 5 pixels. The amount of pixels depends on text thickness, the thicker it is, the more pixels you need to contract, to make the gloss look good. OK, next go to Select > Inverse and hit Delete on the keyboard. Finally, grab the Eraser Tool with Flow set to 30% and Hardness of 0%, and erase some bottom parts of this gloss.

Remember to play around with the "Text gloss" Opacity, lower it down to around 10-20%. When you're done, hold Command and select the "Lust" and "Text gloss" layers in the Layers Palette, and hit Command + E to merge them. Name this merged layer "Lust."

Step 9

Here we need to extract the splash from one-color background. So open this image, or select one of your own choice. For this step, I will refer to a technique that Nik Ainley used in his Mystic tutorial, in Step 8. It's a great way to get this done really quick.

Of course, you can extract this splash using the Pen Tool (P), if this is the technique you prefer. Either way is fine.

Step 10

After accurately cutting this out, drag this image to our main project document. Name it "Black splash" and resize it down just a touch (Edit > Free Transform). Then hit Command + Shift + U to Desaturate this splash. Go to Image > Adjustments > Levels, and darken this image a little. Next, increase the brightness and contrast using Image > Adjustments > Brightness/Contrast.

Step 11

Our black splash is now ready to rock. Create a group called "Black splashes" on the top of the Layers Palette. Drag the "Black splash" layer into it. Remember to keep this group above the "Lust" layer in the Layers Palette.

Important! before we make any operation on this splash, always remember to duplicate it (Command + J). It's good to have one splash backup - just in case. So make this duplicated layer invisible and name it "Splash backup." Hit again Command + J to create another duplicate and work on this copy.

Go to Edit > Free Transform and rotate this splash to find the most comfortable position with the letter L. The arrows indicate one splash piece that we will use as a base.

Step 12

Using Lasso Tool (L), draw a selection around the splash that we chose to start with. Go to Select > Inverse (Command + Shift + I) and hit Delete on the keyboard. This will do all the dirty work for you. Instead of erasing everything else with Eraser tool, we just organized our way to make this simple and clean. Now when you hit Command + D to deselect selection, you can see that we are left only with one splash. And this is the way we will fill this whole text.

When dealing with splashes, always help yourself with the Eraser Tool (E) set to 100% Hardness and 100% Flow. Get rid of parts that do not fit the letter (look at the third image below).

Step 13

As I mentioned before, you always need to have a backup of the layer that we used as a cover. In this case, we are using a splash all the time. So make another copy of your backup splash layer (the one called "Splash backup"), rename it to "Black splash" and play around again with positioning and rotating (Edit > Free Transform).

Basically, you have to repeat Step 12, as many times as you need. Create a little cover for the first letter. But do not cover it entirely, we don't want to create a mess. Take your time and add those splashes with precision.

The images below show my case when dealing with the letter L. I often got bad looking splash edges, and I helped myself with a hard eraser.

Step 14

Just not to get messy, remember to create a group for each covered letter, name them "L black," "U black"... etc.

Step 15

Before covering the second letter, pay attention to how the connections between the letters are being made. Try to make it look like a fluent transition. Choose splashes carefully, and resize them or reposition them as you need. But don't ever use Warp, the result might get blurry and fuzzy.

Try to make those splashes natural. In fact, there are something like ten smaller pieces of splashes here, but when properly positioned and edited, they look like one piece.

Step 16

While covering the second letter, try to use different positions, different splash sizes, and some new angles. I created the whole text, using only one splash image. You need to experiment and test what position and size fits the best. Keep the balance and don't overdo with splash covering.

Step 17

As you see, the connection between U and S is pretty hard to make. I experimented with some various splash positions and it still looked bad, so I left it for the end. And I took care of the S. It's a curvy letter, so the task wasn't easy. If you get such a complicated letter in your own lettering, then remember the key is to cut lots of small splashes and mix them with bigger ones. Small splashes fit the best in the curve spots.

Don't forget to help yourself with the Eraser Tool (E) with Hardness set at 100% and Flow at 100%. It's a life saver.

Step 18

There is only one letter left in my text. It's T, and as you can see, straight letters are easier to cover. Repeat the same process on the rest of your own text. When you're done, take a look at the covered typography. It looks good but still lacks something.

First of all, it bothers me that this text has only one color of splashes. Second, those splashes look flat (they do not surround the text). So let's pop them up, and give them some depth.

Step 19

Bring the original image of separated red splash in again. Hit Command + Shift + U to Desaturate it. Go to Image > Adjustments > Shadows/Highlights and give only values for the Shadows section. That is an Amount of 90% and Tonal Width of 100%. Then go to Image > Adjustments > Exposure, and you need to play around with those settings to get a good shiny, white result. Finally, touch it up with Image > Adjustments > Brightness/Contrast.

Step 20

Now we have a white splash. Name it "White splash." Now repeat the covering process with cutting and positioning it. Remember to make a backup of this layer first. This process is up to your personal taste, you can place this layer below or above the black splashes, try to find the best looking position. All my white splashes were below black ones, as I liked it more this way.

Step 21

While creating white splashes cover, I found a good way to make the connection between the U and S letters. And in my opinion it fits really nice. So, when you're making your own lettering design, always search for a new solution. And there is no better way than experimenting. Once again using small pieces, you can see that everything is possible.

Step 22

The variety of splashes has now a nice balance. But the image still lacks some depth. Instead of positioning those splashes behind the text, we'll take away some letter parts to simulate the depth. This will also give a more dramatic effect to the final outcome.

Now make a duplicate (Command + J) of this "Lust" text layer. Name it "Text Pieces," and hide this layer (simply make it invisible by clicking the eye icon). Select the "Lust" layer, add a Layer Mask to it. Change the Foreground Color to black, then grab the Brush Tool (B), and choose a nice grungy brush.

Since I'm not a brush fanatic, I mostly use standard Photoshop brushes. It's a good way to show you that you can create something cool without having professional equipment. So I chose "Spatter 24 pixels" and brushes looking like this one. Basically, the best brush to do such a thing is a hard one with lots of sharp details.

OK, now as we have chosen the right brush, select the "Lust" Layer Mask and paint with black to cover some straight text spots. Remember to keep the brush Hardness and Flow set to the max. The arrows shown below indicate some spots that I chose to erase.

Step 23

Now recall the "Text pieces" layer (make it visible). Grab the Move Tool (V), and move this text a little more to the bottom of the image, to better see what's going on.

We'll work on the "Text pieces" layer. So grab the Lasso Tool (L), select each letter separately and while holding Command drag them a little, or rotate using Edit > Free Transform. After editing each letter hit Command + D to deselect the selection. Finally, grab the Move Tool (V) again and move this text back to its original place. Remember this technique, you're gonna use it in next steps to shatter this text.

Step 24

Now let's destroy the "Text pieces" layer the same way as the "Lust" layer text. But this time do not use a Layer Mask, instead of it, use the Eraser Tool (E) with max Hardness and Flow brushing, and just paint on the layer to erase. Choose the some grungy eraser brush (in the first image below, I point out a few brushes you may find useful). Then get rid of some parts of the rotated letters.

After erasing, go through the same process as in the step before, but this time apply it not to the whole letters, but to selected areas of the letters. So grab the Lasso Tool (L), select each letter piece separately. Next, while holding Command, drag them a little, and rotate them using Edit > Free Transform. After editing each piece, hit Command + D to deselect the selection. In the third image below, you get the idea.

This is a good way to create a destructive look, and the best part is that those shattered pieces have some nice depth. This is because they were created from styled and lightened text with a touch of 3D effect.

If something with the shatter applied to it doesn't look right, always help yourself with the Eraser Tool (E) with 100% Hardness and 100% Flow.

Step 25

This was the most important effect, when you get the splashes and shatter effect done, it's now heading to the finish line.

Let's add some fantasy to this image. Create a new layer above all, name it "Line." Change your Foreground Color to white, and make the brush size 1px big. Using the Pen Tool (P), draw a line across the whole illustration, right-click, and selected Stroke Path. Now duplicate (Command + J) this layer five to seven times. Next, position and rotate (Edit > Free Transform) those lines as you like. Also, play around with their opacities, make them fit in nicely.

Step 26

Create a new layer above all and name it "light." Select the Brush Tool (B) with a Hardness 0%, and a very low Flow. Also, select white for the color.

Now use quite a big diameter and make one lighted dot, as shown in the first image below. Then decrease diameter size slightly and make a smaller dot (second image below). Keep decreasing the diameter size and each time make a smaller dot. And finally make a tiny, little dot in the middle of this light to simulate the shine. You can click a few times to make it brighter (fourth image below).

When you're done make a few duplicates (Command + J) of this "Light" layer, position them wherever you like. The whole process needs to be created on one layer, do not create a new layer for each dot-brush, as it's a waste of time.

Step 27

Now, let's make the stars. Create a new layer above all, and leave it unnamed. Grab the Brush Tool (B) and change the brush settings to Flow 100%, Hardness 100%, and Master Diameter 1px. Make sure your Foreground Color is set to white. Now grab the Pen Tool (P) and draw line across the light. Next, right-click and select Stroke Path (make sure Simulate Pressure option is checked).

Now duplicate this layer (Command + J) and using Edit > Free Transform rotate it to create two crossing lines (second image below). Select those two lines in Layers Palette (hold Command and select each of these two layers), then hit Command + E to merge them. Name this merged layer "Star." And use Edit > Free Transform again, to resize it down. While resizing hold Command + Shift; this will allow you retain the perfect shape.

Step 28

Make a duplicate of the "Star" layer using Command + J. Name this copy "Blur." Go to Filter > Blur > Gaussian Blur, and add just a touch of blur. Now duplicate (Command + J) this layer seven to eight times.

Select all these duplicates in Layers Palette (hold Command and select each of these layers), then hit Command + E to merge them. Name this merged layer "Blur" again. Now go to Filter > Blur > Gaussian Blur and add more blur than previously, but not too much (third image below). Then using Edit > Free Transform resize down this blurred layer, to create a glow effect.

When you're done, go to the Layers Palette. While holding Command, select the "Star" and "Blur" layers, then merge them using Command + E. Name this merged layer "Star". Duplicate it (Command + J) a few times, and it's good to place it on every lighted spot (fifth image below).

Step 29

As a final touch up, I used the Type Tool (T) and typed on each line some thoughts connected with the main word, and gave each one a different opacity. After this, I felt like this illustration needs something more. So I went some steps back when we made the black splashes, and I used the same technique to create a new splash. To give the depth of field to this image I used one of the previous splashes and another one. I made them fairly big, and added a touch of blur (Filter > Blur > Gaussian Blur).

Conclusion

OK, so this is the first thing I came up with is the word "lust." Find something creative of your own and cover it with some expression. When experimenting with this, one idea will follow another, just focus on the word you're illustrating. Thanks for reading this tutorial. I really enjoyed making it. You can view the final image below or view a larger version here.

Designing Tips

2008-12-14T01:26:00.000-08:00

Logo Designing

From a Designers perspective - A really good logo takes time and thought to create. Its important to start by doing some serious googling before diving in. Checking out things that are related to the subject at hand. Once you have gathered everything possible - you can print out all you have....and spread it out nicely on a big board on your wall or something. We call this a mood-board.

It gets you in the mood - I guess.

You are now ready to start brainstorming for ideas - This creative process starts from now until something clicks. It can be done alone or with a team. The more people the more ideas. When alone - This process sometimes continues throughout the day - when you waiting for a bus, walking to the shop , or even in the shower . Yes, this can happen anytime. You should definitely have a pad of paper with you to jot down any good ideas that comes up.

Once you have all these beautiful ideas down in writing - its time to convert those to graphical sketches - something with shape and form .

From here - you can move over to Adobe illustrator and you're ready to put your graphics into vector format with all kinds of cool color combos and stuff - maybe a subtle 3d effect.

This is really the ideal situation for designing a logo. The longer you work on something you will be surprised how much better it with time. So when ordering a logo design or doing one yourself - remember that doing it right may cost more money because yes it takes longer...but results will be worth it.

Don't get me wrong - Some logos do happen over night - this is usually G-d given luck.

but it can happen.

photoshop clippingmask short cut

I dont know what category this goes in - but I would call it intermediate to advanced.

Scenario: Lets say you have a certain image on layer 2 - and now you want to create a adjustment layer over top of that in order to give that image (on layer 2) a certain effect. That is all good but one problem may arise - You may want that adjustment layer to effect only layer two BUT in reality it ends up effecting any layer which is beneath it also - which is a problem.

Solution A: 1. select the layer which is the "adjustment layer"

2. go to the "layer" menu at the top and select "create clipping mask". - voila! its done.

Now the fun short cut: instead of solution A you do the following:

place your mouse (cursor) in between the adjustment layer and the image you want to be adjusted -your cursor should be exactly on the line between the two layers in the layers panel. than hold down on ALT (at this time you should notice that your cursor symbol has changed from a hand to a weird circley thing) and while alt is being pressed - click down once.

boom. your done.

in order to reverse the effect (to undo it) you can do the same steps.

I am using photoshop cs2 - if anyone doesnt see the same occurances it is possibly because you are using a previous version.

thats all for today. I hope you can all learn new things from this.

Photoshop comes to life

2008-12-14T01:11:00.000-08:00

Art Snob Solutions

Then the final result is

How To Make A Photoshop Brush

2008-11-12T19:49:00.000-08:00

Size Limitations

If you want to make a brush that is “High-Res,” you will need Photoshop CS2+. In CS2 and CS3 you can make brushes up to 2500px in size. (height or width) In Previous versions like CS, 1000px is the limit. (and maybe much smaller for really old versions, I’m not sure).

Setup Your File

You all probably know that you can make a PS brush out of just about anything, so setting up your file correctly is key. Wether you are using a scanned image, a photograph, or whatever, you need to set up your Photoshop file in a way that will give you the best results for your brush.

Mistake:

It may be temping to have a file open and see something that you want to make a brush out of and do it on-the-fly within that file, but in order to make a brush knowing it is sized right, it’s always a good idea to make a separate file to make your brush.

Setting Up The File:

You may not need a high resolution brush, but what if you need the same brush to be larger 6 months down the road? It’s always a good idea to make your brush as large as possible in order to use it for other projects later. If you are in CS2 or 3, You can make your file 2500 X 2500px. If you are running a previous version of Photoshop, you will most likely be limited to 999px, if not less.

Color

You can use a color image to define a brush, but you might find it easier to convert your document to Grayscale in order to get a better idea of what to expect. When defining a brush preset, Photoshop will automatically convert your selection to grayscale to make the brush. White pixels will become transparent (which means you don’t have to erase the white/background pixels! Keep reading below for details), Black pixels will be opaque, and everything in between will be see-through black/gray.

Adjust Your Image

It’s only natural that your image may need a little tweaking before it’s brush-worthy. Here are a few adjustments you can make. (all found in the Image > Adjustments menu)

Levels

Curves

Exposure

Shadows/Highlights

Brightness/Contrast

The Secret About Brush Making

For the longest time I couldn’t figure out how people made such detailed brushes, and I kept telling myself that it would take way too much time to clip out the intricate shapes. Well, there’s a reason why even the novice Photoshopper can make amazingly detailed brushes. Like I said earlier, since Photoshop defines brushes based on a grayscale, there is no need to erase or clip anything! All you have to do is use the adjustments above (you may want to erase unwanted pixels here ands there) and everything that is 100% white disappears. White=Transparent, so put down that eraser or magic wand, and define your brush.

Define Your Brush

Once you get the right amount of contrast and black/white in your image, you’re ready to make a brush. Make sure you have the correct layer selected and do a “select all.” Command/Control + A. Now go to Edit > define Brush Preset.

Name your brush, and you’re done!

You should now see your new brush show up in the brushes palette. So? What are you waiting for? Start Brushing!

Create an Intensely Grungy Wallpaper

2008-11-12T19:45:00.000-08:00

Final Image

This is the final image that we’ll be creating:

Step 1

Open up a new document (1024X768px) and paste in a photo of a skateboarder.

You can find the original photo here: http://www.sxc.hu/photo/143913

Step 2

Now use your lasso tool to cut around the skateboarder, and then copy/paste him onto a new layer. Then do the same for his board, and copy/paste this onto a new layer also. Then merge the layer’s together. The image below shows the data on the merged layer, with the original photo hidden:

Step 3

Now return to your original photo layer, and apply a linear gradient overlay ranging from FDBE37 to D47300. Set the blend mode of the gradient to ‘hard light’, and the angle to 50 degrees. The image below shows the original photo layer, with the isolated skateboard layer hidden.

Step 4

Now find an old paper texture image. I used this one: http://www.sxc.hu/photo/1088062. Apply the paper texture over your photo, and then change the texture layer’s blend mode to ‘overlay’ and it’s opacity to 70%.

Step 5

Now make your isolated skateboarder layer visible again and apply a gradient overlay (gradient ranging from: 012544 to 010D16). Make sure that your blend mode for the overlay is ‘multiply’.

Step 6

Now duplicate your skateboarder layer and change your gradient overlay to a black color overlay (settings shown below). Then erase away parts of this layer using a large, soft eraser brush. Don’t erase all of the black overlay layer, but just enough to allow some of the dark blue layer show through.

Step 7

Now paste in one of the images from our Free Sunburst Set. Make sure that you paste the image onto a new layer above your original photo layer, but below your old-paper texture layer as you want the texture to be applied to this shape. Once you’ve done this, apply a red color overlay, and reduce the layer’s opacity to 20%.

Step 8

If you noticed in the last step, the sunrays overlapped the building and edge of the skate ramp in our photo. I want to create the effect that these objects are in front of the sun rays. To do this I select my sunburst layer and go to layer>apply layer mask>reveal all. Then I select around my building/skate-ramp and fill my selection with black. This will mean that any data within these areas becomes hidden. You can see the result of this in the image below:

Step 9

Now create a new layer below your isolated skateboarder layers and above your texture/photo layers called ’splatter’. Grab a free splatter brush (I used one from our roundup up of 40+ Halloween/Gore Themed Brushes). Select a nice grungy looking brush and set it’s color to black. Then apply it to the edge of your skateboarder. Keep applying different brushes, trying to achieve a melting kind of look.

Step 10

Now find a retro looking pattern online, I picked mine up from SquidFingers.com, a great resource for patterns and other freebies. Open the pattern image in a new Photoshop document and then go to edit>define pattern and choose a name for your pattern. Then return to your original document and duplicate your sunburst layer. Go to blending options for your duplicate and remove the red color overlay and apply a pattern overlay instead, using your newly created pattern. Be sure to make your pattern overlay’s blend mode ‘hard light’. Then reduce this duplicate layer’s opacity to 10%.

Step 11

Now find a photo of some clouds. I used this image: http://www.sxc.hu/photo/1099805. Paste it over your image, making sure to place the clouds over your sunburst layers, but below your texture layer. Then change the layer’s blend mode to ‘linear burn’. Finally to fade the photo gradually into the main background, apply a layer mask (reveal all) and then drag a black (100% opacity) to white (0% opacity) linear gradient upwards to mask off the bottom of your cloud image.

Step 12

Now find an image of some smoke and paste it into your document. I used this image: http://www.sxc.hu/photo/1073897. Rotate the image to fit over the chimneys on the roof of the house in your photo, (to rotate to go edit>transform>rotate and then manually rotate it). Then duplicate this smoke layer and fit the duplicate over the other chimney on your house.

Step 13

Now change both layer’s blend mode to ’screen’ and you’re left with just some white smoke, minus the original black background. Then use a large, soft eraser brush at around 25% opacity to erase the parts of smoke that cover up the chimney tops, and also erase the edges of the smoke so that it appears more natural.

Step 14

Now paste in an image of some tape onto a new top layer (I got an image from the Grunge Essentials Freebie Pack right here at PSDFAN). Then to make it darker apply the hue/saturation/lightness settings shown below:

Step 15

Now type some text over the tape, and rotate it using edit>transform>rotate.

Step 16

Now select each of your letters using the magic wand tool. Then with your selection still in place delete your text layer. Select your tape layer, and then apply a layer mask (reveal all). Then fill your selection with black to hide the areas of tape that follow the shape of your text.

And We’re Done!

I hope that you enjoyed this tutorial, and would love to hear your thoughts on it. If you appreciated the techniques that I’d love a Digg or Stumble :). Just click on the image below to view the full sized wallpaper.

Create a Delicious Green Apple

2008-10-20T07:02:00.000-07:00

Final Image Preview

Step 1

Create a new document using the settings shown below.

Step 2

Create a new layer and name it "Apple." Grab the Elliptical Marquee Tool, make a selection as in the below image. Next, grab the Gradient Tool, then pick Foreground to Background and set Style to Radial. Make your Foreground Color #88cc33 and Background Color #005522. Fill the selection as shown.

Step 3

Apply the Inner Shadow layer style using these settings: Blend Mode set to Multiply, Opacity at 75%, Angle set to -90 degrees, Distance set to 45 pixels, and Size set to 80 pixels.

Step 4

Create a new layer and name it "Texture." Command-click the "Apple" layer to load the selection, if the selection is not still active. Use the colors from step one and go to Filter > Render > Clouds. Next go to Filter > Distort > Spherize, and set the Amount to 100% and Mode to Normal. This will give our simple texture a spheric look. Set the layer Blending Mode to Soft Light. Now we have some texture on the apple.

Step 5

Create a new layer on top and name it "Dots." Get the Brush Tool and set the Foreground Color to #ccdd99. Also, set the Master Diameter to 5 and Hardness to 100, then create several dots by placing single clicks all around the apple.

Set the Master Diameter to 3 pixels and paint some more. Command-click the "Apple" layer to load the selection, if the selection is not still active. Go to Filter > Blur > Motion Blur, and set the Angle to 90 degrees and Distance to 3 pixels. Now go to Filter > Distort > Spherize, set the Amount to 100, set the Mode to Normal, and apply it. Set the layer Blending Mode to Overlay and Opacity at 50%. Hit Command + D to deselect.

Step 6

Create a new layer on top and name it "Dent." Grab the Elliptical Marquee Tool and make a selection, as shown in the below image, then fill it with white and Deselect. Create another layer and name this one "Dent Shadow." Make an elliptical selection, as in the image below, and fill it with black.

Alt-click on the line between the "Dent Shadow" and "Dent" layers in the Layers Palette. Deselect by hitting Command + D. This will define the "Dent" layer as a Clipping Mask for the "Dent Shadow" layer. Now go to the "Dent" layer in the Layers Palette and set the Blending Mode to Multiply.

Go back to the "Dent Shadow" layer and apply a Gaussian Blur filter with a radius of 17 pixels. Set the Layer Opacity at 75%. The size of the dent ellipse may vary in your document, so you can adjust the Radius of Gaussian Blur filter to avoid the visible top edge of the ellipse.

Step 7

Now we'll make some highlights. Create a new layer on top of the layer stack and name it "Highlight 1." Grab the Elliptical Marquee Tool and make a selection, as in the below image, and fill it with white. Now make a bigger elliptical selection as shown, then hit Delete to clear the selection. Deselect and go to Filter > Blur > Gaussian Blur, and apply with a Radius of 10 pixels.

Step 8

Create a new layer on top of the layer stack and name it "Highlight 2." Grab the Elliptical Marquee Tool and make a selection as shown, then fill it with white. Now make another elliptical selection as shown, then hit Delete to clear the selection. Also, don't forget the select and clear the white piece below. Deselect and go to Filter > Blur > Gaussian Blur, then apply with a Radius of 8 pixels.

Step 9

Now create a new layer below "Highlight 1" layer and name it "Black." As you can tell from the name, we are going to fill it with black. Now select "Black," "Highlight 1," and "Highlight 2" layers in the Layers Palette and merge them by hitting Command + E. Go to Filter > Brush Strokes > Spatter. Set Spray Radius to 6 and Smoothness to 14. Command-click the "Apple" layer to load the selection, go to Select > Inverse and hit Delete to clear. Set layer Blending Mode to Screen. Deselect.

Step 10

Create a new layer above the "Dots" layer, and name it "Red." Grab the Elliptical Marquee Tool and make a selection as shown, then fill it with the color #ffbe00. Command-click the "Apple" layer to load the selection. Go to Filter > Blur > Gaussian Blur and apply with a Radius of 50 pixels. Next, set the layer Blending Mode to Hue. Now, deselect by hitting Command + D.

Step 11

Create a new layer below the "Red" layer, name it "Yellow." Grab the Elliptical Marquee Tool and make a selection as shown, then fill it with the color #fff444. Command-click the "Apple" layer to load the selection. Go to Filter > Blur > Gaussian Blur and apply with a Radius of 50 pixels. Next, set the layer Blending Mode to Hard Light and Opacity at 75%. Deselect by hitting Command + D.

Step 12

Create a new layer on top and name it "Reflection." Grab the Rectangular Marquee Tool and make a selection as shown, then fill it with white. We'll make a window reflection out of this rectangle. So select two rectangular areas as shown, then clear them.

Step 13

Go to the Layers Palette and add a Layer Mask to the "Reflection" layer by clicking the Add Layer Mask button. Grab the Gradient Tool, set it to Linear Gradient. Fill the layer Mask with the gradient, as you can see in the below image.

The Layer Mask is selected at the moment, click the "Reflection" layer thumbnail to go back to the layer. Now, go to Filter > Blur > Gaussian Blur and apply with a Radius of 8 pixels. Go to Edit > Transform > Warp, and select Arc from the presets list, then set the Bend to -20%.

Step 14

Create a new layer on top and name it "Backlight." Command-click the "Apple" layer thumbnail and fill the selection with white. Make sure the Marquee Tool is selected, then move the selection about 10 pixels left using the Left Arrow key. Now, hit Delete to clear.

Command-click the "Apple" layer again to load the selection, then go to Filter > Blur > Gaussian Blur, and apply with a Radius of 7 pixels. Hit Command + D to deselect. Grab the Eraser Tool, then set the Master Diameter to 270 pixels and Hardness at 0%. Erase the lower part of the backlight, as you can see in the below image.

Step 15

Create a new layer and name it "Stalk." Grab the Pen Tool, set to Paths in the tools options. Draw a curve for the stalk of the apple. Now, grab the Brush Tool and open the Brushes Palette. Under Shape Dynamics, set the Dynamic Control for Size to Fade. Set the Steps for Size Fade to 70 and set Minimum Brush Diameter to 20%. Under Brush Tip Shape, set the Diameter to 14 pixels and Hardness to 100%. Now, set the Foreground Color to #884411.

Go to Paths Palette, open the Paths Palette pop-up menu (click the triangle in the upper right to open) and choose Stroke Path, set the Tool to Brush and hit OK. Click somewhere outside the path in the Paths Palette. Command-click the "Dent" layer thumbnail in the Layers Palette to load its selection.

Grab the Rectangular Marquee Tool, then while holding the Shift key, make a selection that covers the upper part of the stalk. Go to Select > Inverse, then hit Delete to clear the lower exceeding part of the stalk, and deselect.

The path you have drawn is stored in the Paths Palette as a "Work Path." It stays there until you draw another path, then the new path you draw will be your "Work Path." If you want to keep the existing path before you draw a new one, you can give it a name by double-clicking on the path. Thus you won't loose it when you draw a new one. If you want the path to disappear in your document, then go to Paths Palette and click somewhere outside the path in the Paths Palette.

Step 16

Create a new layer and name it "Stalk Highlight." Grab the Brush Tool and set the Master Diameter to 5 pixels. Set the Foreground Color to white. Now go to the Paths Palette, make sure Work Path is selected, open the Paths Palette pop-up menu, then choose Stroke Path, set Tool to Brush, and hit OK.

Command-click the "Stalk" layer thumbnail in the Layers Palette to load its selection. Go to Filter > Blur > Gaussian Blur and apply with a Radius of 1 pixel. Set the layer Opacity at 40%. Select the "Stalk" layer in the Layers Palette, then go to Filter > Noise > Add Noise. Set the Amount at 3%, set Distribution to Uniform, make sure Monochromatic is checked. Now, deselect by hitting Command + D.

Grab the Burn Tool, and using a soft brush (I set Master Diameter to 65 pixels and Hardness to 0%), make the bottom part of the stalk darker.

Step 17

Create a new layer below the "Stalk" layer and name it "Stalk Shadow." Grab the Rectangular Marquee Tool and make a selection, as in the image below. Fill it with black and Deselect. Go to Edit > Transform > Perspective and tweak the perspective of the layer as shown.

Go to Filter > Blur > Gaussian Blur, set the Radius to 7 pixels, and apply. Grab the Eraser Tool, and using a soft brush, clear the top part of the shadow. Next, Command-click the "Dent" layer to load the selection. Grab the Rectangular Marquee Tool, then while holding the Shift key, make a selection that will cover the top part of the shadow. Now go to Select > Inverse and hit Delete to clear. Deselect and set the Layer Opacity to 60%.

Step 18

Now we can make the finishing touches before we merge the layers. First, I'll fill the background with the color #004400. Next, I made some minor changes. I set the Opacity of the "Highlight" layer at 85%, "Yellow" at 35%, "Red" at 85%, "Dent Shadow" at 95%, "Backlight" at 60%, "Reflection" at 55%.

I applied an Inner Glow Layer Style to the "Apple" layer to make the edges a little bit darker using these settings: Blend Mode of Multiply, Opacity set at 30%, Size set to 20 pixels, and Color set to #003300. I also changed the "Apple" layer Inner Shadow Opacity to 45%.

Finally, I applied an Outer Glow layer style to the "Dots" layer with these settings: Blend Mode set to Multiply, Opacity at 60%, Color set to #2b2b2b, and Size set to 8 pixels. Now select all the layers except the "Background" layer in the Layers Palette, then go to Layer > New > Group From Layers, and name the group "Apple."

Step 19

Create a new layer below the "Apple" group and name it "Shadow." Grab the Elliptical Marquee Tool and make a selection as shown, then fill it with black. Deselect and go to Filter > Blur > Gaussian Blur, and apply with a Radius of 40 pixels.

Step 20

Create a new layer above the "Background" layer and name it "Light." Grab the Elliptical Marquee Tool and make a selection as shown, then fill it with the color #338833. Deselect, then go to Filter > Blur > Gaussian Blur, and apply with a Radius of 75 pixels.

Step 21

Now we have our apple ready but it looks too much like a sphere, but you can give it an apple shape using the Warp transform. Right-click the "Apple" group and merge it. Go to Edit > Transform > Warp and distort it to give it an apple shape.

Conclusion

You'll see some distortion on the edges which are caused by the Warp transform. To get rid of them Command-click the "Apple" layer, go to Select > Modify > Feather, and set the Radius to 1 pixel. Next, go to Select > Inverse and hit Delete three or four times to clear the distorted area from the edges. And you finished!

Sponsered Links

2008-09-29T11:30:00.001-07:00

Your Ad Here

ADOBE PHOTOSHOP CS4 EXTENDED

2008-09-29T11:24:00.000-07:00

Revolutionary 3D painting and compositing

Now paint directly on 3D models, wrap 2D images around 3D shapes, convert gradient maps to 3D objects, add depth to layers and text, get print-quality output with the new ray-tracing rendering engine, and enjoy exporting to supported common 3D formats.

Adjustments panel

Simplify image adjustment by easily accessing every tool you need to nondestructively adjust and enhance the color and tone of your images; on-image controls and a wide variety of presets are also included in the new live and dynamic Adjustments panel.

Masks panel

Quickly create and edit masks from the new Masks panel. This panel offers all the tools you need to create editable pixel- and vector-based masks, adjust mask density and feathering, easily select noncontiguous objects, and more.

Auto-blending of images

Easily create a single image from a series of shots that have different focal points with the enhanced Auto-Blend Layers command, which smoothly blends color and shading and now extends your depth of field, automatically correcting vignettes and lens distortion.

Auto-alignment of layers

Create accurate composites with the enhanced Auto-Align Layers command. Move, rotate, or warp layers to align them more accurately than ever before. Or use spherical alignment to create breathtaking panoramas.

Extended depth of field

Combine a range of images, each with a different exposure, color, and focal point — with options to preserve tones and colors — into a single color-corrected image.

More powerful printing options

Get outstanding prints with superior color management, tighter integration with leading printer models, and the ability to preview out-of-gamut image areas. Support for 16-bit printing on Mac OS offers increased color depth and clarity.

Integration with other Adobe software

Be productive with enhanced integration between Photoshop Extended and other Adobe applications you depend on, including Adobe After Effects®, Adobe Premiere® Pro, and Adobe Flash Professional software.

Improved Adobe Photoshop Lightroom workflow

Select multiple photos in Adobe Photoshop Lightroom® (sold separately) and automatically open them in Photoshop CS4 to merge them into a panorama, a high dynamic range (HDR) photo, or a multilayered Photoshop document. And seamlessly roundtrip back to Lightroom.

3D object and property editing

Edit, enhance, and manipulate 3D images in a streamlined interface without dialog boxes. Adjust lighting, meshes, and materials. Easily orient objects and position the camera using 3D axes and a ground plane.

Fluid canvas rotation

Now just click to smoothly turn your canvas for distortion-free viewing at any desired angle — no more tilting your head in the middle of painting and drawing.

Smoother panning and zooming

Gracefully navigate to any area of an image with new, ultra-smooth zooming and panning. Maintain clarity as you zoom to individual pixels and easily edit at the highest magnification with the new Pixel Grid.

Content-Aware Scaling

Use the new and revolutionary Content-Aware Scaling feature to automatically recompose an image as you resize it, smartly preserving vital areas as the image adapts to the new dimensions. Get the perfect image in one step without time-intensive cropping and retouching.

Enhanced motion graphics editing

Edit motion graphics more efficiently with new single-key shortcuts, sync visual effects with specific points in an audio track using new audio syncing controls, and turn any 3D object into a video display zone.

Better raw image processing

Enjoy superior conversion quality as you process raw images with the industry-leading Adobe Photoshop Camera Raw 5 plug-in, which now offers localized corrections, post-crop vignetting, TIFF and JPEG processing, and support for more than 190 camera models.

Industry-leading color correction

Enjoy dramatically enhanced color correction with reengineered Dodge, Burn, and Sponge tools that now intelligently preserve color and tone details.

File display options

Easily work with multiple open files by using tabbed document display or n-up views.

Extensibility

Get and share Adobe Flash® technology-based panels that developers create to accomplish customized tasks. Plus, get tips and tricks from the thriving worldwide community of Photoshop users through the new Adobe Community Help online service.

System requirements and languages

Windows

1.8GHz or faster processor
Microsoft® Windows® XP with Service Pack 2 (Service Pack 3 recommended) or Windows Vista® Home Premium, Business, Ultimate, or Enterprise with Service Pack 1 (certified for 32-bit Windows XP and 32-bit and 64-bit Windows Vista)
512MB of RAM (1GB recommended)
1GB of available hard-disk space for installation; additional free space required during installation (cannot install on flash-based storage devices)
1,024x768 display (1,280x800 recommended) with 16-bit video card
Some GPU-accelerated features require graphics support for Shader Model 3.0 and OpenGL 2.0
DVD-ROM drive
QuickTime 7.2 software required for multimedia features
Broadband Internet connection required for online services*

Mac OS

PowerPC® G5 or multicore Intel® processor
Mac OS X v10.4.11–10.5.4
512MB of RAM (1GB recommended)
2GB of available hard-disk space for installation; additional free space required during installation (cannot install on a volume that uses a case-sensitive file system or on flash-based storage devices)
1,024x768 display (1,280x800 recommended) with 16-bit video card
Some GPU-accelerated features require graphics support for Shader Model 3.0 and OpenGL 2.0
DVD-ROM drive
QuickTime 7.2 software required for multimedia features
Broadband Internet connection required for online services*

Create A Natural Composition with Light Shining Through a Rustic Fence

2008-08-17T13:18:00.000-07:00

Final Image Preview

Before we get started, let's take a look at the image we'll be creating. Click the screenshot below to view the full-size image. As always, the layered Photoshop file is available via our PSDTUTS Plus membership.

Step 1

Prior to starting to work on the image itself we need to make a wood pattern that we'll later use to make the fence. To do this, open a new document at 800 pixels by 800 pixels in size. Then set the background color to a light brown (I chose #de9650) and the foreground color to a darker brown (711f03). Then go to Filters > Render > Clouds to create the clouds, which is the basis of the wood pattern.

Step 2

Go to Filters > Blur > Motion Blur. Set the Angle to 90 and the Distance to 250.

Step 3

Then go to Filters > Artistic > Dry Brush. Set the Brush size to 10, Brush Detail to 5, Texture to 3, and you're done with the pattern design! Now you just need to make it into a pattern by going to Edit > Define Pattern.

Step 4

Next, we'll work on the sky. Open a new document. The dimensions are up to you, but making the image large would make the work easier. I chose the size to be 2000 pixels by 1200 pixels. Change the foreground color to a sky blue (2762c3) and the background color to white. Create a new "Sky" layer and apply the Cloud Filter by going to Filters > Render > Clouds.

Step 5

We need to make the sky look more like a real sky, so go to Edit > Transform > Perspective. Move the top corners of the sky out until you get the appearance of the sky being above your head, at a width approximately 595%. Once you've done that, move the layer up slightly to create the horizon line that should be about a third of the way from the bottom of the image.

Step 6

Now to create the sunset we need to apply a Gradient Overlay on the "Clouds" layer as well as give it an Inner Glow. For the Gradient Overlay I chose the Foreground to Transparent gradient and changed the colors to light pink (#ff64e4) at the Foreground end and to deep pink (#a5138b) at the Transparent end.

The style is Linear, the Angle is 90 degrees, and the Scale is 100%. Also, the Opacity should be 90%. For the Inner Glow set the blend mode to Multiply, the Size to 250, and the color to hot pink (#ff00e4).

Step 7

To make the setting sun create a new layer (make sure that it is on top of the "Sky" layer). Then fill it with the same color blue you used for the "Sky" layer and apply the Lens Flare Filter by going to Filters > Render > Lens Flare. Set the Brightness to 150 and the Lens to 105mm Prime. Change the layer’s Blend Mode to Screen.

Step 8

Erase some of the scattered light that the Lens Flare effect produces with an Eraser Brush set at the size of 300 and Opacity of 34%.

Step 9

We'll work on the grass area next. Create a new layer. Then using the Paint Brush Tool, and one of the two grass brushes provided by Photoshop, draw grass on the horizon line. To make sure that the grass is not all one color, I used a dark green (#154502) as a foreground color and a light green (#2b7a01) as a background color. The result should be something like the second image below.

Step 10

The next step is to make the fence. Using the Shape Tool, draw a rectangle. This will be the base of the fence. Now draw a triangle on top of it to make it look more like a fence.

Step 11

Merge the two shapes together by right-clicking on the name of one of them in the Layers Window and selecting Select Similar Layers. Then when the two are selected go over to Layers > Merge Layers. Now that you’ve got one done duplicate the layer enough to fill the entire image across. When you’re done placing each board an equal distance apart, merge them into one layer.

Step 12

To make the fence more realistic some changes are in order. Here you will be using the wood texture that we have created earlier. Use the settings shown below.

Step 13

Now we need to make the two parallel pieces of wood that hold the fence up. To do this, draw two rectangles with the Shape Tool. They should be long enough to run across the entire length of the fence.

Step 14

Then we need to copy the Layer Style of the Fence and paste it onto the layer that you have just created. In the Layers Window right-click on the Layer Effects of your Fence layer. Select Copy Layer Style and go over to the new layer, right-click on its name, and select Paste Layer Style. Now move the new layer behind the fence.

Step 15

Next we need to make the nails. Using the Shape Tool, draw two small circles on a new layer.

Step 16

Once you’ve placed them exactly where you want the nails to be, merge the layers, and duplicate until you have enough nails for the whole fence. Put them all where you want them to be and merge them into one layer using the Select Similar Layers technique that we have used earlier on.

Step 17

This is an old fence, and the nails will be a little rusty. So we need to change the Style of the layer. Follow the images below.

Step 18

Our fence is old, so it would look better if there was more dirt on it. So using a brush draw in dirt, dust, and stains. I've used the brush that had an Opacity of 8%. Do not add too much, but just enough to make it look more realistic.

To make the painting easier, using the Magic Wand tool on the palette select (by simply clicking there) the blank space around the fence on the Fence Layer. Then go to Select > Inverse. Then without Deselecting anything, click on the "Dirt" Layer, and paint without the fear of coloring outside the lines.

Step 19

To make it yet more realistic go to Filter > Noise, and then Add a Noise Amount of 2.5 %, make the Distribution set as Uniform, and put a check mark on Monochromatic.

Step 20

Next we'll be placing more grass. In a two dimensional world the third dimension may be demonstrated by drawing the objects that are further away smaller. We'll use this rule while drawing the grass. This will be done on three different layers. Create the first one for "Short Grass" and fill it with grass using the brushes of 112 pixels and 134 pixels in size.

The second layer "Medium Grass" should be drawn with the 160 pixels and 180 pixels brushes. And the third and final layer "Tall Grass" should be drawn with the 230 pixels and 250 pixels brushes.

Step 21

To add still more dimension to the grass layers, on both the "Short Grass" and "Tall Grass" layers, go to Layer Style and add a Drop Shadow. Do not add a Drop Shadow on the "Medium Grass" layer because the image might then look too choppy.

Step 22

You might have spots of white between the grass. To fix that we'll add a "Ground" layer. Make a new layer and color it dark brown (#2b1502) covering the entire bottom part of the image where the ground should be. Then move the layer behind all the grass layers. You can see the result in the second image below.

Step 23

The last major part of the image is the light and how it shines through the fence. To create the first part of it you'll need to duplicate the "fence" layer. On that duplicated layer disable all the effects and add a Color Overlay of solid black.

Step 24

This new layer will be the shadow that is cast by the fence. Make another copy of that new layer, as we'll need to use it in a later step, but to make it easier you can Hide it for now. Now select one of the black fence layers and apply Edit > Transform > Flip Vertical.

Step 25

Then move the shadow to the base of the fence and go to Edit > Transform > Perspective. Stretch the shadow until it looks like it’s laying on the ground. Remember where you placed the light source because that will determine where the light will be falling in a straight line and where it will be coming in at an angle.

Step 26

Apply a Gaussian Blur of 3.5 pixels to the layer by going to Filters > Blur > Gaussian Blur. Set the Opacity of the layer that is now the shadow on the ground to 30%. Make the other black fence layer visible now. Also, set the Opacity of the layer to 30%. Use the Gaussian Blur of 3.5 pixels on this shadow as well.

Step 27

Now the shadows might be overlapping in some places. I've used both the Eraser Tool and the Smudge Tool to fix that. You also may want to erase part of the shadow that is on the fence itself.

Step 28

Using the Pen Tool, draw in the rays of light coming through the fence. After drawing each one, right-click and select Fill Path. After it has been filled, right-click again, and select Delete Path. Each ray should be drawn on it's own layer. This is because we'll need to apply a Motion Blur to each one separately. The easiest way to get the path of the rays correct is to try to match them to the rays that are on the grass.

Step 29

Now apply Motion Blur by going to Filter > Blur > Motion Blur to each ray individually. You need to almost match the angle of the ray. This is because some blurring would be good.

Step 30

The style of the rays should be as follows.

Step 31

The rays are done and now some touch-ups are in order. There should not be a place where the light is overly bright. We also need to erase some of the blur so the rays look more like they are coming through the fence.

Step 32

There is not an old forgotten fence without vines and of course flowers on it. To draw the vines we need to get a suitable Brush. Also, set the color to the same one that you've used to make the grass. Now select the Pen Tool from the palette and start drawing vines around the fence. When you are done drawing one of them, right-click with the Pen Tool, and select Stroke Path. In the window that will pop up select Brush and check Simulate Pressure

Step 33

To make the vines look like they are growing around the fence erase some parts of them. Finally, change the layer styles of the vines to match the ones below.

Step 34

Add leaves using the Shape Tool to draw them. Then go to Edit > Transform > Rotate to rotate them so they would fit on the vine. The leaves should have the same layer style as the vines; so right-click, copy the layer style from the vines, and paste it onto the leaves layer.

Step 35

I've also added flowers, using the Shape Tool again.

Conclusion

Finally, here is the finished image! You can view a larger version here as well.

Photoshop shortcuts

2008-08-17T13:11:00.000-07:00

One of Photoshop's key features is that almost everything in it can be controlled using keyboard shortcuts. This allows the user to stay in a creative thought pattern and quickly change tools in monotonous work that requires it.

F1 - Toggles Adobe Online Help

F5 - Toggles Brush style palette

F6 - Toggles Colour, Swatches, Styles palette

F7 - Toggles Layers, Channels, Paths palette

F8 - Toggles Navigator, Info palette

F9 - Toggles Actions, History, Presets palette

Tab (Key) - Toggles all the palettes on screen

Shift + Tab (Key) - Toggles palettes on screen, excluding the Toolbar.

Main Toolbard
Key	Action	Action	Key
m	Marquee Tool	Move Tool	v
l	Lasso Tool	Magic Wand Tool	w
j	Airbrush Tool	Paintbrush Tool	b
s	Rubber Stamp Tool	History Brush Tool	y
e	Eraser Tool	Pencil Tool	n
r	Blur Tool	Dodge Tool	o
p	Pen Tool	Type Tool	t
u	Measure Tool	Linear Gradient Tool	g
k	Paint Bucket Tool	Eyedropper Tool	i
h	Hand Tool	Zoom Tool	z
d	Default foreground and background colors.
x	Switches between foreground and background colors.
q	Switches between standard mode or quick mask mode.
f	Switches between screen modes.
TAB	Hides/Unhides open tools.

File Menu
Key	Action
CTRL + N	New
CTRL + O	Open
CTRL + ALT + O	Open As
CTRL + W	Close
CTRL + S	Save
CTRL + SHIFT + S	Save As
CTRL + ALT + S	Save a Copy
CTRL + SHIFT + P	Page Setup
CTRL + P	Print
CTRL + K	Preferences > General

Edit Menu
Key	Action
CTRL + Z	Undo
CTRL + X	Cut
CTRL + C	Copy
CTRL + SHIFT + C	Copy Merged
CTRL + V	Paste
CTRL + SHIFT + V	Paste Into
CTRL + T	Free Transform
CTRL + SHIFT + T	Transform > Again

Image Menu
Key	Action
CTRL + L	Adjust > Levels
CTRL + SHIFT + L	Adjust > Auto Levels
CTRL + ALT + SHIFT + L	Adjust > Auto Contrast
CTRL + M	Adjust > Curves
CTRL + B	Adjust > Color Balance
CTRL + U	Adjust > Hue/Saturation
CTRL + SHIFT + U	Adjust > Desaturate
CTRL + I	Adjust > Invert
CTRL + ALT + X	Extract

Layer Menu
Key	Action
CTRL + SHIFT + N	New > Layer
CTRL + J	New > Layer Via Copy
CTRL + SHIFT + J	New > Layer Via Cut
CTRL + G	Group with Previous
CTRL + SHIFT + G	Ungroup
CTRL + SHIFT + ]	Arrange > Bring to Front
CTRL + ]	Arrange > Bring Forward
CTRL + [	Arrange > Send Backward
CTRL + SHIFT + [	Arrange > Send to Back
CTRL + E	Merge Down
CTRL + SHIFT + E	Merge Visible

Select Menu
Key	Action
CTRL + A	All
CTRL + D	Deselect
CTRL + SHIFT + D	Reselect
CTRL + SHIFT + I	Inverse
CTRL + ALT + D	Feather

Filter Menu
Key	Action
CTRL + F	Last Filter
CTRL + SHIFT + F	Fade

View Menu
Key	Action
CTRL + Y	Preview > CMYK
CTRL + SHIFT + Y	Gamut Warning
CTRL + +	Zoom In
CTRL + -	Zoom Out
CTRL + 0	Fit on Screen
CTRL + SHIFT + 0	Actual Pixels
CTRL + H	Hide Edges
CTRL + SHIFT + H	Hide Path
CTRL + R	Show Rulers
CTRL + ;	Hide Guides
CTRL + SHIFT + ;	Snap To Guides
CTRL + ALT + ;	Lock Guides
CTRL + "	Show Grid
CTRL + SHIFT + "	Snap To Grid

Help Menu
Key	Action
F1	Contents

Other Shortcuts
Key	Action
Page Up/Down	Move view up/down 1 screen.
SHIFT + Page Up/Down	Nudge view up/down.
CTRL + Page Up/Down	Move view left/right 1 screen.
CTRL + SHIFT + Page Up/Down	Nudge screen left/right.
CTRL + SHIFT + Z	Previous History entry.
CTRL + ALT + Z	Next History entry.
SHIFT + -	Previous blending mode.
SHIFT + +	Next blending mode.

Ctrl Short Cuts -

Ctrl + N - New Document Dialogue Box
Ctrl + M - Curves Dialogue Box
Ctrl + A - Selects all in the currently foreground document or currently selected layer
Ctrl + D - Deselects all in the currently foreground document or currently selected layer
Ctrl + J - Automatically creates a duplicate of the currently selected layer
Ctrl + K - Preferences Dialogue Box
Ctrl + L - Levels Dialogue Box
Ctrl + F4 - Closes current document
Ctrl + ' (Single Quote Key) - Toggles Grid Lines
Ctrl + Q - Quits Photoshop altogether
Ctrl + R - Toggles Rulers
Ctrl + U - Hue/Saturation Dialogue Box
Ctrl + O - Opens New File
Ctrl + P - Print Dialogue Box
Ctrl + Z - Undo last Action
Ctrl + Tab - Toggle between open documents
Ctrl + Shift + C - Copy Merged
Ctrl + C - Copy
Ctrl + H - Toggle Extras
Ctrl + ; - Toggle Guides
Ctrl + Shift + ; - Toggle Snap
Ctrl + X - Cut
Ctrl + Alt + Shift + X - Pattern Maker
Ctrl + V - Paste
Ctrl + Shift + V - Paste into selection
Ctrl + Alt + Shift + V - Paste Outside
Ctrl + T - Transform Tool
Ctrl + Shift + T - Repeats the last performed Transform
Shift + F5 / Shift + Backspace (Key) - Fill Layer Dialogue Box

Combination Number 9 Shortcuts - Ctrl + Shift / Alt -

Ctrl + Shift + O - Photoshop's File Browser
Ctrl + Shift + P - Page Setup Dialogue Box
Ctrl + Shift + S - Save As Dialogue Box
Ctrl + Shift + K - Color Setting Preferences Box
Ctrl + Shift + F - Fade Dialogue Box
Ctrl + Shift + X - Liquify Filter Tool
Ctrl + Shift + N - Create New Layer Preferences Box
Ctrl + Shift + M - Launches ImageReady
Ctrl + Shift + E - Merges all layers into a single layer
Ctrl + Alt + Z - Step Backward
Ctrl + Shift + - (Minus Sign Key) - Zoom Out
Ctrl + Shift + + (Plus Sign Key) - Zoom In
Ctrl + Shift + Alt + N - Creates a new empty layer
Ctrl + Shift + Alt + S - Save For The Web Dialogue
Ctrl + Alt (in most Dialogue Boxes) - Changes the 'Cancel' command to 'Reset'
Ctrl + Alt (in the 'Save For Web Dialogue') - Changes the 'Cancel' command to 'Reset' & the 'Done' command to 'Remember'
Ctrl + Alt + ~(Tild Symbol) - Selects the brightest area of the currently selected layer
Ctrl + Shift + I - Inverts a selection
Ctrl + Alt + X - Extract
Shift + -/+ signs(on a layer) - Toggles the different layer modes
Shift + Ctrl + Z - Step Forward

File Menu Shortcuts:

Ctrl+N: New Document
Ctrl+O: Open Document
Shift+Ctrl+O: Browse
Alt+Ctrl+O:Open As
Ctrl+W: Close
Ctrl+Shift+W: Close All
Ctrl+S: Save
Ctrl+Shift+S: Save As
Ctrl+Alt+S: Save a Copy
Ctrl+Alt+Shift+ S: Save for Web
Ctrl+Shift+P: Page Setup
Ctrl+Shift+M: Jump to Image Ready
Ctrl+Q: Exit

Viewing Shortcuts:

Ctrl+Y: Proof Colors
Ctrl++: Zoom In
Ctrl+-: Zoom Out
Ctrl+Alt++: Zoom In & Resize Window
Ctrl+Alt+-: Zoom Out & Resize Window
Ctrl+Alt+0: Actual Pixels
Ctrl+Shift+H: Show/Hide Target Path
Ctrl+R: Show/Hide Rulers
Ctrl+Shift+; : On/Off Snap
Ctrl+H: Show/Hide Extras
Ctrl+Alt+;: Lock Guides
Ctrl+;: Show Guides
Ctrl+': Show Grid

Tools Shortcuts:

A: Path Component Selection Tool
B: Paintbrush Tool
C: Crop Tool
D: Changes Default Colour Palettes To Black Foreground, White Background
E: Eraser Tool
F: Cycle Screen Modes
G: Gradient Tool
H: Hand Tool
I: Eyedropper Tool
J: Airbrush Tool
K: Slice Tool
L: Lasso Tool
M: Marquee Tool
N: Notes
O: Dodge/Burn/Sponge Tool
P: Pen Tool
Q: Quick Mask
R: Blur/Sharpen/ Smudge Tool
S: Clone Stamp
T: Type Tool
U: Shape Tool
V: Move Tool
W: Magic Wand
X: Swap Colours On Colour Pallete
Y: History Brush
Z: Zoom Tool

Layer Shortcuts:

Ctrl+Shift+N: New Layer
Ctrl+J: Layer via Copy
Ctrl+Shift+J: Layer via Cut
Ctrl+G: Group with Previous
Ctrl+Shift+] : Bring to Front
Ctrl+]: Bring Forward
Ctrl+[: Send Backward
Ctrl+Shift+[ : Send Back
Ctrl+E: Merge Layers
Ctrl+Shift+E: Merge Visible

Image Manipulation Shortcuts:

Ctrl+L: Adjust Levels
Ctrl+Shift+L: Adjust Auto Levels
Ctrl+Alt+Shift+ L: Adjust Auto Contrast
Ctrl+M: Adjust Curves
Ctrl+B: Adjust Color Balance
Ctrl+U: Adjust Hue/Saturation
Ctrl+Shift+U: Desaturate
Ctrl+I: Invert
Ctrl+Alt+X: Extract

Filters Shortcuts:

Ctrl+F: Last Filter
Ctrl+Shift+F: Fade
Ctrl+Alt+X: Extract
Ctrl+Shift+X: Liquify
Ctrl+Shift+Alt+ X: Pattern Make

Selection Shortcuts:

Ctrl+A: Select All
Ctrl+D: Deselect
Ctrl+Shift+D: Reselect
Ctrl+Shift+I: Inverse
Ctrl+Alt+D: Feather

Random Shortcuts:

Alt+Backspace: Fill with Forground Color
Shift+Backspace: Fill with Background Color
Alt+]: Ascend through Layers
Alt+[: Descend through Layers
Shift+Alt+]: Select Top Layer
Shift+Alt+[: Select Bottom Layer
Tab: Show/Hide All Palettes

Create a Glowing Light Painting Effect

2008-05-31T07:20:00.000-07:00

Step 1

Create a new document and place the photo, you can download the one I used at: Photo 1.

Step 2

Here I placed a second image, I will use it to create the light effects. Here is the link for the next image: Photo 2.

Step 3

With the Pen Tool(P), create a path for one of the figures.

Step 4

Select the Brush Tool(B) and go to Window>Brushes or F5, lets create our brush. Use 8px for the diameter and select Dual Brush and Other Dynamics. Follow the image below for reference.

Step 5

Go to the Layer Palette create a new folder and rename it to lights. After that create a new layer inside this folder name it dude and select it.

Step 6

Go to the Path Palette and select the first path. Then with the Path Selection Tool(A) select the path and click with the right button of the mouse. Choose Stroke Path. A dialog box will open, select the brush and use simulate pressure.

After that go to Filter>Blur>Gaussian Blur, use 1.6px for the amount.

Step 7

Duplicate the dude layer 3 times.

Step 8

Select the Rectangle Tool (U) and create a rectangle. Then duplicate the rectangle several times. After that align and distribute them horizontally.

Step 9

Create a new layer inside the lights folder. Rename it to xing. Repeat the Step 6 and stroke the paths. After that select the xing layer and go to Edit>Transform>Distort. Now just move the vertices until the perspective is good, just follow the street lines.

Conclusion

That's probably the easiest way to create this type of light effect; however, it depends on the color of the background. If the background is too dark the blend mode won't work. You'll probably have to use another one with a outer glow.

You can make the lights brighter, by just duplicating the layers. You can even use the Eraser Tool(E) to make some adjustments. The original concept image can be viewed at Light Graffiti In Photoshop. The final tutorial image is below.

Create a Shiny Lock Icon Design

2008-05-31T07:19:00.000-07:00

Final Image Preview

Before we get started, let's take a look at the image we'll be creating. As always, the full Photoshop file is available via our PSDTUTS Plus membership.

Step 1

Let's start with a new document, filled with a light grey color (#D5D5D5). Choose the Rounded Rectangle Tool. Then draw the basic shape of a lock. Set the Radius how you feel is right. Then fill it with a light grey color (#DDDDDD).

Step 2

Let's add the upper part. Use the Ellipse Tool to draw a circle. Choose it with the Path Selection Tool, then copy, paste, and make it a little smaller using (Ctrl + T). Then Subtract the smaller circle from the larger one by punching a hole in it.

Step 3

Change your tool to the Rectangle Tool, and with the Alt Key pressed (subtracting) draw a rectangle as shown below. Then with the same tool, but with the Shift Key pressed (adding), finish the left and right side.

Make the left end rounded by drawing an ellipse with the Ellipse Tool. Again, with the Shift key pressed. If you want to make it pixel-accurate, you will need to turn on the grid.

Step 4

Let's start adding some effects to make the lock look realistic. We will start with the bottom part and use some layer effects. Create a little darkening around the edges with the Inner Shadow effect.

Step 5

Some effects must be done manually. Let's add a strong shadow by copying the layer (Ctrl + J). Choose the Select path tool (A). Then select copy (Ctrl + C) and insert (Ctrl + V). Then move a few pixels upwards and set subtract style. Fill the shape we just created with a dark grey color (#505050). The shadow (bottom outline) is done.

Now you may be wondering why we used this technique and didn't simply apply an inner shadow effect? Well that is because we do not want the shadow to be applied to the whole lock. That is why we add the layer mask. Pick up a Brush Tool (black soft brush) and draw in the middle of a shape. That will make the shadow less visible and add a little bit more plasticity to our final image. As you can see in the last image below, the shadow disappears as we proceed to the middle.

Step 6

Ok, let's darken our lock more. Above the shape layer (of a bottom part), create a new layer (Ctrl + Alt + Shift + N). Set the layer as a cutting mask of the previous layer by pressing (Ctrl + Alt + G). Pick up the Brush Tool (big soft black). Set the Opacity to let's say 30%. Then draw on the left and right sides. That will create soft shadows.

You can draw lighter parts just like you drew the shadows. Use a light colored brush with a similar opacity. Draw them into either new or the very same layer. Follow the images below for guidance.

Step 7

Let's create reflections on the top edge next. Select all of the bottom layer (Ctrl + click on the layer). Go to Select > Modify > Contract. Then fill the selection (in a new layer) with a white color (Alt + backspace). Move the selection two pixels down (just press the down arrow two times). Then hit the Delete key to delete this part of the layer. Don't forget to deselect with Ctrl+D!

Step 8

After that, start defining the plasticity of a lock using bigger reflections. Use the Rectangle selection tool to create a rectangle in a new layer. Draw a linear gradient (Gradient tool) from white to transparent.

Step 9

Select a 2 pixels line on the top with the (rectangle selection tool), as shown below. Then Skew it, as in the second image below. This is how the reflection copies the shape of the lock.

Step 10

Just like that create reflections on the other side, but much bigger.

Step 11

We make it bigger so it doesn't look too similar. We are almost done with the bottom part. Below is how our lock should look so far.

Step 12

Next we add a strip! Again create selection a selection. Then draw a gradient into this selection from yellow (#F5E02F) to orange (#F3BB2A).

Step 13

After that choose the Single Row Marquee Tool. Then select the first and last line of the previous selection (select both lines with Shift pressed).

Use a Brush Tool and a dark color to satisfy your needs. That is how you make the difference between the background and the strip.

Step 14

Make a selection by pressing (Ctrl + click) on a new layer. Then from the Layers menu add a new Pattern Fill. Use this pattern, just change the Scale to 50% to match the icon size. Then set the layer style to Multiply. Then only black stripes will be visible.

Step 15

To make the pattern smaller near the edges, make the mask bigger on the right and on the left side. Then rasterize the layer (Layer > Rasterize > Fill Content).

Step 16

Next, narrow down the left and right sides. Cut out portions and resize as needed. This will make the sides appear to taper and cut at an angle. This can be done a few times to maximize the effect.

Step 17

Add another layer. Draw some to darken the sides of the strip. Again, use the Brush Tool with a black color, soft, and lowered opacity.

Step 18

The bottom part of the lock is done, great! Let's work on the upper part. Start with a new upper part layer and begin coloring and defining the edges. Use a grey color (#D5D5D5). Then give it an Inner Glow with effect (1px size, grey color #848484). That should do it just fine. Set the Blend Mode to Multiply.

Step 19

As we learned before, another important part of metallic surface is reflection. So let's create a reflection that will only be applied to half of the upper part. Another shape could help us. Copy the one we have (Ctrl + J), and color it black - so we see exactly where the edges are. Then grab the Path Selection Tool and use it to select the inner circle. Then make it bigger with Ctrl + T.

Step 20

Over the left and right side draw two rectangles with the Alt key pressed (subtraction).

Step 21

Lower the Opacity of this shape down to 30 %. Create a new layer between this and the original shape. Then draw a linear gradient from white to transparent. Press Ctrl + Alt + G (cutting the mask of the previous layer) to make the reflection visible only on our icon.

Step 22

Like on the bottom part, we will add two bigger reflections here. They just have to be formed like the shape they are on, so it will not be rectangles, but ellipses. Draw an ellipse using the Ellipse Tool, as in the image below.

Step 23

Rotate it with Ctrl + T about 45 degrees.

Step 24

Finally, use the Direct Selection Tool (A) to select two points in the middle of the ellipse. Then move them until the ellipse emulates the curve of the upper portion of the lock.

Step 25

Duplicate this layer (Ctrl + J). Then flip it horizontally, and move it to the right side.

Step 26

The lock is almost done. We just want to darken the edges on some places, so the icon is fully separated from the background.

First, make a layer selection of the lower part of the lock icon (Ctrl + Click on a layer). Create a new layer. Then draw into that new layer. Use our familiar dark soft brush to draw spots where you want to make the lock darker. When done, make the selection 1 pixel smaller by going to Select > Modify > Contract. Then hit the Delete key. The following image shows the stage just before deleting.

Step 27

Below is the 100% view after deleting. We're almost done.

Step 28

Exactly the same technique can be used to achieve a high level of detail on the upper part of a lock. The arrows show you where to darken.

Step 29

Whenever you decide to put the icon into your design, don't forget to add to the grey color a little bit from a color style of the background it will be placed on. In the following image, more purple was added to fit into the application design.

Conclusion

And that's all. I hope you learned something new. The final image is below.

Create a Spectacular Grass Text Effect in Photoshop

2008-05-31T07:17:00.000-07:00

The End Effect

I like to begin tutorials by showing where we're going. So without further ado, here is the final grass-text image - click to see the full 1920px x 1200px size.

Part 1 - The Background

This tutorial is made up of three parts - the background, the text itself, and some final extra effects. So first of all we're going to make a background. To do this we create a new document in Photoshop. I made mine 1920 x 1200 because I want this image to sit on my laptop background.

We start by drawing a Radial Gradient with the Gradient Tool (G) going from a light yellow-green (#adbf41) to a mid-range green (#328a26). I wonder if I've ever written a tutorial that doesn't start with a radial gradient. :-)

Step 2

Now for this image we want to create a really textured background, faintly resembling paper. So the first thing we need is ... a paper texture!

Happily you can grab some really awesome grungy paper textures from Bittbox and they are nice and large too, which is good because this is a huge canvas.

So I can't remember which texture I used first, but grab one, desaturate it (CTRL-SHIFT-U) and stretch it over the top to fit the canvas.

Step 3

Now we set the layer to Overlay and 70% opacity to blend the texture with our nice green background.

Step 4

Now to get a really distressed look, I then copied this layer, spun it around 180' and set it to 20%. Then I brought in a few more layers of paper texture (using different textures, mostly from Bittbox) and set them all to faint overlays, one on top of the other.

This was partly for the extra distress, but also because I realised that the textures looked a bit grainy and not small and sharp. So by combining extra textures and then fading it all back, I can get a nicer, sharper overall look.

Anyhow as you can see in the screenshot there are 6 layers here. Don't forget if you are a Plus member you can download the PSD file for this tutorial and take a look in there yourself!

Step 5

Now I duplicated the original background gradient, placed the duplicate layer above all the textures and set it to 40% opacity - this tones back the texture so it's not quite so grungy!

Step 6

Now we create a new layer over the top and using a large soft black brush, add some black to the edges. It's worth toning back the opacity to about 30% and Overlay. You can then duplicate the layer and run a heavy Gaussian Blur over it (set to about 32px). That way the edges really soften out.

Step 7

OK, we now have a nice background!

Part 2 - Grass Text!

OK, we are now ready to make some grass text. To do that, we're going to need some nice pretty grass to cut. After a lot of searching, I finally found this lovely photo on Flickr of grass.

So download the image at full size and copy it on to your canvas.

Step 9

Next we need some type. So select a font you want to cut out with. I chose Swiss 924BT, which is fat and condensed type. I thought it looked nice and grand. And I've written the text "EARTH". That's because I'm making five of these wallpapers - earth, water, fire, air, spirit ... it's like that cartoon I used to watch as a kid, Captain Planet!

Anyways, so just set your text out in white and set it to Overlay and like 50% opacity. This layer won't actually show in the end, it's just a guide layer.

Step 10

OK so here's the text on top of the grass we got earlier.

Now a bit of planning! To make text out of grass it's not going to be enough just to stencil out the grass. Rather we need it to look all rough, with bits of grass sticking out the edges. To do that we're going to use the letter shapes as a rough guide and then trace roughly around them and periodically jut out to trace around blades of grass.

I'll warn you now, it's very tiresome!

Step 11

OK so here we are tracing. You should use the Pen Tool (P) and frankly if you're not handy with it before you start, you will be by the end!

Notice how in the parts where my path juts out, it sort of follows individual blades of grass. That way when you have the final cut out they will look like pieces of grass sticking out.

Step 12

When you've finished your path, it's best to save it in the Paths palette. You can do this by switching to that palette and then clicking the little down arrow and choosing Save Path. That way if you need the path again later, you can grab it.

Anyhow double click the path to get the selection and go back to your grass layer. Duplicate the grass layer, so you still have more grass for the other letters, then invert your selection (CTRL-SHIFT-I) and cut away the excess grass. In the screenshot I've faded back the duplicate grass layer so you can see the cut out "E" part.

Step 13

OK so here we have our "E" on the final bakcground. As you can see, it looks only slightly better than if we'd just used the letter to stencil out the grass without bothering to trace. But that's OK, what it needs is a bit more depth. After all if that letter was really sitting there, we should see some shadow and sides to it.

Step 14

First of all though we'll add some layer styling to give it a bit more of a three dimensional look. The styles are shown below.

Layer Style

Here's the first set of layer styles...

Step 15

Now duplicate that layer, then clear the layer style off the duplicate, so we can add some more styles. This time add the styles shown below...

Layer Style

Here's the second set of layer styles... (Note that it's 51% opacity so it'll blend in with the previous layer)

Step 16

So this was all just experimental, and it kinda looks OK, but obviously has a long way to go. Now we'll add some shadow. For that we'll use a technique that I demonstrated in a previous tutorial - Using Light and Shade to Bring Text to Life

The idea is to make a three dimensional look. So CTRL-Click the grass layer and then in a new layer below, fill it with black. Then press the down arrow once and the right arrow once and fill it again, then repeat over and over until you get an effect like that shown. I think that was about 15 steps of filling.

Step 17

Now we run a Filter > Blur > Motion Blur on our shadow with a 45' angle and a distance of about 30. Then set the text to a low opacity of about 50%. You should have something that looks like the screenshot below.

Step 18

Now move the shadow layer down and to the right and magic happens! All of a sudden it looks like the letter is casting a shadow. Pretty neat!

Step 19

Now I duplicated this layer three times. Each time I erased a bit of it away so that as the shadow is closer to the text it gets darker. I set these layers to Multiply.

Step 20

So this text is looking pretty cool, but for that extra bit of depth we should add some bits of grass in the background/shadow area. Rather than cutting out more grass we can just use this current letter transformed about so that it's not obvious that we're hacking it together.

So as you can see below I created a few pieces of grass. They are just cut up bits of our main letter.

Step 21

Now by moving those pieces into the shadow areas we can make it look like there is grass sticking out and it's a real 3d object made from grass!

Because these new grass bits are in shadow, you might want to use the Burn Tool (O) to darken them appropriately.

Step 22

So yay, one letter down ... four to go! Good thing we didn't choose a long word like erm I don't know ... laborious!

Step 23

Using the exact same technique ... here is the "A"

Step 24

and the "R" and "T" ... you get the picture.

Step 25

And finally, the whole word! The only extra thing I did here was to move the letters apart a little. Each letter is in its own Layer Group which makes moving it around much easier.

Part 3 - The Finish!

Now nice as it's looking, our text is a little lonely and monotonous. So in this last section we'll add a few more elements to the design. Note we don't want to overdo it though because I want this to be a desktop background, so space it is important (for all my icons!)

So first up let's add some extra text. Here's I've placed a nice quote about the earth and unity taken from the Baha'i Faith (that's my religion!) I love quotes, because it means we get three parts to decorate - the quote, the quotation marks and the source.

The text is in a variation of Swiss which is thinner, but still condensed. Using multiple fonts from the same family (heavy, light, etc) is a good, safe bet for keeping your type looking coherent.

So here I've set the quote to Overlay and 50%, then duplicated the text and set it to Screen and 50%. Then I've added quotation marks in the same Swiss font, but made them extra large and a bright shade of green. Finally the source of the quote is teeny letters and centred vertically. And of course the whole quote has been measured out so it's exactly the length of the main "EARTH" text.

Step 27

Next we'll add a bit of a highlight to the scene. To do this, create a new layer above all the rest, and using the Gradient Tool (G) draw a gradient of white -> transparent towards the top left. Then set this layer to Soft Light and 50%. This will turn it into a nice subtle bit of lighting.

Step 28

Now we'll add two eye-catching elements to offset all the green. These will be a brilliant blue butterfly and a little red ladybug. I used the excellent everystockphoto website that searches a ton of free stock websites or you to find two awesome images to use: Ladybug | Butterfly

Step 29

Placing the images is pretty easy. First the butterfly, we just open up the image in Photoshop, use the Magic Wand Tool (W) to select all the white area, then go to Select > Modify > Expand and expand the selection by 1px to make sure we've got it all. Then press CTRL-SHIFT-I to invert the selection and copy the butterfly over to our main canvas.

The ladybug I selected needs to be cut out of it's image. To do that I used the Pen Tool (P) and traced around the little guy and then just cut him out that way.

Step 30

So here are our two extras. As you can see the lady bug looks a bit weird actually because I did a quick'n'dirty job of cutting him out. But that's OK because he's going to be tiny so you won't be able to see the details anyway.

So paste them in and then shrink them down and place them appropriately. It's best if they aren't close together, because that way they'll balance each other.

I added a drop shadow to each, with the ladybug it's a very close shadow because he's small and walking on the grass. With the butterfly, I set the distance to about 10px because he's hovering in the air and therefore the shadow lands a little ways away.

Finished!

And there we have it, one neat little composition featuring text made out of grass! (Click for the full size version)

Create Cool Watercolor Effects in Photoshop

2008-05-31T07:14:00.000-07:00

Final Image Preview

Before we get started, let's take a look at the image we'll be creating. Click the screenshot below to view the full-size image. As always, the full layered Photoshop file is available via our PSDTUTS Plus membership.

Step 1

Create a new document and a new layer. Rename the layer to "texture" and fill it with white. Make sure that the Foreground is White and the Background is Black. Then go to Filter>Texture>Texturizer, and use Canvas for the Texture, 80% Scaling, and 2 for the Relief.

Step 2

Place an image in your document. The one used in this tutorial can be downloaded at this link. Then delete the background. You can use the Path Tool (P) or the Polygonal Lasso Tool (L). Tip: It doesn't need to be perfect because we will apply some filters in the next step.

Step 3

Select the layer of the girl and go to Image>Adjustments>Levels. We want to increase the whites here. Then go to Image>Adjustments>Hue/Saturation, and change the Saturation to -65.

Step 4

Now go to Filter>Artistic>Watercolor. Use the following settings: Brush Detail 9, Shadow Intensity 0, and Texture 1.

Step 5

With the girl's layer selected go to Layer>Layer Mask>Reveal All. Then select the Brush Tool (B), with black for the color, and mask the body of the girl.

Step 6

We need the Bittbox Watercolor Brushes 2, you can download them at this link.

Next we create a new layer. Then with the Brush Tool (B) selected, choose the 7th Brush from the BB Watercolor Brushes. Use black for the color. Then reduce its size to fit the document. After that rotate and resize the layer. The idea is to create watercolor style hair for the girl using the brush.

Step 7

Now go to Layer>Layer Style>Blending Options. Change the Fill Opacity to 0. Then select the Color Overlay option. Use red for the color and Multiply for the Blend Mode. For the opacity use 70%. Then select the Satin option. Use Hard Light for the Blend Mode, purple (#5d085c) for the color, 20º for the Angle, Distance 4px, and Size 12px.

Step 8

Create a new layer. Then select another brush with the Brush Tool(B). I used the 17th Bittbox Brush. The concept we're using is to design different creative looking hairstyles. So, let's continue with that. On a new layer, paint some brush strokes in the middle of the screen. Then resize and rotate them until they look good. You should achieve a stylized hair look, as in the image below.

Step 9

Go to Layer>Layer Style>Blending Options. Set the Fill Options to 0. Then add a Color Overlay. Use Overlay for the Blend Mode, Blue (#002cec) for the color, and set it to 50% Opacity. Then select Satin. Then use the following settings: a slightly darker blue (#065795) color, a Linear Burn for the Blend Mode, a 100% Opacity, a 19º Angle, an 11px Distance, and a 14px Size.

Step 10

Let's brush in some more hair. This time we'll use green. Create a new layer, and select the Brush Tool(B). Then select another brush from the watercolor set. Select the last one, reduce its size, and paint more hair. Use just one click when brushing. After that you can resize and rotate it.

Now go to Layer>Layer Style>Blending Options. Again set the Fill Options to 0. Then add a Color Overlay, use Multiply for the Blend Mode, Green (#18ff00) for the color, and 100% for the Opacity. Then select Satin. Use the following settings: darker green (#0b9600), Darken for the Blend Mode, 100% Opacity, 19º Angle, 4px Distance, and 7px Size.

Step 11

Next we repeat the process one more time. Create a new layer. Then select the Brush Tool(B). Select another brush, reduce its size, and paint more hair. Adjust it by resizing and rotating it until it looks good.

Again, go to Layer>Layer Style>Blending Options. Change the Fill Options to 0. Then add a Color Overlay, use Hard Light for the Blend Mode, Yellow (#ffe400) for the color, and 100% for the Opacity. Then select Satin. Use the following settings: darker yellow (#a2a406), Color Burn for the Blend Mode, 100% Opacity, 19º Angle, 17px Distance, and 73px Size.

Step 12

Now select the layer with the girl's face. Change the Blend Mode to Screen. Then make some adjustments, like fixing the neck using a regular brush with a white color.

Step 13

Type the text you want; I typed PSDTUTS. Then go to Layer>Layer Style>Gradient Overlay. Create a gradient using Red, Yellow, Green, and Blue. Use 180º for the angle and Normal for the Blend Mode.

Create another layer, and make sure that the text is on top of this new layer. Then with the Rectangular Marquee Tool create a rectangle selection and fill it with white. Next we merge these 2 layers (the text with the white rectangle). This is necessary to add some text effects, otherwise the filters wouldn't work well.

Step 14

Now we apply some filters to the text. First go to Filter>Brush Strokes>Sprayed Strokes. Use Stroke Length 17, Spray Radius 0, and Stroke Direction Vertical. After that go to Filter>Artistic>Watercolor. Use the following settings: Brush Detail 11, Shadow Intensity 0, and texture 1. That will create a nice text effect, or you could experiment with different filters until you achieve optimal results.

Conclusion

This tutorial presents a quick and easy way to create a nice design. We achieved this by mixing a photo with watercolor effects. We used some watercolor brushes and played with Blend modes. Keep in mind though, if you can paint it for real, you will be able to create very original artwork, like the designers I mentioned before.

Dramatic Text on Fire Effect in Photoshop

2008-04-16T04:05:00.000-07:00

The End Effect

As always we'll begin with the final result, so you can see where we're going. It's on a nice big canvas so it can serve as the desktop background on my laptop for the next week or so! Click to see the full 1920px x 1200px size.

Part 1 - The Background

So create a new document in Photoshop at 1920px wide x 1200px high, and with the Gradient Tool (G) draw in a radial gradient of browns (#5c3d09 to #1f1409) so you get something like what is shown below.

Notice that the gradient is not centred vertically but sits towards the top. In this image we want the top of the text to be on fire, so the top part of the image should be a bit more lit up.

Step 2

As in the grass text tutorial, once again we're going to have a textured background. But rather than starting from scratch, I just copied the background from the previous tutorial, merged all the layers and desaturated to get what you see below.

If you need to make this from scratch, first visit Bittbox to get the original paper textures and then follow the previous tutorial's steps.

Step 3

Now we set the layer to Overlay and to blend the texture into the background and voila!

Step 4

Just to add a bit more texture though, let's run the Texturizer filter. To do this, create a new layer and fill it with a brown/beige colour - #66500f. Then go to Filter > Texture > Texturizer and use the Canvas texture with 80% scaling and relief set to 4.

Step 5

Once you have your texturized layer, set that to Overlay. This adds some extra fine detail to our texture which is good because we're working on such a big canvas.

Step 6

Next we're going to apply a layer to slightly desaturate the bottom half of the image. This is so that the top looks like it has a warmer glow where the flames are, while the bottom looks a little colder.

So create a new layer and fill it with the color #4b4f3b. Then add a layer mask with a gradient to mask out the top and fade down (so you get the effect shown).

Now set the layer to Color and 45% Opacity.

Part 2 - Text + Glow = Awesomeness

OK, we now have a nice background! So let's add some text. I've used the font Trajan because it's a really dramatic looking font. Here I've placed the text in the colour #cb9328, then set it to Linear Dodge (Add) with an opacity of 8%.

What we're going to be doing with our text is making it look like the top half of the text is coming out of the background and is red hot with flames flickering off. This means we're going to run a lot of effects and apply layer masks to them so that only the top half shows while the bottom half reverts to faded out text like we have currently.

Step 8

So first create a new layer group to put all the text layers in - because there will be a lot of them.

Then duplicate the text layer and set the colour of the duplicate text to #5e3f1c.

Step 9

Now set the newest text layer to Overlay and 70% opacity. It should look kind of reddish (as shown below).

Step 10

Now duplicate the text again and set the latest duplicate to a yellowish colour - #cb9328. Then set this to Linear Dodge (Add) and opacity 30%.

Next we add a layer mask and draw a gradient so the latest text layer fades out as shown below, and beneath you can see the reddish coloured combination of the bottom two text layers.

Step 11

Next we duplicate the text layer yet again, but put this layer right on the bottom. Set the colour to black - #000000. Then go to Filter > Blur > Gaussian Blur and it will ask you to rasterize the text, click yes to that, and then set the radius to about 4px.

Then CTRL-click any of the other text layers and go back to the black layer and hit delete so you are just left with a sort of shadow. Then duplicate this layer and merge it with the first so the effect is heavier. You should have something that looks like the screenshot below.

Step 12

Once again, add a layer mask so the shadow quickly fades out as shown. This makes it look like the text is coming out of the page.

Step 13

Now duplicate our black layer again and using the Smudge Tool (R) and a largish soft brush you want to just smudge the shadow around so it looks like burn marks.

Step 14

Here's how our text is looking now. I actually created two sets of "burn" marks, and then four sets of the shadow layer each blurred a little more than the last and each faded back.

Step 15

Now it's time to make the top part of our text glow. So first of all, duplicate the text layer again and place this layer at the very top and set it to a yellow color - #dc9a08.

Then run a Filter > Blur > Gaussian Blur over it with radius of 8px. Then grab a large soft eraser brush and just erase away parts at the bottom so it's kind of uneven.

Step 16

Set out first glow layer to Soft Light. You might want to repeat the process, erasing even more so the top part is even glowier.

Step 17

Now duplicate the text layer yet again and place this at the very top. This one should be again the same yellow (#dc9a08).

Then go to Layer > Rasterize > Type and turn the text into a flat graphic. Then CTRL-Click the layer and go to Select > Modify > Contract and use a value of 1px. Then press Delete to delete everything except that 1px outline.

Step 18

Now set the 1px layer to Overlay. and you should have something like the image below.

Step 19

Now to our 1px glow, add a layer mask to fade it out down the bottom as we've been doing with the other layers.

Then duplicate the layer, and run a Filter > Blur > Gaussian Blur set to 1px. Then duplicate this layer again and blur it by 2px. Then duplicate the layer again and blur it by 4px.

Then CTRL-click any of the text layers, press CTRL-SHIFT-I to inverse the selection and go through each of the glow layers and press Delete to remove any of the blur that has strayed out of the boundary of the text.

The idea is that we want the edges of the text to look red-hot with it fading in to an overall hot glow on the text.

Step 20

Next we duplicate all four of the glow layers and merge them together. This should result in a layer on top which is the original bright yellow.

Grab the smudge tool and run over the text smudging it up to look like heat waves coming off the text, as shown.

Step 21

Now set this latest layer to Overlay and you should have something looking like this!

Step 22

Now we've pretty much finished our text. I went through and duplicated some of the glow layers to make it look even more fiery. Feel free to experiment with getting a real red-hot glow look by doing so.

Step 23

Next in keeping with the last wallpaper, I've gone an added a quote underneath my main text. This provides a nice embellishment to the page. Try to use colours that fit in with the background and text layer so it doesn't stand out too much, because we really want this to be a secondary element to the main text. I've used Swiss Light Condensed as my font, and laid it out just like in the previous Grass Text tutorial.

Part 3 - The Flames

Finally, with all our preparation done, it's time to add the actual flames! For this we need some images of fire set against a plain black background. A good photo is hard to find, and try as I did I couldn't find a really great free photo. So in the end I used this photo from Fotolia which you can purchase using the link below. There was also an OK photo from Flickr which I've also linked to and which I ended up using later for the "E". So you might want to grab that too.

AcheroN - Fotolia.com
Peasap - Flickr.com

Now the technique for copying the flames over is actually really simple. I actually only learn this technique recently when reading one of Nik Ainley's tutorials for DigitalArts magazine called Create Amazing Photomontages where he did it with water.

What you need to do is:

Open up the flame image in Photoshop
Go to the Channels tab and find the channel with the highest contrast which for images of fire should be the Red Channel and click on it
This will make your image appear black and white, and because we're on the highest contrast layer it will seem really bright white. Now CTRL-click this channel and it will select all the pixels in that channel.
Click back to the RGB channel and copy the selected pixels
You can now paste the flames into your main canvas!

This is actually a really, really useful technique for copying something translucent like fire off a flat background. And as you'll see by visiting Nik's tutorial, it's also great for copying water!

Step 25

OK so here we've pasted the flames on to our main canvas. (For clarity I've also temporarily switched off the text layers). As you can see we've got the fire without the black background and it's partially transparent which means it'll look super on top of our text.

Step 26

Now the next thing to do is to cut up our one bit of fire into a few pieces. Just duplicate the layer and switch off one as a backup first. Then using the pen tool, cut up the fire so you work with the contours of the flame so it looks natural. Here you can see I've produced four pieces of flame from the one image. You can also try flipping bits around to make them seem more random.

Set the layers to Screen mode so that any remaining black parts are totally gone and it's even more transparent.

Step 27

Now because my text is just four letters, I need four separate pieces of fire. For the fourth one (on top of the E) I actually grabbed that flickr photo and repeated the same process as earlier to create another flame. Also the fire on the letter 'I' has been squashed a little as well to make it look more random.

Step 28

Applying the fire is really as easy as moving the flames over the text. You want to try to match the flames to the shape of the letter so it looks like they are dancing off the letters.

Step 29

OK here I've placed all four bits of flame over the top. It's not bad, but you can see that the I and the R have the same flame and also all the flames aren't very tall.

Step 30

So here I've gone through each flame and using the transform tool stretched them vertically. Also I used a bit of judicious erasing to make the flame on the 'I' look a little more unique.

Step 31

Now to make them look even more lit up, duplicate each flame layer, run a Filters > Blur > Gaussian Blur with a radius of 3px and set the layer to 15% opacity so it provides a bit of glow around the edges of the flames.

Step 32

So we're pretty much there! This is how the composition looks.

Step 33

Finally we'll add a last highlight. So create a new layer above all the others and draw in a white to black radial gradient as shown. Set this layer to Overlay and 40% opacity.

Finished!

And there we have it, a text on fire effect! In the next tutorial in the series we'll be producing the Air image, however it'll be in two weeks, not one - as I'm taking a few days off work!

If you're interested in create flames from scratch in Photoshop, you might also like to check out this classic tutorial that coincidentally uses the exact same typeface! It's a Photoshop 6 tutorial and I can still remember reading it like a half decade ago, but it's still very relevant, even if the screenshots feature a super retro Mac interface.