Three Styles » Photoshop

Awesome 3D Facebook Social Media Icon Photoshop Tutorial

Alexis Brille — Thu, 22 Apr 2010 11:08:22 +0000

Who says you need Cinema 4D, 3DSMax or even Illustrator to create a simple 3D icon? In this tutorial, you’re going to learn how to do it in Photoshop with the help of layer masks.

The main point of this tutorial is to demonstrate how we are able to apply semi-realistic lighting and shadows in Photoshop [omitting the need for 3D manipulation tools]. Note that we used the term "semi-realistic", we wanted to give the illusion of a 3D object, at the same time keeping the illustration effect.

In addition, the variety of perspective we are capable of achieving solely in Photoshop is of course meer. Do take advantage of the Bevel & Extrude feature in Adobe Illustrator. Nevertheless, aside being able to give reasonable lighting to the icon in Photoshop, we were also able to complete impression of a faux 3D object — only with the use of Photoshop.

Preview

1. Create a new Photoshop document.

Create a new 512 pixels by 512 pixels Photoshop document, the standard maximum size for application icons.

2. Facebook Logo Outline

To facilitate the creation process i.e., so you wouldn’t have to draw your own Facebook logo, download the Facebook Logo Vector Outline in .AI format here: http://j.mp/facebookLogoVectorOutline

Copy the vector into your clipboard, CTRL or CMD + C.

3. Paste the Facebook Logo Vector Outline into Photoshop as a Smart Object.

Paste the vector into the newly made Photoshop document, CTRL or CMD + V.

Select Smart Object in the dialog, press OK then press enter [to get rid of the resize tool].

4. Set up the Gradient Overlay – First gradient.

The main difference of this screenshot from the previous screenshots is the background that has been pasted in. Don’t worry, that’s not part of the tutorial, it’s there just to make things look better.

Right click on the layer with the logo outline and select Blending Options.

On the left side of the panel, tick the box Gradient Overlay.

Set the first gradient slider to the color #00225b.

4. Set up the Gradient Overlay – Second gradient.

Set the second gradient slider to the color #006ed5.

5. Set up the Stroke color.

Tick the Stroke box below Gradient Overlay.

Size: 1px.
Position: Outside.
Blend Mode: Normal.
Opacity: 100%.
Color: #00103e.

6. Set up the Inner Glow.

Tick the Inner Glow box.

Blend Mode: Overlay.
Opacity: 100%.
Noise: 0.
Color: #ffffff.
Technique: Softer.
Source: Edge.
Choke: 0.
Size: 2px.

7. Set up the Inner Shadow.

Tick the Inner Shadow box.

Blend Mode: Overlay.
Color: #ffffff.
Opacity: 100%.
Angle: 120 degrees.
Untick the Use Global Light box.
Distance: 1px.
Choke: 0%.
Size: 0px.

8. Create the Perspective.

To create the bevel of the icon, duplicate the layer with the logo outline [that now has the styles shown above implemented].

(1) Move this newly duplicated layer to the right to create the 3D illusion.

(2) Move this newly duplicated layer below the original layer.

(3) On the duplicated layer, click the eye icons on Inner Shadow, Inner Glow and Stroke to uncheck them. We only want the Gradient Overlay showing on the duplicated layer.

Let’s call this layer the "bevel layer".

9. Paint the Shadows – 1.

(1) Duplicate the "bevel layer" we’ve made in Step 8.

Let’s call this newly duplicated layer the "shadows layer".

(2) This time, uncheck the Gradient Overlay on it by clicking the eye icon next to it.

Or we can simply right click on the "shadows layer" and choose Clear Layer Style (we will lose the layer style). It’s personal preference.

(3) The color of the icon on the "shadows layer" should be black.

(4) Make sure have this layer selected and click on the Set Vector Mask icon below, its icon is a rectangle with a circle inside.

(5) Then make sure you have the layer mask of the "shadows layer" selected, not the layer itself.

10. Paint the Shadows – 2.

Again, make sure you have the layer mask selected of the "shadows layer" selected.

Choose the Brush Tool.

Make your foreground color #000000.

With the Brush Tool [or the Color Fill Tool], paint all over the "shadows layer" to hide all the black so that all that is revealed is the blue gradient of the "bevel layer". You will know why we do this in a second.

11. Paint the Shadows – 3.

Select the Brush Tool.

Make your foreground #ffffff.

Ensure you select the layer mask on the "shadows layer" created in Step 9.

With the Brush Tool, paint the corners of the icon on the "shadows layer" with #ffffff to reveal shadows.

The reason why we cleared all the black color in Step 10 was so that we would have a more natural approach of painting shadows.

We could easily use the Brush Tool loaded with the color #000000 to hide the shadows and start there but it would rather seem as if we were painting highlights not shadows.

If we do it this the other way around, it would seem as if we were painting shadows [which is what we're aiming for], instead.

To achieve best results, it’s best you study how lighting and shadows fall onto your household objects.

12. Paint the Shadows – 4.

13. Paint the Shadows – 5.

14. Paint the Highlights – 1.

With the same technique used above regarding layer masks from Step 9 to Step 13, let’s paint some highlights on the front of the icon.

The process is similar to that used in Step 10.

Duplicate the first layer we made in Step 3. This newly duplicated layer will provide the highlights on the [front] face of the icon. Let’s call it the "front highlights layer".

Right click on this "front highlights layer" and choose Clear Layer Style. The color would only be #000000 or black.

Right click on it again and choose Blending Options.

Tick the Color Overlay box and choose the color #ffffff or white.

The color of the icon should now be white.

With the "front highlights layer" selected, click the Set Vector Mask icon below to set a layer mask on this layer, its icon is a rectangle with a circle inside.

15. Paint the Highlights – 2.

Make sure you have the layer mask selected of the "front highlights layer" selected.

Choose the Brush Tool.

Make your foreground color #000000.

With the Brush Tool [or the Color Fill Tool], paint all over the "front highlights layer" to hide all the white so that all that is revealed is the blue gradient of the front face.

Select the Brush Tool.

Make your foreground #ffffff.

Ensure you select the layer mask on the "front highlights layer".

With the Brush Tool, paint the front face of the icon on the "front highlights layer" with #ffffff to reveal highlights.

Final Product

And that’s all there is to it.

I hope you enjoy it, and if you have any questions please leave a comment below.

Design and Code a Sweet Custom Coming Soon Page

Shane Jeffers — Mon, 29 Mar 2010 06:34:44 +0000

So you just purchased a new hosting account and you some great ideas for your next project. Instead of just having the host default page up for your domain name why not create a coming soon page that is simple and effective.

There are many reasons to create these coming soon pages. The first reason is to make your product or service look more professional instead of having the “This is a website” page that your hosting company provides you. Secondly, it can help promote your site before it is even launched. Be sure to include your twitter account or an email subscription so people can follow the progress of the site. It allows them to get more excited about something they haven’t even seen yet.

Example Screenshot

Designing the page

When you start the design keep in the back of your head that this does not need to be a complex page on the contrary actually. This page needs to be simple yet effective. It must also convey a message of what the site will offer to get people interested. Don’t spend too much time on this page as you need that time to complete your other ideas. Let’s go ahead an open up photoshop and get started.

1. Open up a photoshop document 900px by 700px with a transparent background and the settings below.

2. Now lets fill in the background by going up to Edit > Fill.. chooser color from the drop down and put in the hex code #333333 and hit OK.

3. Now select the rectangular marquee tool and in the drop down box at the top choose Fixed size. Enter 900px for the width and 300px for the height.

4. Before you click anywhere go up to Layer > New > Layer… and name it Top. Now you can click anywhere in the document and make sure you drag the selection to the top.

5. Make sure you are selected on the newly created layer not the dark layer and go up to Edit > Fill… choose color from the drop down and enter #ececec for the hex code.

6. Now we have our top section put together all we have to do is bring in the logo. Open up your logo and drag it into your document. This is an important one because you want the brand to really stand out so make sure your logo is prevalent.

7. Next we need to add in the COMING SOON portion so they know that the site is not just a broken site. You don’t have to necessarily use COMING SOON, just something that lets the customer know that it’s not available yet. First create another new layer by going to Layer > New > Layer… name it Shadow. Grab your rectangular marquee tool and set a fixed size to be 400px wide and 30px high. Click and make the selection directly underneath the logo.

8. Grab your gradient tool and in the Gradient Picker (which is in the top left) choose your second option which should be foreground to transparent. Also set your foreground color to black by pressing D on your keyboard. Click approx. 5px above the selection that you have and while dragging down hold the shift key and let go when you get to about the middle of your selection. Once that is done drop your opacity for this layer in your layers palette to 10%.

9. Next we will use a layer mask to fade the corners out diagonally. Go up to Layer > Layer Mask > Reveal All. This allows us to see the complete layer and then fade it out by using the color black. You should still have your gradient tool selected and Foreground to Transparent selected and black as your foreground color if not make sure you do. Next drag the gradients below each of the corners in an upward diagonal direction like the screen shot below.

10. Once that is finished go ahead and add the coming soon text in.

Coding the page with CSS3

I just recently did a post on The basics of HTML5 but today we are going to stick with XHTML and use the XHTML Strict DOCTYPE.

The Basics

11. This is the bare bones of what an HTML page must consist of in order to display properly. Add the code below to a blank HTML file and save it as index.html.





	
	Alive Again Apparel

12. Next create a CSS file and name it style.css. Now lets link our CSS file to our index.html file so we don’t forget. Add the piece of code below directly above the closing head tag. Oh and to save you some trouble make sure the index file and the CSS file are in the same directory.

The HTML Structure

13. Now let’s choose exactly how the page is going to be laid out. We will be using a 100% width layout in this tutorial so we will need two divs for the top section. One to fill the color 100% across and the other to center the content. In the example below I took out all of the other tags except the body tags and what’s between them, but that was only to make it easier to see. You still need the other tags in order for the page to work.


     
          
               
          
     

     Alive Again Apparel is a Christian T-Shirt business that is getting ready to launch. We will be delivering spirit filled T-Shirt designs for a unique way to spread the gospel.  

     
If you would like more information please feel free to email us at test@test.com or follow us on Twitter to get news about the upcoming launch.

14. Now we have our content and you guys should now have an html page that looks pretty boring with no styling at. Enter CSS3! Open up your CSS file and start with the code below. I know how dare I say use this. I recommend that you use some type of CSS reset instead of using this * method, but I used this for the sake of simplicity.

/*** Resets all elements ***/

* {
   margin: 0px;
   padding: 0px;
}

/*** Gives the body the dark gray background we used in PS ***/

body { background: #333; }

/*** Styles the links ***/

a { color: #999; }

/*** Sets paragraph styles ***/

p {
   color: #ececec;
   font-family: verdana, arial;
   font-size: 12px;
   line-height: 18px;
   margin: 0px auto 20px auto;
   text-shadow: 1px 1px 1px #111; /*** New CSS3 Property that adds the shadow ***/
   width: 450px; /*** Allows paragraphs to be centered ***/
}

I used the Text-Shadow property right here which is brand new in CSS3. It gives our text a nice shadow behind it in most modern browsers.

15. Now that we’ve styled some of our HTML elements lets move on to the layout.

/*** Top section 100% color ***/

#top {
   background: #ececec;
   border-bottom: 1px solid #fff;
   margin-bottom: 30px;
   width: 100%;
}

/*** Topcon centers the page at 900px ***/

#topcon {
   margin: 0px auto; /*** Centers the page ***/
   width: 900px; /*** A width is required in order for it to center ***/
}

16. Notice in the HTML above I added ID’s to the twitter text and the logo. We will use these specific ID’s to style them

/*** Styling the Logo ***/

#logo {
   width:445px;
   height: 125px;
   display: block;
   margin: 0px auto; /*** Centers the logo in the 900px box ***/
   padding: 100px 0px;
}

/*** Styles the twitter link ***/

a#twitter { color: #4ce6fd; }

LIVE DEMO

The Final Product and Plug

If you hadn’t guessed already Alive Again Apparel is a Christian T-Shirt Business I am starting and I wanted to walk you through my process of creating a coming soon page that can be seen here.

Please keep a look out for the launch of our Christian T-Shirt Business and be sure to follow us on twitter to keep up to date with the progress @AliveAgainApprl

Create Apple’s Navigation Bar in Photoshop from Scratch

Shane Jeffers — Mon, 07 Sep 2009 18:39:53 +0000

Apple has one of the cleanest designed sites on the web, which is usually hard to achieve with so much volume, just look at craigslist. So today I dedicate this post to the awesomeness of Apple and their beautiful site. Today we will try to recreate the Apple navigation bar on their current website.

PART TWO IS HERE LEARN HOW TO CODE THIS EXAMPLE HERE – Which will show you how to code this using the CSS Sprite technique so Stay Tuned.

Here is a preview of what we are creating today:

Creating the background

1. Create a photoshop document that is 900 pixels wide and 75 pixels high. See below to get the exact settings.

2. Create a new layer (Layer > New > Layer…) Then choose the Rounded Rectangle Tool and set your foreground color to black (Hit the X key on your keyboard). Up at the top set your Radius to 8px. Then click on the Down arrow directly to the left of the radius box and click on FIXED SIZE. Set the width to 877px and the height to 38px

3. Now lets add the gradient instead of having just a black background. Right click on the layer we just added the shape to and select blending options. Check the Gradient overlay option. Double click inside the preview of what your gradient will look like which is directly to the left of the reverse check box. It should give you the dialog box below.

4. Double click on the color stop on the bottom left. There are four color stops showing, they look like small houses.

5. Once you do that it will bring up your color dialog box type in 848484.

6. Now double click on the color stop all the way to the right on the bottom and set the color to c7c7c7.

7. Now we need to add another color stop so click somewhere in the middle right below the gradient strip to add another color stop, another house looking thing should appear. Position in around the same spot you see in the screenshot below.

8. Double click on the newly created color stop and type in the hex code of #848484 like we did in step five.

The finished gradient dialog box should look like my screenshot below.

9. This is the conclusion of the background section this is what we should have up to this point. If you do not have this go back through and try again.

Adding Separator Lines

10. Now it is time to create the separators between each of the navigation items. Grab your line tool, and make sure your weight is set to 1px. CREATE A NEW LAYER. Put your cursor so it is flush with the top if the navigation click and then hold shift and drag down until it meets the bottom edge of the navigation then release. You should have something similar to below.

11. Once you have that line drawn successfully use the shortcut Control + J five times. This will duplicate that line you just made six times. Then evenly distribute each of the lines by pressing the “V” key on your keyboard and then using your right arrow key on your keyboard. See the example below to get the right spacing.

12. Once you have them all lined up select all of the lines you just created and drag them down to the new layer icon in your layers palette. This will copy all of the layers. Right click on any selected layer and choose merge layers. Hide the other horizontal lines for the moment. Right click and choose blending options. Choose gradient overlay and click on your bottom left color stop and change it to #565656 and then change the bottom right color stop to #8f8f8f.

Adding The Text

13. Set your font to Helvetica 12pt BOLD with the hex code #262626. Click in the middle of the first section and type Apple.

14. Continue to fill in each section, use the screenshot below as a reference

15. Now to add the pressed text look. Click on the text layer where you just typed Apple and hit control + j (pc) or command + j (mac). Now hit the “V” key on your keyboard and hit the down arrow once, what this does is it first duplicates the layer and secondly moves it down 1 pixel. Now move the newly created Apple Copy layer underneath the first apple layer.

16. Right click on the Apple Copy Layer and choose blending options. Check the color overlay option and put in the hex code #c1c1c1. This will make the text appear as if it is being pressed in.

17. Repeat steps 15-16 on each one of the navigation items Apple through Support. This effect must be applied to all of the text on the navigation bar.

Finished!!

Click for the finished product.

Click here to download source files

Technorati Tags: Apple Navigation tutorial, Navigation photoshop tutorial, menu tutorial, Apple menu tutorial