Make Yourself Into a Heroes Character

I was editing a random little movie with my friends that we’d shot and I decided to output some random screenshots and this was one of them. I looked at it and thought, “Hey I bet Photoshop could help me make it look like a scene from “Heroes.” So, that’s what I did. Follow the tutorial to see how I distorted the image and give the girl an awesome super power.

The fireball was inspired by a post I saw on Abduzeedo.

Final Image Preview


Getting Started

Download the screenshot of the girl and open up in Photoshop. Also, download and install an abstract light brush.

Step 1 – Making the Selection

We’ll start by making a soft selection around the girl. Use the Magnetic Lasso Tool (L) to draw around the figure of the girl.

Go into “Edit in standard mode” and refine your selection with the Eraser Tool (E). Use a hard brush for the Eraser Tool (E). While using the Eraser Tool (E), black will add to the selection and white will subtract from the selection.

Exit out of “Edit in standard mode” but don’t deselect just yet. Go to Select > Modify > Contract. Enter 3px. Then go to Select > Modify > Feather. Enter 3px.

Step 2 – Separating the Girl

With the selection still selected. Hit command+C to copy and then command+V to paste the selection onto a new layer. Name the new layer “Girl”.

With the Background layer selected in the Layers Palette, go to Filter > Blur > Motion Blur. Apply the motion blur at 268px.

Use the Eraser Tool (E) to soften and blend some of the edges a bit on the Girl layer. Use a very soft, big brush and set the opacity to 30%.

Step 3 – Makin’ it Look Hot

With the Girl layer selected in the Layers Palette, go to Image > Adjustments > Curves. Adjust the curves as shown below.

With the Girl layer still selected in the Layers Palette, go to Image > Adjustments > Brightness/Contrast. Set the brightness to -47 and the contrast to 44.

With the Background layer selected in the Layers Palette, go to Image > Adjustments > Brightness/Contrast and adjust the settings as I did below.

Unlock the Background layer by double-Clicking its lock icon in the Layer’s Palette. Then copy it by option-Clicking (alt-Click on a PC) and dragging the layer.

Next, use the Lasso Tool (L) with a 50% feather to make a selection around the girl like I did below.

Right-Click on the selection and hit “Select Inverse”. With the Background copy layer selected, hit delete on the keyboard. Then go to Image > Adjustments > Curves and set it up like I have it below. Set the layer’s opacity to 50%.

Step 4 – Tilting and Re-shaping the Image

Put the Girl and Background layers in a folder together named “Main” in the Layers Palette. You do this by shift-Clicking the first layer in the Layers Palette and then shift-Clicking the last layer. Then hit command+G (ctrl+G on a PC). This will group the layers together. Double-Click on the name of the folder in the Layers Palette to change it.

With the Main folder selected in the Layers Palette, hit command+T (ctrl+T on a PC) to enter Free Transform mode. Rotate the group -15 degrees. Hit enter on the keyboard to exit Free Transform mode.

Crop the image so that there are no holes in the background. To do this, use the Rectangular Marquee Tool (M) to draw out a rectangle and ten go to Image > Crop.

Step 5 – Making Her Eyes Blue

Create a new layer above your Main group in the Layers Palette. Name it “Eyes”. Select a light blue for your foreground color (#94c4d4). Get a soft brush about the size of the brown in her eyes and paint over each eye as I did.

In the Layers Palette, set your Eyes layer to the Color blend mode.

Step 6 – Putting the Power in Her Hands

Create a new layer group in the Layer’s Palette above all of the layers. Name it “Glow”. All the layers you create in step six will be put into this folder. To create a new group, hit the Create a New Group button at the bottom of the Layers Palette.

Create a new layer in the Layers Palette in the Glow group. Draw a circle in the girl’s palm with the Elliptical Marquee Tool (M). Hold shift when you create the circle in order to keep it symmetrical. Set white as your foreground color and hit option+backspace (alt+backspace on PC) in order to fill the selection with white. Deselect the selection by hitting command+D (ctrl+D on a PC).

Set your white circle layer to 65% opacity. With the Eraser Tool (E), use a small, medium hardness brush. Erase away the parts of the white circle that cover the girl’s two outside fingers.

Set a blur to the white ball by going to Filter > Blur > Gaussian Blur. Set the Gaussian Blur to 4px.

Earlier, you should have downloaded and installed some abstract light brushes. Create a new layer above your white circle layer. Set your foreground color to white. Select the Brush Tool (B), grab an abstract light brush, and throw down a light ray on this new layer that swirls around the white ball. Do a few more. Then hit command+F (ctrl+F on a PC) in order set a 4px Gaussian Blur on your light rays layer (command+F/ctrl+F simply repeats the last filter you did).

Now we can add some sparks to this fireball thingy we’re making. Let’s use Photoshop’s handy Brush Engine. Select the brush Tool (B). Open up the Brushes window (Window > Brushes). Set up your brush like I did below.

Create a new layer and paint some flares coming up from your white ball with the settings we just configured in the Brush Engine.

Change the blend mode on your entire Glow group in the Layers Palette to Color Dodge.

Final Image


If you would like to download a large version of this image, click the image and you will be taken to our Flickr account where the photo is available at a 1024 x 576.

25 Free, Easy to Download Paper Textures

The other day I was searching for some paper textures for another Photoshop tutorial I wanted to do and I was having some problems. It really isn’t hard to find paper textures; they’re all over deviantART, Flickr, and everyone and their mothers’ blogs. With a billion choices, ranging from blog posts to Flickr images to zip files… I got kind of annoyed with all the different sources and methods of downloading paper textures.

So, I decided to do a blog post with my favorite paper textures. I’ve gone ahead and limited my selection. You won’t find “200+ premium textures” here. I’ve taken five textures from five categories I decided were fitting for paper textures: 5 crinkled paper textures, 5 worn paper textures, 5 torn paper textures, 5 burnt paper textures, and 5 grunge-stained paper textures.

The best part is all of these images link to single images out there on the net that are free for you to use. That means no random deviantART portfolios, secondary blog sources, or nasty zip files. We’ve just got straight links to straight-up image files. So bookmark this blog post and come back when you want a quick paper texture to play with. 🙂

Crinkled & Wrinkled Paper Textures

Worn & Faded Paper Textures

Torn & Ripped Paper Textures

Burnt Paper Textures

Grunge-Stained Paper Textures

Top 25 Free Abstract Light Photoshop Brushes

Play around with some of these abstract light Photoshop brushes. Apply them at different opacities and colors. Use different layer blend modes to layer them together and on top of other objects and gradients. You’ll be surprised what you can come up with!

We have another post on how to install and manage your Photoshop Brushes. (coming soon!)

Abstract Brushes Pack 1

Free Photoshop Light Effect Brushes

Radial 2 Brushes

Free Photoshop Light Effect Brushes

Abstract Brushes VOL 7

Free Photoshop Light Effect Brushes

Gradient Shape Brushes

Free Photoshop Light Effect Brushes

8 2nds of Light

Free Photoshop Light Effect Brushes

Burning Soul

Free Photoshop Light Effect Brushes

extremelyABSTRACT

Free Photoshop Light Effect Brushes

Living Cell Brushes

Free Photoshop Light Effect Brushes

beser brushes

Free Photoshop Light Effect Brushes

Party Brushes

Free Photoshop Light Effect Brushes

Unreal Brushes v.3

Free Photoshop Light Effect Brushes

Versatile Photoshop Brushes

Free Photoshop Light Effect Brushes

Ecol Brushes

Free Photoshop Light Effect Brushes

Sui generis

Free Photoshop Light Effect Brushes

Sui generis 2

Free Photoshop Light Effect Brushes

Refresh Brushes

Free Photoshop Light Effect Brushes

Abstract Brushset XV

Free Photoshop Light Effect Brushes

Unreal Brushes

Free Photoshop Light Effect Brushes

Descent Brushes

Free Photoshop Light Effect Brushes

Dreamy Fantasies 2

Free Photoshop Light Effect Brushes

abstract splash brushes

Free Photoshop Light Effect Brushes

Life Brushes

Free Photoshop Light Effect Brushes

28 Abstract Curves Brushes

Free Photoshop Light Effect Brushes

Abstract Light Brushes Vol.1

Free Photoshop Light Effect Brushes

Unreal Brushes v.4

Free Photoshop Light Effect Brushes

Step it Up in Photoshop by Taking Advantage of the Internet

One thing I’ve noticed in talking to a lot of Photoshop noobs over the years is that they don’t generally take advantage of the Internet. I think it’s mainly because they’re so overwhelmed with Photoshop out of the box that trying to find resources online seems like yet another foreign step.

But believe me, there are ways for even us intermediate level Photoshop artists to take advantage of the net in order to make Photoshop our bitch. When I tell a Photoshop noob to get online and start using the Internet with their projects, the first thing they assume I mean is to look at tutorials. Tutorials are great and you should always check out all the tutorials you can so you can learn other people’s techniques and add them to your mental vault – But people, trust me, you can use the Internet for even more!

Stock Photos

Whatever you’re making for your client, whether it be a website design, print ad or anything else, never underestimate the power of stock photography. It’s a great way to jazz up your work and make it look more professional.

The world is full of starving photographers that rock at what they do. So, what do these unappreciated artists do? They sell their work online on giant websites like iStock where they’re forced to compete with other awesome photographers doing the exact same thing. What does this mean for you? It means you can get your hands on professional photos in virtually any field at cheap ass prices.

Textures

There are a lot of people out there that like to take close-up pictures of random shit they see around the world. You’d be surprised how cool some of these texture pictures can look. The Internet is filled with royalty free textures. Just Google it up. You can also buy them for purchase generally on the same websites where you find stock images.

A lot of the time when you’re staring at a blank canvas in Photoshop, you don’t know where to start. You only have so many tricks in your mental vault to put on that background.

Well, next time you’re at a loss for inspiration go grab a stock texture image and spread it over the background of your canvas. Then, try putting different colors behind it and screwing around with the layer blend modes of the texture. Try different Image adjustments to the texture. Try different filters to the texture. Blur it a bit. You’ll eventually end up with something you never thought you could make!

Brushes

So many people have posted awesome Photoshop brushes on the Internet. I think Photoshop noobs often underestimate the power of brushes because they see the crappy default ones in Photoshop and don’t realize the possibilities. And I think a lot of Photoshop pros feel like they’re cheating by relying on brushes. Truth be told, brushes really can open up our possibilities.

They don’t just provide you with easy way to create the little elements of your artwork, but they get you to expand your mental vault of tricks. You get to experience a different sense of design and expand your methods.

Sites like Brusheezy provide tons of free brushes in all different forms. Installing Photoshop brushes is easy and so you are able to quickly get going on your Photoshop design.

Fonts

One thing I personally hate is picking out fonts and because most of Photoshop’s default fonts suck, I’m generally dreading my psd’s text fields! Well, once again, head to the net. It’s not secret you can download fonts off the Internet. However, it can often be just as overwhelming sifting through a website with 10,000 crappy fonts.

If you ask me, this is the hottest font resource on the net: www.Fawnt.com

Basically, people vote on the top 100 fonts available for free on the Internet and this simple website always has the current top 100. You can click on any of the fonts and find your way to their download page. So, stay on top of the most popular trends in fonts. Download and install a font on your computer and BAM, it’s in Photoshop. Easy as pie, baby.

Grunge 3D Photoshop Text Effect Tutorial

Final Image Preview


(click to enlarge)

Step 1: Setting Up

Open a new document that is 1,600px (width) by 900px (height). This will accommodate a typical widescreen monitor that comes with most of today’s computers.

Fill the background in with black (#000000).

Step 2: Creating Diagonal Line Background

Start by using the rectangular marquee tool. Draw out a selection in the shape of vertical stripe that’s about 30 pixels wide and stretches the height of the canvas on the far left side.

Create a new layer and fill in the selection with bronze (#170802), but make sure not to deselect the rectangular stripe just yet.

Now, we want to copy this stripe evenly across the page. So, hit command+option+T (ctrl+alt+T on a PC). You’ve just made the first copy of the stripe. You can now drag it over to the left about 30 pixels away from the first stripe. Hit enter to get out of Free Transform mode. With the stripe still selected, hit command+option+shift+T (ctrl+alt+shift+T on a PC). There should now be a third stripe. Keep hitting command+option+shift+T (ctrl+alt+shift+T on a PC) until you have filled the entire with of the canvas with your bronze stripes. Hit command+D (ctrl+D on a PC) to deselect.

Hit command+T (ctrl+T on a PC) to enter Free Transform mode on your layer with bronze stripes. Now rotate the Bronze Stripes layer -40 degrees.

And then stretch it out so it covers the entire canvas.

Next, select the lasso tool. Set 50px for Feather and create a selection like I did below.

Ctrl+Click (right click on PC) on the selection and click “Select Inverse.” Make sure you are still on your Bronze Stripes layer in the layers palette and then hit delete. You should have just cut off the outer edges and now have something like this:

Step 3: Adding Your Logo or Text

Go ahead and insert your logo or type some text in the middle of the canvas.

In the layers palette, ctrl+Click (right click on PC) on your Logo layer and then click “Blending Options.” Check “Color Overlay” on the left side of the Layer Style window and then click on “Color Overlay.” Put in a light brown color (#ad9162). Click okay to exit out of the Layer Style window.

Now you should have your light brown logo in the middle of the canvas.

Step 4: Give Your Logo or Text Some 3D Depth

Command+Click (ctrl+Click on a PC) your logo layer in the Layers Palette in order to make a selection in the shape of it. Create a new layer. This will be a your depth layer.

Make your foreground color a darker brown than your logo (#6a5738). Hit option+delete (alt+backspace on a PC) to fill the selection with the dark brown color. Next, move the selection down 1px and to the right 1px. Hit option+delete to fill the selection again. Repeat this about 10-15 times until you have something similar to the image below.

In the Layers Palette, ctrl+Click (right click on a PC) on your depth layer and click “Blending Options.” Turn on the drop shadow by checking its relative box. You can leave the drop shadow settings to their default. Click okay to exit out of the Layer Style window.

Move your original logo layer above the depth layer you just created in the Layers Palette so you now have a 3D looking logo.

Step 5: Jazz the Logo Up With Some Grunge Paint

Next, you’ll need some sort of grunge paint-like Photoshop brushes. You can find some pretty easily on the net. Just Google up something like “Grunge Paint Photoshop Brushes” or look around Brusheezy. Pretty much any paint will do. Just try and avoid paint ‘splatter’ brushes for this tutorial. Those are used all over the place and I’m bored with ’em.

Create a new layer and place it behind your logo and logo depth layers. Paint around and get creative with some of your grunge brushes in a few different shades of brown.

These are the shades of brown/orange-ish I used:

  • #a25125
  • #632200
  • #944c28
  • #5f2100

This is the step where everyone’s project will start to gain its own originality, but here is what I came up with for this step.

Step 6: Grunge-ify Your Piece of Art!

This next step is such an easy way to really transform your wallpaper, and once again, this is another place where you can really add some originality to it, as well. We are going to take a stock grunge texture image and overlay it over our entire canvas.

I used this image:

(click to enlarge)

But you can use whatever image you want. There are tons of places to find free textures like Texturez.com. Also, check out one of Abduzeedo’s posts where they provide links to some awesome free textures:

http://abduzeedo.com/36-cool-free-textures

Bring the image into Photoshop and drag it onto your canvas. Make sure this new grunge texture layer is the very top layer in the Layers Palette.

Next, remove its color by selecting the layer in the Layers Palette and then hit shift+command+U (shift+ctrl+U on a PC). This will desaturate the image. In the Layers Palette, set the layer’s blend mode to “Overlay.”


(click to enlarge)

With an alternative grunge stock image:


(click to enlarge)

By using different textures, you can completely change the look and feel of this project. Let me know if you have any questions. Play around with it and feel free to post your finished projects in the comments section if you want!