Quick Tip: Use Coloring Techniques to Add Depth to Your Artwork

Posted on February 1, 2013 by admin

Do your illustrations look flat and you can’t figure out why? In this quick tip tutorial, we will explain how to add depth to your illustrations using a simple coloring technique. Let’s get started!

Step 1

Start with a simple sketch. Sketch anything you like. In this tutorial, I drew a dragon’s head.

Step 2

Create a layer under the sketch and lower sketch’s layer Opacity. Then grab a hard brush with 100% Opacity and Flow to paint a basic shape for your picture.

Step 3

Now select the sketch layer and choose Create Clipping Mask from Layer menu (or click Alt + Ctrl + G) to cut these parts of the sketch that jut out of the shape.

Step 4

Create a layer under the sketch layer (it will be clipped automatically) and sketch some details.

Step 5

Add a layer above those (don’t clip it) and add the details that aren’t part of the picture you’re already painted (like teeth). Then come back to the shape layer (that one that gives shape to all the clipped layers) and fix the edge so that it’s not too smooth (for example, if you’re drawing a cat, draw some fur tufts).

Step 6 – The Wrong Method

Now, I’m going to show you what NOT to do. It’s really important to fully understand a mistake that many artists make. So, read these steps and see if it’s something you do and then I’ll show you how to avoid it.

In this step, I added some highlights. Of course, if the base color was red, the light should be pink, right?

Step 7 – The Wrong Method

Now some shades… I choose dark red (it’s so dark that it’s almost black) for it.

Step 8 – The Wrong Method

Now, to mix both lights and shades, I take red, soft brush and paint a little over them. I also paint the horns, little spines, and the eye.

Step 9 – The Wrong Method

I shade the horns and the teeth with the same technique like before – I use dark pale-yellow for it.

Step 10 – The Wrong Method

My picture is so flat that I want to use some more lights and shades. But, since I used the lightest and the darkest red, white and black is all that left. And, how do you like it? Theoretically, it’s a good picture, but something’s wrong with it. I spent two years trying to figure what, and now I’ll show you how to avoid this dull effect. Let’s come back in time to Step 5.

Step 11

Now let’s pretend Steps 6-10 never happened. First rule – "white" light of sun is warm, and it means it’s never really white. That’s why using white for lighting gives you an unrealistic effect. And so does pink on red surface, because there is nothing else but red mixed with white. It’s the same with the shades – they’re not black. So, how to find this perfect color for shading and lighting? Here’s the solution: Color Scheme Designer. Copy the hexadecimal value of your base color and put it into the program. Then choose Complement tab and – that’s all. The perfect shade for red is green.

Step 12

Before applying this trick, change your resolution to 300 dpi (Image > Image Size > Resolution). It will let you draw more meticulously. Now use dark green for shades.

Step 13

And light green for lights. Here comes another trick – change brush mode to Linear Light – it gives the effect showed on the ball. Warning! Before doing it merge the base layer with the clipped ones. Brush mode affects only the layer you’re drawing on.

Step 14

If you used too strong lights, you can soften it with soft brush with base color (Brush Mode: normal). Just don’t touch the edges of the details or you’ll make it blurry.

Step 15

The picture above looks done, and actually, we can consider it done (once you’ve finished the teeth, of course). It’s all up to your needs. You can stop now if you want to, I’ll just show you how to add a sparkle to your picture. Use Color Scheme Designer to find the shade for horns/teeth color (if you used some yellowish shade, it’s blue), you can add some more dark greenish shade to the base too if you find it necessary.

Step 16

Now, to make it more alive, you can add some red light around the eye. Linear Light Mode is great for little details like sparkles. Just don’t overdo it, or your picture will seem… wet.

Step 17

Now I’ll tell you about light theory. We might place one light source in our scene, but it would only work if our object was in a dark empty space where all the light that misses it is fully absorbed. I’ll explain it in more detail in next step but now let’s place this one main light source.

Step 18

Now time for reflected light. Sky seems blue because it absorbs all the colors of sunlight but blue – and reflects it to our eyes. So, my dragon head will be lit with some blue too, from the opposite of the main light source (and if there was a green forest behind it, it would be lit with green – you get the main idea).

Step 19

If you want a warmer effect, you can use brush in Vivid Light Mode. It works just like Linear Light, but it affects only light areas and looks warmer in the end.

Final Image

Quick Tip: How to Draw Realistic Eyes in Photoshop

Posted on January 21, 2013 by admin

The eyes are one of the most important elements in any character or portrait illustration. In this tutorial, we will show you how to quickly draw realistic eyes in Photoshop using digital painting techniques. Let’s get started!

Step 1

Start with a 50% grey background and a sketch that will define the general shape of your eye. First, draw a shape of eyeball (it doesn’t really need to be perfect circle), and the iris looking in your chosen direction. Then draw the edges of the eyelids, according to the green lines. When you’re done, sketch whole eyelids – they should cover the eyeball.

Step 2

Now you need to define the light source. Let’s say it’s on the right. Choose a hard brush with 17% Flow and Airbrushing mode on, then paint some lights with white and shadows with black

Tip: click "D" to set your colors to default black & white, then click "X" to switch between them). Don’t forget to stress the edges of eyelids with thick lines – without those they would seem flat.

Step 3

Draw the rim of the iris with black – start with thick circle and then sketch some lines heading to the pupil. Don’t make them too long though, you’ll need this space later. When it’s done, choose some lighter shade and draw a rim close to the pupil, but not touching it (it should make the middle ring). Sketch it like a circle with ragged edges.

Step 4

Before you fill the iris with lines heading to the pupil, you need to learn something about structure of the iris. It looks like a crater – it’s convex from the rim to the middle, then there’s a funnel with pupil at the bottom. Use this image to place your lights and shades correctly.

Step 5

Now you can smoothen your painting, but don’t use Smudge Tool for this – it’s too hard to control. Choose a soft brush (or lower the hardness of your current one to 0%), then pick a shade between the colors you’ve painted, and paint this area with the picked shade. It may sound complicated, but just try it – it gives much better effect than Smudge tool. Use this brush to lighten the rest of the eyeball (click in the middle of grey area just once, so that white doesn’t touch the edges). Another nice trick: when stressing the bending of the upper eyelid with black, paint some soft shade going up in the bright part, and down in the dark part.

Step 6

Now put some shadow under the upper eyelid, covering part if the eyeball. Use a soft brush to blend the rim of the iris and the pupil too. They’re built into the eyeball, in the end.

Step 7

Select a hard brush and change its mode to Linear Light, then choose white. Use it to add some shininess to your eye, just be careful – you can easily overdo it. Paint some spots wherever the eye should look wet, and – it’s another trick – draw a shadow of the eyelashes with it. Yes, white shadow. The effect will be astounding, just remember about proper waving.

Step 8

It’s time for eyelashes. Important thing is they don’t start on the part of the eyelid that touches the eyeball (that’s a common mistake). Remember the edges you’ve drawn in step 2? This is where the eyelashes grow from – from this brink of the edge that doesn’t touch the eyeball. Another thing you need to remember of is eyelashes are bent. To stress it easily, just draw some short lines going down, then add the bent part (draw the eyelashes in tufts, not individually – it’s more natural).

Step 9

The lower row of the eyelashes should be less dense and not so visible. They’re shorter too. Besides, notice that when light comes into the eye, it reflects on the eyelashes – use your brush with Linear Light to add some shiny lines there.

Step 10

You can stop now, but I’d like to show you some trick with coloring. Create a new layer and change it’s mode to Color. Now you can use soft brush to put colors, and the eye will still be visible (in the picture below the first row shows the colors I used, the other – the final effect).

Final Image

Quick Tip: How to Create a Metallic Text Effect Using Layer Styles in Photoshop

Posted on January 14, 2013 by admin

In this tutorial, we will explain how to create a metallic text effect using layer styles in Photoshop. Let’s get started!

Tutorial Assets

The following assets were used during the production of this tutorial.

Step 1

First of all install the .pat file named black_pattern_by_fluctuemos-d5mermc.pat. You have to double click the icon. It’s that simple.

Step 2

Create a new document. Set width to 600px and height to 450. Resolution must be 72 DPI.

Step 3

Duplicate the background (Go to Layer > Duplicate Layer > OK) and rename the new layer as ‘Background Pattern.’

Step 4

Double click on ‘Background Pattern’ and the ‘Layer Style’ window will appear. Go to ‘Pattern Overlay’, select ‘PATTERN’ from the list and press OK.

Step 5

To make the background look even better we are going to add inner shadow. You have to double click on ‘Background Pattern’ and, once the Layer Style window appears, set the following values.

Step 6

Type the word ‘Metalkid’ or a text of your choice using Strasua font. Set the font size to 100 pt and tracking to 20. For best quality, change the anti-aliasing mode to Sharp.

Step 7

Using the ‘Move Tool’, select the text and background layer, then click the align commands: ‘Align Horizontal Center’ and ‘Align Vertical Center’ on the top menu to center it, as shown in the image below.

Step 8

Add a layer style to the text, you have to right click on the layer in your layers menu and choose Blending Options. Make sure you use the following values and press OK.

Step 9

Let’s start with the text effect! First we are going to add some shadows to separate the text from the background. Go to Layer Style > Drop Shadow and use the values shown in the image below.

Step 10

Now we are going to create a gradient overlay, it will give a base to the metal effect. Go to Layer Style and modify ‘Gradient Overlay’ setting the following values.

Tip: To create a new point in the gradient you have to click under the gradient bar. Clicking each one of the color stops allows you to modify Location and Color.

Step 11

Go to Layer Style > Inner Glow and use the settings shown below to brighten up the edges.

Step 12

To start creating the 3D look go to Layer Style > Bevel & Emboss and use the following values.

Step 13

Now we are going to emphasize lights and shadows to give more realism to the metal effect. Go to Layer Style > Satin and use the settings shown below.

Step 14

It’s almost done. In this final step we are going to accentuate edges and corners, giving the text the 3D final look. Go to Layer Style > Stroke, and use the values shown in the image below.

Final Image

Quick Tip: Create a Crisp Metallic Text Effect in Photoshop

Posted on October 11, 2012 by admin

In this quick tip tutorial, we will explain how to create a crisp, metallic text effect using just a couple of layer styles in Photoshop. Let’s get started!

Tutorial Assets

The following assets were used during the production of this tutorial.

Step 1

Before opening Photoshop, install the font Rothenburg Decorative and these grunge brushes.
Open Photoshop and Create a New Document, 1800 x 1300 pixels in RGB mode, 72 DPI and finally then Fill the background with this dark grey color #1f1f1f.

Step 2

Create a New Layer, name it ‘texture’ and using these Grunge Brushes click a couple of times in the center of the document using a white color. Use different brushes, try to cover the center of the document, varying the textures.

Step 3

Double-click on the thumbnail of the Layer ‘texture’ to open the Layer Style panel. Into the ‘Blending Options’
Reduce the ‘Fill’ to 0, then apply a ‘Drop Shadow’ and an ‘Inner Shadow’ using these settings. This will give the texture a realistic embossed look.

Step 4

Click on the ‘Add Layer Mask’ icon, then click Command/Ctrl + (I) to invert it.
Pick a big soft Brush (hardness: 0% – size: 950px) and click in the center of the document. This way the ‘texture’ Layer will be shown only in the center, fading on the edges of the document.

Step 5

Using the ‘Type Tool’ (T) and these settings, type the word ‘Othello’ or whatever you want. If you can’t see the ‘Character Window" go to Window > Character.

Step 6

Open the ‘Layer Style’ of the ‘Othello’ Text Layer and apply these settings. Below each step you can find a preview for the effect just added.

Step 7

Once you’ve modified the Style, click Ok. Now select the word ‘Othello’, using the Type Tool (T). Select everything beside the first capital letter and reduce the kerning to -5 as in the image below. You can find the Character Window under Window > Character.

Step 8

Duplicate this Layer with Command/Ctrl + (J), right-click on the Layer’s thumbnail and choose ‘Clear Layer Style’. This way the text below matches exactly the one above, and now we can add more effects. My favorite way to work with 2 Layer Styles, is to create a solid base as we did to the first Text Layer, and then add lightings and reflections on the second Layer above. This way you can blend easier the lights and colors with the textures of the Layer below.

Step 9

Let’s go on, adding a Layer Style to this second ‘Othello’ Text Layer. Double click on its thumbnail to open the Layer Style panel.

Step 10

The effect is pretty much done, but we need to make it look crisp and realistic, in this final step. Take a look at the trick with the ‘Stroke’: dropping down it’s Opacity to ’0′ it works almost as a layer mask, hiding the Layer on its edges. A Stroke of 3px ‘Inside’, for example, will hide the Text for 3 px along the edges, revealing what’s below in that 3px range. Once you’ve finished with these settings, click Ok to apply the effect.

Conclusion

Remember that when you Save the final effect, as a jpg image for example, it may look different, sharper, and more defined overall.

Quick Tip: Create a Bloody Text Effect in Photoshop Using Layer Styles

Posted on September 26, 2012 by admin

In this quick tip tutorial we will show you how to create a bloody text effect using layer styles in Photoshop. Let’s get started!

Tutorial Assets

The following assets were used during the production of this tutorial.

Step 1

First create a new .PSD document, 600 x 400 pixels in RGB mode, 72 DPI with WHITE background color. Now prepare your assets. Install the Gypsy Curse font into your computer and open the .PAT file. Before we start preparing our background Set your foreground color to #333333 and hit "ALT+DELETE" while the Background layer is selected. This will change the background color to dark grey.

Step 2

First we need to make a layer from background. To do this – right click on Background layer and choose "Layer from background" name it as you wish and hit OK. Now go to Menu > Layer > Layer Style > Blending Options and use the settings below. You can also access Blending Options with two faster ways. First and the fastest way is to double click on the layer in your layers menu. Other way is to right click on the layer in your layers menu and choose Blending Options. When you are done with all the settings below, don’t forget to hit "OK" in the Blending Options window.

Step 3

Now we can start making our text effect. First choose a type tool and change font to Gypsy Curse, size around 235 pt and anti-aliasing to Sharp. Now type your text somewhere in the center of the image. You can write any word, but in this tutorial I’ll use "BlOOD". All letters except "L" uppercase.

Step 4

Go to Menu > Layer > Layer Style > Blending Options and use the settings below on your text. You can also use the quicker methods to access Blending Options from “Step 2″ of this tutorial. When you are done with all the settings below, don’t forget to hit “OK” in the Blending Options window! This is the main text layer and will do most of the effects.

Step 5

Now duplicate your text layer by selecting the text layer in layer menu and going to Menu > Layer > Duplicate layer and name it as you wish. Now go to Menu > Layer > Layer Style > Clear Layer Style as we will make different style for this layer. Finally, go to Menu > Layer > Layer Style > Blending Options and use the settings below on your text. You can also use the quicker methods to access Blending Options from "Step 2" of this tutorial. When you are done with all the settings below, don’t forget to hit "OK" in the Blending Options window. This text layer will be above the 1st text layer in your layer menu.

Final Image

Tell-tale Signs of a Potentially Bad Client and How to Deal with Them

Posted on September 13, 2012 by admin

As graphic designers most of us has that client from hell sort of story to tell. Especially those starting freelance designers since they tend to lower their rates to encourage clients to hire them. More often than not it’s the new guys in the industry who gets most of these so-called clients from hell since they (the freelancers) are charging significantly lower than the more established ones. While we keep ourselves from being abused by making use of contracts there are times that the client’s horrendous attitude really kills our will to work consequently slowly making us feel inferior about ourselves. One thing that we designers can do is spot which is the good client (or the tolerable one) and avoid the potentially dangerous ones.

I have listed some of the tell-tale signs of clients that can be potentially bad for your business and how you can deal with them.

Tell-tale sign 1: “I know someone from the family who can do it but they are busy as of the moment.”

Either these people are related to a real graphic designer (hence the busy reason) or they see you as another option since cousin Matt who plays with Photoshop and had posted some of his work in Facebook which garnered 3 likes but he is too busy working on this:

Source: youarenotagraphicdesigner.com

These are the type of people who often take graphic design for granted since they know someone related can work their way around Photoshop after a few tutorials.

But this person is exactly my client right now:

One thing that you can do is that you can show them the difference of a good design from a bad design. If they are stubborn and they still undervalue your work drop the job and move on. Simple as that since they have someone from the family who can do it anyway.

Tell-tale sign 2: The X-Deal

Just because you are new to the industry does it mean that you need a client’s testimony just to prove how good you are. If a client is asking you to do something for free in exchange of promotion just politely decline (not unless its a big of a company something like Apple or IKEA which I highly doubt). Of course you are new to the game but getting paid by promotion is a joke and as designers promoting ourselves is one of our tasks, which is why we have our portfolios posted online.

But this person is exactly my client right now:

Consider yourself lucky if your client gives you all the creative freedom you need but for those who are not, better drop it because you could have used your time doing personal work or looking for someone who is willing to pay instead.

Tell-tale sign 3: That’s Not Complicated

We graphic designers often hear the phrase: “That shouldn’t be too hard to do” or “that’s easy isn’t?” clients who often use this phrases only demonstrate their lack of understanding of how design works. These people seem to think that we designers have the easiest job in the world (since we are in front of the computer most of the time). Apart from that they also think that a design project doesn’t cost that much and it won’t take time to finish the job.

ME: “Hello, I’m phoning regarding the image you sent earlier. It’s way too small, it’s only 640×480 pixels. Ideally we would need something 10x that size. Also it’s out of focus and essentially we can’t use it. It would look pretty terrible at A4 size.”

Client: “Ah, I see. Can’t you do anything with it? Can’t you work your usual magic on this?”

Me: ”I’m afraid not. It simply is not of a high enough quality that I would recommend using it on an A4 magazine advert. If we could get a high resolution photo taken by a professional photographer then maybe we could go further from there.”

Client: “Can’t you just wave your magic wand and make it better?”

Me: “I’m not Harry Potter.”

Client: “Well I’m very disappointed in you….”

Source: Clients from Hell

But this person is exactly my client right now:

I suggest you explain to them as much as possible the process of how graphic design is made and how it works. Show them the process that good design is not as easy as a flick of a wrist.

Tell-tale sign 4: “We want to hire you because you are the cheapest available.”

If this client is a charitable institution then sure go ahead, but if it’s not and your would be client often mentions the phrase: “we just don’t have enough funds” then this is a bad sign. This can very much lead to complications like delayed paychecks or worst you might not see that check at all if you are not careful enough.

But this person is exactly my client right now:

This is why we designers make use of contracts and a 30-50% up-front payment before taking on the job. Not only does it assure the client that you will finish the job, but it will also assure you that you will be paid at the end of the project. In case they do not honor the contract better get yourself a lawyer.

Tell-tale sign 4: Vague Person or I-Don’t-Know-Why-Don’t-You-Show-Me-Something Person

Most of the the clients have at least an idea for a project but once in a while you will get to face some clients that don’t know and don’t have any ideas at all. Most of the time they just want something like a website or a something to market themselves even though in reality they don’t need it, they want one because their competitors have one. These clients are often indecisive and known to be giving out really vague instructions.

Client: Well… we just want the logo to be less corn-related. Can you just make it less corn-like?

Me: I’m sorry? I was under the impression was that this was exactly what you were looking for.

Client: No, no, it is. It is! But we discussed it and we think people would probably be bored by the whole corn part. So let’s make it less corn-related.

Me: I must not be understanding. The product you’re trying to sell is still corn, right?

CLIENT: Yes. But try not to draw to much attention to that.

Source: Clients from Hell

But this person is exactly my client right now:

Good communication is the key in getting through this mess. Do not hesitate to tell your client that their instructions are vague and really obscure. If they still prove to be difficult to work with despite all the patience that you poured in, it might be a good idea to sack them and move on.

Tell-tale sign 5: Mr/Ms. Unrealistic

The name says it all. These are the clients that will put you through unrealistic deadlines and expect a lot despite the cheap pay that you will get. Sure, working on a rush design is great since you can charge more and this will be a breeze if the client is cooperative and considerate (which by the way are rare nowadays).

But this person is exactly my client right now:

As much as possible try to tell them that such ideas won’t work, give them proofs that their budget wouldn’t allow it, walk them through the process of design and make them realize that a good design takes a bit of time to complete.

Tell-tale sign 6: Know-It-All

If your client often mentions: “I know design too” or “Yep, I know that” it could either mean that he is genuinely a person with a background in design or just some guy who thinks he knows design. This tell-tale sign is much of a 50-50 split since if clients have a bit of knowledge in design then getting your point across wouldn’t be too difficult. You no longer have to bother explaining why you choose to use 2-3 typeface is better than using 6 typefaces all at the same time. Things might get sour if you happen to come across to a guy who thinks he knows design. They would often ignore your solutions and insist that their knowledge in design is way better than yours.

A good example of how things will turn out is this:

But this person is exactly my client right now:

You can either let them go or bear with them. There are some days that we graphic designers have to bow down to the client’s will just to put food on the table. It is not worth arguing with a client who thinks they know it way better than you do.

Tell-tale sign 7: Always Late

If you find yourself in a client meeting and your client is awfully late you might want to reconsider taking the job. Because this only goes to show how much your client values your time. As graphic designers being on time is a crucial part of the package that we sell to customers. We value our client’s time and as much as possible we want to finish the project right on schedule, so how come the client won’t do the same for you.

But this person is exactly my client right now:

As much as possible tell them that you need the materials, you need to meet and whatever it is that you and your client has to do to get the job done. Just don’t delete emails, text messages and call logs as proofs that you reminded them in case they turn the story around against you.

Tell-tale sign 8: The Grouch

If your would be client often slips in the: “I once hired this guy but he screwed it all up” or “I remember this one designer who is equally as bad as the other guy” a couple of times in your conversation run fast and avoid them at all costs. These are the type of people who are never satisfied with anyone’s work because of their insane expectations. They are most likely to give really tight schedules and drive you around like a horse, since they will ask you to revise your design over and over again until they are satisfied (which they are not). Nothing is wrong in being a perfectionist but some clients can be a little too over and cross the line between a perfectionist to an obsess maniac.

But this person is exactly my client right now:

This is a big challenge for you. If you get this person to be amused and overall happy with your work then you have done very well, if not well at least you know how to deal with them. You can also go ahead and ask them why did they fire their last designer and what did go wrong with project. This will help you gauge whether who’s fault really is it. If they give out the impression that all the designer this person worked with in the past was really bad then ditch them because you wouldn’t want to be in their hate-list.

Communication goes a long way in dealing with such clients, but remember that you are not their slaves and that you are also trying to put food on the table so do not let them abuse you. Looking for the right client involves a lot of patience and hard work so do not despair, if ever you found yourself in those sticky situations just remember that everyone goes through this phase. Clients that are worth keeping are those who value your opinion, work and pay you enough for all the trouble you went through. If ever you find that client be sure to foster and nurture a good work relationship with them.

Drop by the comments section below if you think we missed a tell-tale sign of potentially bad clients! Be sure to check us out on Facebook, Twitter and Google+ also do not forget to subscribe to get dibs in all things graphic design.

Quick Tip: Create Light Leaks and Lomo Effects Using Actions in Photoshop

Posted on September 7, 2012 by admin

In this quick tip tutorial, we will explain how to create light leaks and lomo effects for you photos using actions in Photoshop. Let’s get started!

Tutorial Assets

The following assets were used during the production of this tutorial.

Step 1

Begin by opening your images and navigating to the Window Tab of Photoshop. In the Window Tab click Actions (Alt+ F9). Once you have opened the actions panel you can begin creating your first lomo leak.

Step 2

Now that you have the actions panel open, we can begin our first light leak. Start by clicking the “new action” icon on the panel and title your photo action. Once titled, begin adding effects.

Step 3

For the first effect we will add Curves. Try to replicate the image shown as best as possible. It does not have to be exactly the same.

Next add a Gradient from the “fill or adjustment layer”.

Change the color to “fc2c2c”, then change the angle to -100. The rest of the gradient can stay the same, just click ok.

Now change the layer style to Screen and lower the opacity to 90%.

Step 4

Now to wrap the action up, group the two adjustment layers, and name them “Effects”. Once finished click the Stop button and your action is complete.

Step 5

You can now run this action on any photo. Below, I have included a brief video to demonstrate how to install and run an action on a photo.

Conclusion

Add this action to your own photos and experiment with different colors to create beautiful light leaks and lomo effects! Also, the download files for this tutorial include 3 actions that you can apply to your own work.

Quick Tip: Create a Neon Text Effect in Photoshop

Posted on September 6, 2012 by admin

In this tutorial we will show you how to make a neon text effect in Photoshop using layer styles and textures.
Let’s get started!

Tutorial Assets

The following assets were used during the production of this tutorial.

A Brick Wall

Step 1

First make a new PSD document 1200 x 600 pixels resolution 72 Dpi. Now open the brick wall texture and copy and paste it into your new PSD document. Command/Ctrl-T (transform) the texture and resize it until you are happy with it. Make the brick wall texture darker with levels – Image – Adjustments – Levels or Command/Ctrl – L.

Step 2

Now make your text with the font "Impact." I used the settings below.

Step 3

Now we are going to apply some layer styles. Double Click on the text layer to open Layer Styles. Select Stroke and use the settings below.

Now select Drop Shadow

Step 4

Now we are going to make the grill texture. Make a new document 10 x 10 pixels 72 Dpi. Enlarge the document to 3200% by pressing Command/Ctrl – +. Use a hard brush size 1 px to make 2 lines of black like below. Now save this pattern by going to "Edit – Define Pattern" and name it Grill Pattern. Close this document.

Step 5

Copy the text layer, right click on the text layer and choose "Duplicate Layer." Now remove the layer styles on this layer by right click on the layer and choose "Clear Layer Styles." Double Click on the text layer to open Layer Styles. Use the settings below.

Step 6

For the little 3D effect on the text move the second text layer 5x up with the arrows on your keyboard with the Move Tool (v) selected.

Step 7

Now we are going to make the neon. Again copy the text layer, right click on the text layer and choose "Duplicate Layer." Now remove the layer styles on this layer by right click on the layer and choose "Clear Layer Styles." Use the settings below.

Click on OK. Right click on the "fx" of this text layer and choose "Create Layer"

Step 8

Now we are going to make the layer styles for the neon on the layer we just made. Use the settings below.

Step 9

Select the "Eraser Tool" (e) and erase some parts from the neon for a realistic look. You can also draw on this layer with a hard Brush for some curves.

Step 10

You can draw some wires if you like. Make a new layer (put this layer below the neon layer). Use a hard brush size 7 and size 4 to draw the wires. Use the setting below

Step 10

Put a gradient fill on the background. Double click on the brick wall layer and use the settings below

Final Image

Quick Tip: Create a Shiny, Gold, Old World Text Effect in Photoshop

Posted on August 30, 2012 by admin

In this quick tip tutorial we will show you how to create a shiny, gold, old world text effect using layer styles in Photoshop. Let’s get started!

Tutorial Assets

The following assets were used during the production of this tutorial.

Font – Pieces of Eight
Metal Patterns .PAT (In Source Files)
Stripes Pattern .PAT (In Source Files)
Background Image (In Source Files)

Step 1

First prepare your assets. Install the Pieces of Eight font onto your computer and open both .PAT files. Finally open the "background-img.jpg" which is 600×400 px and will be your workspace.

Step 2

Now we can start making our first text effect. First choose the type tool and change font to Pieces of Eight, size should be around 280 pt for letter "G" and around 350 pt for the rest of letters with anti-aliasing set to Sharp as seen on picture below. Now type your text somewhere in the center of the image. You can write any word, but in this tutorial I’ll use "Gold".

Step 3

We are ready to start with our text style. Go to Menu > Layer > Layer Style > Blending Options and use the settings below. You can also access Blending Options with two faster ways. First and the fastest way is to double click on the layer in your layers menu. Other way is to right click on the layer in your layers menu and choose Blending Options. When you are done with all the settings below, don’t forget to hit "OK" in the Blending Options window! This text layer will add the main gold text effects into the final result.

Step 4

Now duplicate our "Gold" text layer so the duplicated layer will be above the original one. First we clear the previous style on this duplicated layer by going to Menu > Layer > Layer Style > Clear Layer Style then we start a new one by going to Menu > Layer > Layer Style > Blending Options and using the settings below on our text. You can also use the quicker methods to access Blending Options from "Step 3" of this tutorial. When you are done with all the settings below, don’t forget to hit "OK" in the Blending Options window! This text layer will add the depth into the final result.

If you are happy with this result, you can be done with this tutorial, but in next steps I will add more flare to the final effect.

Step 5

Now we will create lighting dots. We start with one and will duplicate as many as we will need. So for now, you can hide both text layers to have clear workspace. Choose the "Ellipse Tool" and draw 4 circles around the same diameter, color and layer arrangement as on the picture below. You should also rename the layers to Circle 1, Circle 2, etc., as I will use it names in next steps.

Step 6

When you are done creating the circles, use vertical and horizontal centers alignment.

Step 7

Next step is to add “Gaussian Blur” to circles 1,2 and 3. Select the “Circle 1″ layer and go MENU > Filter > Blur > Gaussian Blur and use the Radius settings from the picture below. Repeat it for Circle 2 and 3, but with different Radius setting.

Step 8

When you are done with blur, we will be doing some layer settings. Use the same layer settings as on the picture below.

Step 9

Final step in creating lighting dot is to group all 4 circle layers and set the Opacity of the Circles folder to 60%.

Step 10

This is the fun part of this tutorial. Make both text layers visible again and move the lighting dot on the edge of the text. Duplicate the whole "Circles" folder for more dots and spread it through the whole text. On the picture below you can see the positions I used in this tutorial, but it is up to you where you want it to have them. You can see on my example that there are places which shine more then others. It is simply made by multiplying two "Circle" folders.

Final Image

Quick Tip: Create a Sports-Themed Text Effect in Photoshop Using Layer Styles

Posted on August 23, 2012 by admin

In this quick tutorial we will show you how to create sports-themed text effect using layer styles in Photoshop. Let’s get started!

Tutorial Assets

The following assets were used during the production of this tutorial.

Step 1

Preparing assets and creating document. First create a new .PSD document, 600 x 400 pixels in RGB mode, 72 DPI with any background color. Now prepare your assets. Install the SF Sports Night fonts into your computer and open .PAT file.

Step 2

Making Background. First we need to change our background color. Change your foreground color to #111F2A as seen on picture below. Then easily hit Alt+Delete to and your background should be changed to that color now.

Now make a layer from the background by right clicking it in layer menu and choose “Layer from Background” option. Next go to Menu > Layer > Layer Style > Blending Options and use the settings below. you can also access Blending Options with two faster ways. First and the fastest way is to double click on the layer in your layers menu. Other way is to right click on the layer in your layers menu and choose Blending Options. When you are done with all the settings below, don’t forget to hit “OK” in the Blending Options window!

For the final background effect duplicate the background layer. you can do this by right clicking on the layer in layer menu and choose “Duplicate layer” from options. We will apply only pattern on this duplicated layer so first we clear the previous style on this duplicated layer by going to Menu > Layer > Layer Style > Clear Layer Style then we start a new one by going to Menu > Layer > Layer Style > Blending Options and use the settings below. you can also access Blending Options with two faster ways. First and the fastest way is to double click on the layer in your layers menu. Other way is to right click on the layer in your layers menu and choose Blending Options. When you are done with all the settings below, don’t forget to hit “OK” in the Blending Options window!

This duplicated layer must be above the original background layer in your layer menu.

Step 3

Start creating text – MAGIC. Now we can start making our first text effect. First choose a type tool and change font to SF Sports Night NS, size around 158 pt and anti-aliasing Sharp. Now type your text somewhere in the center of the image. you can write any word, but in this tutorial I’ll use "MAGIC". As you can see I’ve used Alternate variant of the same font for letter "M". It is the SF Sports Night NS Alternate.

We will now continue with warping our text. Go to Menu > Edit > Transform > Warp and use settings from the picture below.

Step 4

Customizing 1st text layer in MAGIC word. Finally we are ready to start with our text style. Go to Menu > Layer > Layer Style > Blending Options and use the settings below on our text. you can also use the quicker methods to access Blending Options from “Step 2″ of this tutorial. When you are done with all the settings below, don’t forget to hit “OK” in the Blending Options window! This text layer will add some shadows into the final result.

Step 5

Customizing 2st text layer in MAGIC word. Now duplicate our “MAGIC” text layer so the duplicated layer will be above the original one. First we clear the previous style on this duplicated layer by going to Menu > Layer > Layer Style > Clear Layer Style then we start a new one by going to Menu > Layer > Layer Style > Blending Options and using the settings below on our text. you can also use the quicker methods to access Blending Options from “Step 2″ of this tutorial. When you are done with all the settings below, don’t forget to hit “OK” in the Blending Options window! This text layer will add the main text effect into the final result.

Step 6

Customizing 3rd text layer in MAGIC word. Now duplicate our duplicated “MAGIC” text layer so this duplicated layer will be above the first duplicated one. First we clear the previous style on this duplicated layer by going to Menu > Layer > Layer Style > Clear Layer Style then we start a new one by going to Menu > Layer > Layer Style > Blending Options and using the settings below on our text. you can also use the quicker methods to access Blending Options from “Step 2″ of this tutorial. When you are done with all the settings below, don’t forget to hit “OK” in the Blending Options window! This text layer will add some more effects into the final result.

Step 7

Start creating text – SAN DIEGO. Now we can start making our next words with different text effect. First choose a type tool and choose again font SF Sports Night NS, size around 59 pt and anti-aliasing Sharp. Now type your text somewhere in the center of the image. you can write any words, but in this tutorial I’ll use "SAN DIEGO". As you can see I’ve used Alternate variant of the same font for letter "M". It is the SF Sports Night NS Alternate.

We will now continue with warping our text. Go to Menu > Edit > Transform > Warp and use settings from the picture below.

Step 8

Customizing 1st text layer in SAN DIEGO text. Finally we are ready to start with our text style. Go to Menu > Layer > Layer Style > Blending Options and use the settings below on our text. you can also use the quicker methods to access Blending Options from “Step 2″ of this tutorial. When you are done with all the settings below, don’t forget to hit “OK” in the Blending Options window! This text layer will add a shadow into the final result.

Step 9

Customizing 2st text layer in SAN DIEGO text. Now duplicate our “SAN DIEGO” text layer so the duplicated layer will be above the original one. First we clear the previous style on this duplicated layer by going to Menu > Layer > Layer Style > Clear Layer Style then we start a new one by going to Menu > Layer > Layer Style > Blending Options and using the settings below on our text. you can also use the quicker methods to access Blending Options from “Step 2″ of this tutorial. When you are done with all the settings below, don’t forget to hit “OK” in the Blending Options window! This text layer will add the main text effect into the final result.

Step 10

Creating Stars. To make a star, we will need to use a Polygon tool with selected 5 Point White Star as you can see on picture bellow. Draw only one star – we will duplicate the final star later.

We will also continue with warping this shape. Go to Menu > Edit > Transform > Warp and use settings from the picture below.

Step 11

As You can see the style of the stars on final result is the same as on the SAN DIEGO text. We don’t need to customize styles again as we can save those from SAN DIEGO and simply use them on stars. How to do it? First we need to seva both styles used on SAN DIEGO text. Click on the top layer of SAN DIEGO text and go Menu > Layer > Layer Style > Blending Options. There hit the button "New Style…" on the right and check both options in a pop-up window. You can name your style and then hit OK. Do the same with the second layer of the SAN DIEGO text. In my example I named those styles TOP and SHADOW.

After you have saved both styles you can find them in your styles palette. If you can’t see your styles palette – go to Menu > Window > Styles to open it. Now select your "star" shape layer in your layer menu and click on the style "SHADOW" in your style menu to apply it on the shape. Now simply duplicate the "star" layer so the duplicated layer will be above the original one and use the "TOP" style on it.

Now you should see a final effect of the first star. To make another one – simply select both "star" layers (selecting multiple layers can be done with clicking on the first one and then clicking on the second one while holding the Ctrl or Cmd key) and go Menu > Layer > Duplicate Layers. Move both new created layers right and scale them both down a little bit. You will also need to rotate both layers so it will look like on my final image. I have rotated both around 6 degrees.

Do the same as above for the third star, but this time rotate it around 9 degrees.

Step 12

Optionally, you can recolor the first star to be darker as in my tutorial. This can be done by selecting the TOP layer of the first star shape and going to Menu > Layer > Layer Style > Blending Options where you can change color overlay.