Tutorial: A quick website mock up in Photoshop using free UI Packs

I’ve gotten to know some really interesting people from the web because of prodigalconcepts.com and most recently I’ve had the opportunity to be asked to help out vectorfantasy.com to spread the word of their membership drive. Vector Fantasy is a resource website from Romania owned and maintained by Alin Herciu. Continue reading Tutorial: A quick website mock up in Photoshop using free UI Packs

Tutorial: Titanic (3D movie) type treatment in Photoshop

The “Titanic” movie was re-issued earlier this year to commemorate the centennial anniversary of RMS Titanic‘s tragic maiden voyage and have been 3D-tized for your viewing pleasure. It also may or may not have anything to do with James Cameron diving in the Mariana Trench for “NatGeo Society” but that’s not really why were here is it?

Seeing the reworked movie poster at the train station got me inspired to try and recreate the title type treatment, so if you guys are ready to dive into this with me, let’s grab our Photoshop gears and make sure you inhale because were going really deep. (Note: If you want you can just Google the keywords “Titanic 3D poster” for a reference image we can use as a guide.) Search for a large sized image so we can see the details clearly. I found one from hollywood.com Titanic 3D poster. In case the source closes shop I saved a copy HERE for reference purposes only. (Note: This image does not belong to me, we are using it to recreate a close replica.)

What we will be making

Resources

FontJ.D.- Closer/LWTUA Bold

We will be working from scratch, no stock images or patterns needed. You can use any basic “Serif” font you have in your local drive fonts directory, just try to get something as close to the reference image font style as you can.

I will be using the font J.D.- Closer/LWTUA Bold from fonts2u.com, if you don’t have one in your font library just head on over to 10+ free font resource websites where I’m sure you will find something close.

Just remember that we don’t need to be exactly the same as the original because our main goal here is to try and come up with the type treatment effect and learn a few Photoshop tricks along the way while having fun of course.

Setting up the stage

Let’s go big so we can see things a bit better, create a new file and name it “titanic” make this 1000 x 700 pixels. Fill this new layer with #2b2b2b color, and rename it “background”.

Type settings and 3D effects

Select the Horizontal Type Tool (T), type TITANIC (uppercase), then apply the following character settings as you see in the image below.

  • Font: J.D.- Closer/LWTUA (or another Serif of your choice)
  • Weight: Bold
  • Size: 150px
  • Tracking: 50
  • Color: #B68B46
  • Anti-Aliasing: Crisp

Use the Vertical and Horizontal align tools to keep it in the middle of our work space.

If you look closer to the letters A and N, you can see that we need to give them more space from each other. To do this simply highlight the letter A and from the Character Settings change the Tracking to 100.

Time to 3D-tize our type

This next step was an idea shared by my good friend Brian Jones of seven27creative.com which I modified for this tutorial.

To make this process more bearable we will use Photoshop Actions to automate the repeating tasks we need to do.

Set up Actions

Open Actions by going to the tab menu Windows > Actions (Alt + F9 *on a PC). Click the Folder icon Create new set option and rename this set “titanic-type”.

Make sure you have “TITANIC” type layer selected before proceeding. Then right next to the Create new set Folder icon is the Create new action button, click this and a New Action dialog box will open, rename this action “set-type”, hit Enter or click Record to start recording your actions in Photoshop. (Note: everything you do at this point inside Photoshop will be recorded so avoid repetitions and Undo mode *Ctrl+ Z)

Record your actions

  • Duplicate “TITANIC” type layer (Ctrl + J)
  • Note: Use the shortcut keys

  • then Edit > Transform > Scale (Ctrl + T)
  • Note: Use the shortcut keys

  • Click on Maintain aspect ratio (chain icon) between Width and Height
  • Set Width: 100.5% then click Enter 2 times to commit the changes
  • Select the Move tool from the tools palette, then with the Arrow keys go 1 Up
  • Duplicate the copy (Ctrl + J) and were done…
  • Stop recording (square icon next to the red circle)

Now that we have our Action set up and we have stopped recording, delete the 2 “TITANIC” copies we just made so we can have a clean layers panel again with only the “background” and the “TITANIC” type layer.

Time for a little bit of magic. Duplicate the original “TITANIC” type layer then hide it simply by poking the eye next to the layer (were keeping it for back-up), rename the new “Titanic copy” >> “TITANIC”. Now go to Layer > Type > Convert to Shape.

Then select “set-type” from our Actions menu. Click the Play selection button, repeat this 5 times, and your last type layer copy should be “TITANIC copy 10”. Your stage should have something like this.

Brushed metal effect

Now create a new layer (Ctrl + Shift + N) and rename this layer “brushed-metal”. Set the Foreground color to #5D7F89 and the Background color to #CAD2D4. We need to clip this layer to “TITANIC copy 10”. Hold down Alt key then hover your mouse between the “polished-surface” layer and the “TITANIC copy 10” layer. When your pointer turns into 2 circles and an arrow click it.

Add Filters

1. Filter > Render > Clouds (Try to get a balanced distribution of the foreground and the background colors per letter, use your personal judgement here. You can repeat as many times as necessary *Ctrl + F.)

2. Filter > Noise > Add Noise

  • Amount: 18
  • Distribution: Uniform
  • Monochromatic

3. Filter > Blur > Motion Blur

  • Angle: 15°
  • Distance: 15px

4. Filter > Noise > Add Noise

  • Amount: 4
  • Distribution: Uniform
  • Monochromatic

Copy “brushed-metal” layer and clip it, then change the Blending Mode to Overlay and apply Image > Adjustments > Desaturate (Shift + Ctrl + U).

Prepare the layers for detailing

Clean up our layers panel a bit. Select the shape layers “TITANIC copy 8” … to “TITANIC” and group them together, rename this group “TITANIC-copies”.

Copy this grouped layer (just for back up), go to the copy, right click on it and select Merge Group, rename this merged group layer “TITANIC-merged”.

Hide the “TITANIC-copies” layer.

Time to work on the details

Blending Options

TITANIC-merged layer

While you’re still in the “TITANIC-merged” layer right click to open Blending Options and give it a Gradient Overlay with the following settings.

Your image should look something like this by now.

TITANIC copy 9 layer

Apply some styles with a Drop Shadow and a Stroke from the Blending Options with the following settings.

TITANIC copy 10 layer

Give this layer an Inner Shadow and an Inner Glow with the following settings.

See the difference of the two styled layers

Finishing touches

If you look closer at what we have so far the types edges are sharper than the reference image.

To fix this create a new layer above the “TITANIC-merged” layer and rename this “edges”, grab a nice round Brush with these settings.

Brush settings

  • Diameter: 9px
  • Hardness:100%

Set the Foreground color to #B68B46 and start brushing on the edges, brush front to back.

After you have covered all the necessary edges, Copy Layer Style from the “TITANIC-merged” layer and Paste Layer Style to the “edges” layer.

If you are satisfied with the results merge this 2 layers together. We need to do this for the highlights and shadows.

You may want to create a duplicate for back-up but I leave this up to you. And you may need to rename the newly merged layer as it will adopt the name of the top layer. I’m renaming mine “TITANIC-merged”.

Go ahead and create a new layer (Ctrl + Shift + N) above the the newly merged layers and call it “dodge-burn”, then go to Edit > Fill (Shift + F5)

  • Use: 50% Gray
  • Blending Mode: Overlay

While the “dodge-burn” layer is still selected turn your new “TITANIC-merged” layer into a selection then Add Layer Mask. This will keep our dodge and burn adjustments strictly inside “TITANIC-merged”.

Dodge will add highlights to our type while burn will do the opposite.

And since we are literally painting on a different layer there will be no irreversible and destructive effects to our 3D image.

Use your judgement when applying Dodge and Burn and occasionally compare your work with the reference image as to which parts needs highlights and shadows.

Choose a nice Soft Brush and set Range to Highlights when Dodging and Shadows when Burning. Exposure to 80%. The bracket keys are great helpers here [ to decrease the brush size and ] to increase brush size. Zoom in to get to the good parts.

Basically that’s it, were done! You may want to tweak your work a bit more to match the reference image but that’s all for this tutorial. As I have mentioned before we don’t need to have 100% match to the original. It’s the journey that matters.

Here’s my final image with the bar on top and below detailed using the same styles as the 3D type.

In case you want to find out what exact font was used in the movie poster (or any image with type), head over to whatfontis.com, a cool tool to get to know fonts when all you have as a source is an image. Just follow the instructions from the website.

Visit other prodigalconcepts.com tutorials …

Tutorial: Cork textured download button in Photoshop

If you ever wanted to work with Photoshop Filters and didn’t know where to begin then this is your lucky day. We will use some of Photoshop’s filters to create our very own “Cork textured download button”. Continue reading Tutorial: Cork textured download button in Photoshop

Tutorial: Glassy orb style social icon in Photoshop

Like it or not social networking still rules as a means to drive traffic to your site. I know there are tons of tutorials out there on how to create cool social icon buttons but since you’re already here why not stay and learn a few basic tricks to your own glassy orb icon in Photoshop. Which you can use in any of your projects and its not just for social icons it can be used as a call to action button or web links to an affiliate site. So let us begin our lesson for today.

What we will be making

If you want get updated on what’s happening here at Prodigal Concepts make sure to be one of us and LIKE us on facebook OK?

How to create a glassy orb style social icon

Step 1 – Setting the stage

Open Photoshop and create a new document with a 500×500 pixel dimensions let’s name this file “glassy-orb”.

Step 2 – Background

First thing we will do as create a nice looking background, make your “Foreground #badff7” and the “Background #02578e” then with the Gradient Tool (G) selected set the gradient to Foreground to Background and style to Radial Gradient.

Now go to the center of our work area and drag it diagonally going towards the bottom right. Rename this layer as “main-bg”.

You should have something like this.

Add some noise to give it more character, go to Filter > Noise > Add Noise adjust the following settings Amount: 2%, Distribution: Gaussian, tick Monochromatic.

Step 3 – the Orb

Create a New Layer and rename it “orb” then grab your “Ellipse Tool (U)” from your shapes pallete and drag it across our work area while holding the Shift key to keep it proportion to make a nice circle. Fill it with the foreground color. Keep it centered on your work area by making a selection of the outline (Ctrl + A) and using Align vertical center and Align horizontal center buttons.

Right click the “orb” layer and go to Blending Options to access Layer Styles then give it an Inner Glow with the following settings, Color #01a8fe

Add a Gradient Overlay and choose the default black and white. But replace the black with #00506d and the white to #152128.

You should now have something like this.

Step 4 – Details

Turn the “orb” layer into a selection Ctrl + click on the layer, then create a New Layer and name it “bottom-glow”. Use the foreground color #01a8fe and with your Gradient Tool (G) selected set the gradient effect to Foreground to Transparent and style should be Radial Gradient hold the Shift key and drag your gradient from the bottom going up, stop before you get to the top of the orb. Repeat this step on a new layer and rename it “bottom-glow-2” exactly the same settings except for the gradient style which should be Linear Gradient.

Add another layer and rename it “top-gloss” turn the “orb” into a selection again Ctrl + click on the layer then make the foreground color #ffffff keep the last gradient settings except for the color and drag it, this time from the top going down. Then use the Transform Tool (T) and pinch it a bit on the sides. You may need to pinch it vertically as well just use your judgement here.

Then align it to top and keep it horizontally centered. Turn down the Opacity to 50% and give it a little Gaussian Blur 1-2% Radius should be enough.

Finishing touches

After that you can incorporate any logo or object you want but for me I used the Facebook logo I found on hdicon.com I used the dark Facebook blue for the color, flipped it vertically to create a subtle reflection and added a hint of shadow with the marquee tool. Remember to insert all of these below the “top-gloss” layer.

Finally with the Elliptical Marquee Tool (M) selected again I created a New Layer on top of the “main-bg” layer and called it “shadow”. Just drag it across to create a nice elongated shape, fill it with black and center it to your stage, make sure it clears the orb. Then give it a nice Gaussian Blur with a radius of 5% then a Motion Blur Angle 0 deg, and Distance 50.

And you’re done

Visit other prodigalconcepts.com tutorials…

Create a glassy lady bug icon in Photoshop

No one can deny the power of an eye catching icon to to help your visitors and readers scan to the juicy parts of your content or guide them to your call to action buttons. So today I’m going to show you how you can create your very own glassy lady bug icon in Photoshop.

What we will be making

Setting up the stage

Open Photoshop and create a new file, Ctrl + N and make the dimension a nice large square of 600 pixels x 600 pixels name it “lady-bug”. Fill it with white and name that layer “bg”.

Step 1 – the body

For the body we will use our Ellipse Tool, but first set your Foreground Color to #497e59 and make sure the Ellipse Tool (U) is set to Shape layers. Now drag your mouse on your work area and create a nice vertical ellipse. Like a nice egg shape around 265px width and height 340px. Rename this layer “body”. If your Ellipse Tool (U) has been properly set to Shape Layers then you should have something like this. Align your layer Vertical Center and make sure we have enough room on top for the head.

You can also just turn your path into a selection Ctrl + Enter and fill it with our foreground color if you find it easier.

Add some detail on the body by creating a new layer and rename it “abdomen”, change your Foreground Color to a darker shade of green like #092a13.

Now go to your shapes pallete again but this time use the Custom Shape option, then in your custom shape menu navigate to the Symbols pallete and pick World shape. Drag it across the work stage, we need it elliptical like our “body” layer but make sure it would fit snugly inside the body so make it a few pixels smaller and properly centered.

We will have to reduce the thickness as well so turn this layer into a selection Ctrl + click (with your mouse) then go to Select > Modify > Contract > Contract by: 5 then apply a layer mask. Don’t worry if the lines are not proportion just give it a light blur Filter > Blur > Gaussian Blur set the Radius to 1 and reduce the Opacity to 45%.

Note: Group this layers together and rename it “body” (simply select both layers and drag them to the folder icon at the bottom of the layers pallete).

Step 2 – the wing

Create a new layer and name it “wings-outline” (change your foreground to any red color to make it stand out from the body) then with your Ellipse Tool (U) make a nice circle by holding the Shift Key while dragging, make it around 320 pixels or just make sure it’s smaller than the body by 10 pixels more or less. Keep it Vertical Center and Top Align to the body then turn it into a selection.

Create a new layer name it “wing-gradient” then choose a light red color for your foreground #fd0d18 and a darker shade of red for your background #950101 then select the Gradient Tool (G) make sure it’s set to Foreground to Background and the style should be Radial Gradient. Drag it lightly from the top left going down to the bottom right of your selection.

Step 3 – wing detail

Hide the “wings-outline” layer for now, just poke the eye of this layer while we add some details to our wings.

We need to separate the left and right wing, for this we will use some guides, so get your rulers out Ctrl + R the Vertical guide should be centered to our wing while the Horizontal guide should be a quarter from the top of the wing.

Time to practice with the Pen Tool (P), start from the intersection of our guides then make a diagonal line going to the bottom left of the wing, give it a nice curve and make your way to the other side of the guide just try and match the curve. Turn it into a selection Ctrl + Enter and invert your selection Ctrl + Shift + I now make sure you have “wing-gradient” layer selected then add a layer mask.

Ctrl + N a new layer below the “wing-gradient” layer and call it “shadow” then Ctrl + click the “wing-gradient” layer (thumbnail) and fill it with black #000000, don’t forget to duplicate the layer mask as well Ctrl + click the “wing-gradient” layer (thumbnail mask) to turn it into a selection and add a layer mask to the “shadow” layer. Finally give it a gaussian blur, Filter > Blur > Gaussian Blur > Radius: 5px.

Start adding random black dots all over the wing area with the Ellipse Tool (U) make sure you create these above the “wing-gradient” layer.

Now add a new layer on the very top of the black dots and call it “gloss”, turn the outline of the wing into a selection make your foreground color white #ffffff. Select the Gradient Tool (G) and set it to Foreground to Transparent style should be Linear Gradient. Drag it from the top going down, it may look better if you start from outside of the body so we get a nice soft gradient.

Transform this layer Ctrl + T highlight the width first, bring it down 80%, then the height to 70%. Align it Vertically and to the top of the “wing-gradient” layer.

Add another layer and call it “glow” repeat the steps we’ve done for the “gloss” effect but the gradient style here should be set to Radial Gradient and then drag it starting from the bottom going up. Clean up using a layer mask to replicate the space between the wings.

Note: Group them together and call it “wings”.

Step 4 – the head

Remember the “wings-outline” layer we turned off earlier? Duplicate that and place it between your “wings” group and your “body” group, turn on the copy and rename it “head”.

Move “head” into position at the top of the work stage then transform it Ctrl + T, select Maintain aspect ratio it’s the chain “link” looking button between the width and height then highlight the width and use Shift + Arrow Key Down to bring its size to around 40%. Deselect the option Maintain aspect ratio and then highlight height and this time just with the Down Arrow Key bring the height to at least 35%.

We will repeat the steps we used to create the “wing-gradient” layer. First turn your path into a selection Ctrl + Enter. Then choose a nice gray color for your foreground #484748 and black for your background #000000 then select the Gradient Tool (G) make sure it’s set to Foreground to Background and the style should be Radial Gradient. Drag it lightly from the top left going down to the bottom right of your selection.

(Note: if in doubt refer to the “wing-gradient” images)

Then give a “gloss” effect similar to what we have also done for the wing.

All that’s left now is the antennae.

Step 5 – the antennae

Create a layer below the “head” and call this new layer “antennae-left”, then with your brush tool selected, I will be using a Hard Round brush around 10px, create a dot anywhere on our stage we will position it later. Then reduce the diameter of your brush to around 7px using the left bracket [ key you can just stroke a curve line freehand if you like, but I will use the pen tool to create mine, starting from the dot going straight down then curve. Now go to the Path Tab and right click on the path we just created, choose Stroke Path make sure Simulate Pressure is not ticked, then click OK.

Right click the layer and go to Blending Options > Bevel and Emboss > Inner Bevel set Angle 90° and Altitude 45°. Now position this on the “head” use Transform Ctrl + T to rotate it to an angle that would look good. Duplicate this layer and rename it “antennae-right” and move it to the opposite side.

And that’s all I have to say about that

Hmmmn, how about some shadows? and a background?

For the shadow just group all the files in one folder and call that “main”, duplicate it then Right Click and Merge Group, then turn it into a selection. Ctrl click the layer and fill with black #000000 bring it below the “main” group then Filter > Blur > Gaussian Blur, Radius: 7px and bring it down a bit with the Arrow keys.

As for the background I’m leaving it all up to you and your creativity! Enjoy!

Visit other prodigalconcepts.com tutorials…

A photo manipulation tutorial, realm – The Ninth Planet part 3 of 3

As we reach the conclusion of our somewhat epic of a tutorial for “the Ninth Planet” that began with the creation of our landscape eventually followed by skyscape and now we will continue working on realm. I would just like to thank everyone who stopped by and followed this tutorial series. I hope you guys found it useful, educational and fun, please don’t forget to share.

That being said let’s get down to business.

What we will be making

What we need for this project:

“Previously on Prodigal Concepts” we found and used this landscape stock image that we got from pixmac.com

Landscape

and with the help of Photoshop we duplicated, flipped and cloned parts of the image to make it look like one single shot that would fit nicely in our 2560px work area so that we could finally have this

Landscape2

after that we populated the heavens with stars, planets, clouds and colorful gasses.

skyscape - ninth planet

So finally we are almost at the end of our journey and moving on to the last stages of our composition. But before we continue make sure you group the previous layers accordingly “landscape” and “skyscape” you can do this by selecting the layers you want to group together then drag them to the folder looking icon at the bottom of the layers panel.

Update the water reflection

Now check out the reflection of the sky and mountain on our body of water. It’s not the same sky right? So first thing we will do is take care of that problem.

If you have your “Ninth Planet” .PSD file open. Create a new layer at the very top of the layers panel and rename it “reflection-sky” then simply Select All or Ctrl + A and make a copy of the entire file or merged layers Ctrl + Shift + C then paste it Ctrl + V to the “reflection-sky” layer we’ve just created, this will be the first layer on the third group which we will call “realm”.

Flip the “reflection-sky” layer image vertically Edit > Transform > Flip Vertical, then reduce the Opacity to around 50% or less so we can see through the image. Start moving it downwards Shift + Down Arrow until the mountain edges of the reflections align, it’s not going to be perfect so just try the closest you can get.

Now let’s add a layer mask to “reflection-sky” layer and with a soft brush tool, brush off all the excess areas that is not part of the water reflection. Use the Blending Mode “Stroke” to help you trim the edges, like what we did for the sky of the original background in the “skyscape” tutorial. Don’t hesitate to zoom in if you need to. Turn Opacity back to 100% when you’re done masking.

Realm 1

Apply Filter Effects

Our “reflection-sky” layer desperately needs some texture. To give it that ripples effect, like there’s a very light breeze running over it. We will add some “Smart Filters” to create this effect, Smart Filters is a non destructive way to add a filter to your images. It will help us preserve the quality of the original image and will give us the option to make adjustments to the filter settings later when we need to. So while the “reflection-sky” layer is still selected go to Filter > Convert for Smart Filters, then click OK. Our layer is now converted to a “Smart Object”.

Now go to Filter > Brush Strokes > Sprayed Strokes and make the following adjustments.

Brush Stroke

Next lets give it some “Plastic Wrap” filter, go to Filter > Artistic > Plastic Wrap and use the following settings.

Plastic Wrap

For an extra touch add Filter > Blur > Motion Blur, set Angle: 0 and Distance: 2

You should have something similar to this.

Filter On - Off

Adding details

Now for the fun part, placing the last elements that would finally complete this project. If you guys haven’t done so, you may begin downloading the required stock photos and extract the images from their backgrounds I suggest starting with the “Castle” photo.

Castle

Place the isolated copy of “Castle” photo on our working file, make sure it’s at the top most layer rename the layer “Castle”. Reduce it’s size a bit, I suggest 18% – 20%, and place it on the right hand side just by the edge of our lake.

Castle

Lets tweak it a bit, click on the “Create new fill or adjustment layer” button, select “Curves…” click OK then clip it to the “Castle” layer (hold ALT then click on the line between the two layers) open “Curves…” again (double click on the adjustment layer) and try to match these settings.

Castle-curves

It doesn’t have to perfect. Your monitor might show a different result anyway so use your judgement here. Click OK. What we are trying to achieve is to make it blend with our background’s exposure.

OK now zoom in near the bottom of the “Castle”, notice the way I cut it out of the background left it with some really sharp edges that doesn’t look nice. For this grab your Smudge Tool (R), but if you placed your “Castle” image the same way I did which is File > Place… (location of the image) chances are your “Castle” layer is in “Smart Object” state. Right click on it first and then select Rasterize Layer now it’s just a regular image and ready for our Smudge Tool (R).

By the way before you click on Smudge Tool (R) make sure your Brush (B) tip is set to Soft Round use the Brackets [ ] keys to increase or decrease the brush tip whenever necessary.

Start smudging, try to stay close to the edge and smudge away. Maintain random strokes and spaces. Spot the difference? After smudging the bottom edge looks more blended to the ground.

Castle-beforeandafter

Duplicate the “Castle” layer (don’t forget to include the curve adjustment layer.) Select both layer copies “Castle-copy” and “adjustment layer-copy” then Right Click > Merge Layers rename it “Castle-ref” and drag it below the original “Castle” layer.

Now flip it vertically, Edit > Transform > Flip Vertical and move it down, Shift + Down Arrow right before a gap shows between your two images.

Then repeat the steps we made in “Apply Filter Effects”. Add a Layer-Mask so we can Brush off excess of the reflection that’s not touching the water. Like the left part of the “Castle-ref”.

Do the same for the rest of our images. Unless they’re not supposed to be seen from the reflection on our “Lake”.

I will be placing a couple of elephants on the field, I will give some shadows with the help of brushes and the elephants outline selection.

The hot air balloons will be on the top left hand side. I gave it a dash of clouds from the “cloud” brush pack by JavierZhX, we’ve downloaded from deviantart that we used on the second part of this tutorial.

The rest is just some last minute changes, I went back to the “skyscape” group and using a large soft brush I dabbed on the top most left hand side. Using yellow, purple and green respectively. Gave it a Blending Mode: Overlay, and Opacity: 90%.

After my new year wallpaper tutorial I’ve decided to give this final piece some Optic Flare effects for extra character, that you can get from psdbox.com’s optic flares. Since I’m still in the “skyscape” group folder anyway I figure it’s a good time to include these effects.

And finally we’re done

Finishing touches: Ctrl + (N) a new layer, then get your “Gradient Tool” and set the Foreground color to #5e758c and the Background color to #165a9e now drag it across diagonally starting from the bottom right ending at the top left corner. Set the Blending Mode: Soft Light to give it a more dreamy feel.

Concluded: Part 3 of 3

Visit other prodigalconcepts.com tutorials…