The Final result:

(Click on the image to see the full size)

Tutorial Details

Program: Adobe Photoshop
Version: CS5
Difficulty: Intermediate
Estimated Completion Time: 2 Hours

Resources you’ll need:

Mini Social Icons Set by design deck.

Twitter Icons PNG

Onebit 1 & Onebit 2

Abstract IV

Fonts Pack

Creating the Background and the General Design Look:

Open up a new Photoshop document by going to (File > New) “Ctrl + N” (That is Cmd+N on the Mac). and let it be with the following settings:

Now go to (View > New Guide), then apply the following 4 main guides as you see below:

The next step is to make a gradient using the colors values #e34a10, #fce700 … you can either use “Gradient Tool” (G) or apply “Gradient Overlay” layer style (Layer > Layer style > Gradient Overlay) just like below:

Now, make a gradient and label the layer with “Main Background” and create a new layer above it and label it “Smooth noisy light” then fill it up with white color: #ffffff, then go to (Filter > Noise > Add Noise) and give it an amount between 30-32% … then set the opacity on 25%.

Creating the Top Page Navigation Bar:

Let’s start making this nice red navigation bar at the top of our layout, select the “Rounded Rectangle Tool” (U) with 5px radius and draw a shape like the one you see (69px height), use any color because we’ll change it in the coming step. But make sure to draw your shape inside the area that limited by guidelines … just as you see below:

Now, rasterize the layer and label it “topnav_bg” then apply these “Outer Glow”, “Inner Glow” and “Color Overlay” layer style settings:

It’s time to type some page titles for our portfolio, use “Type Tool” (T) and the following character settings:

Font Family: Caslon224 Bk BT, Size: 24pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #ececec, Leading: Auto, Tracking: 0.

Download the “Onebit” icon set (you can find it in resources above), then add the following icons to your layout and make sure to use “Ctrl + T” to get control handles around each one so you can control the size. The dimensions between text and its icon should be almost 15px.

What you have to do now is selecting all those layers together (topnav_bg, text layer and icons layers) to group them together (go to Layer > New > Group from Layers), name the group “Top”. This step will be repeated all over this tutorial, you’ll finally end up with tidy and organized PSD file.

Creating the Abstract Colored Breaks for the Top Page Navigation:

Now, we’ll goanna use “Abstract IV” brush set (download it from resources above) to add some abstract breaks behind the top navigation bar, the first thing to do here is hiding the folder we’ve already create it “Top” by just clicking on the eye symbol at the left side of it.

Make a new group (go to Layer > New > Group), I’ll label it “TopBackBreaks” then make a new layer (Layer > New > Layer or “Shift + Ctrl + N”). Select “Brush Tool” (B) and add the brush set you’ve downloaded to your Photoshop, pick up some color then select one of the brushes and make spot like that:

Repeat this step for several times, make sure to select different brushes and colors for each time and make a new layer for each spot as well, that will help you controlling with size and opacity of each one (you’ll see what I mean when you download the final PSD and take a look to this). Once you’ve finish doing this, close up the group and reduce its opacity to 56%.

Now, you’ll get colorful breaks just like that:

Note 1: To add PS brushes set, click on the small arrow at the top tool bar, then open up the menu by clicking on the other one (shown below) and select “Load brushes”, you’ll get a window which allows you to add the new brushes easily by choosing the required brush set then click “Load”.

Note 2: You can merge all of the abstract colorful breaks layers into one after you find them well and happy with the final look; select them all then press “Ctrl + E”.

You can show the “Top” group again, by re-clicking on the eye symbol to get the final result:

Creating the Title and Short Description:

Create a new layer then use the following smooth brush (with size 250px, white color: #ffffff) and make a spot like below, then reduce the layer opacity to 44%.

It’s time to use “Type Tool” (T) and type a title for the portfolio; I’ll just type my name using the following character settings:

Font Family: CF Charlemagne, Size: 36pt, Weight: Bold, Anti-aliasing setting: Smooth, Color: #544014, Leading: Auto, Tracking: 0.

Once you’ve happy with the text, apply the following “Outer Glow” layer style settings:

Keep selecting the “Type Tool” (T) and type some description about yourself (the portfolio owner), using the following character settings:

Font Family: CF Colosseum, Size: 14pt, Weight: Bold, Anti-aliasing setting: Smooth, Color: #544014, Leading: Auto, Tracking: 0.

This is my result:

Creating the Twitter Widget:

Show up the guidelines (if it’s not) by pressing on “Ctrl +;” then select the “Rounded Rectangle Tool” (U) with 5px radius and color value: #ffffff (white), draw a shape like the one you see (435px as width, 91px as height, 54px far from top navigation bar) considering the right guideline. Once you’ve happy with the shape, rasterize the layer then label it “twits_bg” then apply the following “Stoke” layer style settings:

Now, reduce the opacity of this layer to 40%. This is what you should get:

Download the Twitter Icons PNG from resources above, then add the following on to your layout, you can use “Ctrl + T” to get control handles so you can get the size you want. Then select the “Type Tool” (T) and type your twitter username using the following character settings:

Font Family: Arial, Size: 16pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #2c2b2b, Leading: Auto, Tracking: 0.

You should get something like that:

Again with “Type Tool” (T), type some twits using the following character settings:

Font Family: AXtMashtour, Size: 14pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #1e1e1e (and #10b7c7 (for links)), Leading: Auto, Tracking: 0.

Finish this part by grouping all layers together into one group, label it “Twitter”.

Creating Summery about the Portfolio Owner:

We’ll start up here with making new guide by going to (View > New Guide) and make horizontal guide with 518px, like following:

Type text that says “Hello there!” with “Type Tool” (T) using the following character settings:

Font Family: Vani, Size: 72pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #8a6d0a, Leading: Auto, Tracking: 200.

After that, apply these “Outer Glow” layer style settings on your text:

It’s time to type some summery about yourself (portfolio owner), just use the “Type Tool” (T) to make a rectangle text then paste the summery you want inside it, using the following character settings:

Font Family: Vani, Size: 24pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #725a0a, Leading: 32pt, Tracking: 10.

Apply the same “Outer Glow” layer style settings you’ve do it for the previous text “Hello there!” on this text as well. You should get a result like that:

Now let’s begin making the “Download my resume” button. First, make a new layer (Layer > New > Layer or “Shift + Ctrl + N”) then select the following two brushes (make sure to set the color on white #ffffff) to make something like that:

Label this layer with the name “Light” and then reduce its opacity to 55%.

Next, select the “Rounded Rectangle Tool” (U) with 5px radius and whatever color (we’ll goanna change it later), draw a shape like the one you see (230px as width, 47px as height) considering the far from the right guideline which is 44px. Once you’ve happy with it, rasterize the layer and label it “download_bg” then make some styles by applying the following “Inner Glow”, “Gradient Overlay” and Stroke” layer style settings:

With “Type Tool” (T) type the text “Download my resume!” using the following character settings:

Font Family: Alberta, Size: 17pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #37731f, Leading: Auto, Tracking: 0.

Note: notice that we keep the far between the guideline we’ve created at the beginning of this section and the download button about 42px.

Creating Works Block:

We’ll begin here by making some colorful breaks just as we’ve done previously for download button, so select “Brush Tool” (B) and make some abstract breaks and use different colors for that and be sure to let every single spot on its separate layer so you can get more control options, you may need to reduce the opacity of some layers (as you’ll see in my final PSD at the end of this tutorial).This is how my result:

Note: I apply some “Gradient Overlay” styles on some of the abstract breaks to get high styled result.

Now, we have to set new guidelines for locating the main works container inside them. As usual, go to (View > New Guide) then make 548px horizontal one and repeat that to make another one with 771px, like following:

Select the “Rounded Rectangle Tool” (U) with 5px radius and whatever color (we’ll goanna change it later), draw a shape like the one you see considering all guidelines (the shape should be located inside the four guidelines. Once you’ve happy with it, rasterize the layer and label it “Works_bg”.

Apply the following “Outer Glow” and “Color Overlay” layer style settings:

It’s time to add our works screenshots, but after that let’s make some holders for the screenshots; I believe it would be nicer like that!

Select the “Rounded Rectangle Tool” (U) with 5px radius and white color: #ffffff, draw a shape with 272px (width), 149px (height). Once you’ve happy with it, rasterize the layer and apply the following “Stroke” layer style settings:

Reduce the opacity to 15%, then duplicate this shape twice, you should get tow more copies from it, locate them like below.

Note: to be sure that those shape are aligned well together, select them all then go to the top tools options bar and click “Distribute Horizontal Centers”.

Now, add the screenshots you want (it should be 257px as width and 135px as height), I’ll just add some of works here.

The next step is to add some text under each work that tells to know more about that works or visit the related website (if it’s exists). Select the “Type Tool” (T) and use the following character settings:

Font Family: Bitmap Police, Size: 14pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #f0f8f8, Leading: Auto, Tracking: 0. When it’s done, reduce the opacity of these texts to 35%.

Now, we’ll goanna make the rounded selected circled down the main container, set the color on value: #ce5a20, then select the “Ellipse Tool” (U) and draw circles like the ones you see below, rasterize the layers once you’ve finished. You’ll need 5 copies from the main circle, duplicate it and drop the new copies one by one horizontally while you’re holding down the “Shift” key.

Apply the following “Outer Glow” layer style settings on all circles layers:

And the following “Color Overlay” layer style settings (plus to previous “Outer Glow” one) on the first circle which is the active one:

The result:

Creating the Special Quotes Block:

Again, use the brush set (from resources above) to make new abstract breaks using different colors. For me, I made three ones just like below:

Select the “Rounded Rectangle Tool” (U) with 5px radius and any color, draw a shape with 726px (width), 66px (height). Once you’ve happy with it, rasterize the layer and apply the following “Outer Glow” and “Color Overlay” layer style settings:

This is what you should get:

Now, select the “Type Tool” (T) and type the title that says “Special Quotes” using the following character settings:

Font Family: Calisto MT, Size: 24pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #2c2b2b, Leading: Auto, Tracking: 0.

And the following ones for “… That I Love” text:

Font Family: Calisto MT, Size: 18pt, Weight: Bold, Anti-aliasing setting: Smooth, Color: #2c2b2b, Leading: Auto, Tracking: 0.

And the following ones for the content text:

Font Family: Comic Sans MS, Size: 16pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #edceb6, Leading: Auto, Tracking: 0.

Note: notice the far between the main container for special quotes and the main works container, it is 116px.

Creating the “Keep in Touch” Footer Block:

First, we’ll goanna make a new guide, go to (View > New Guide) and set the horizontal value 1074px as you see below, we’ll use this guide to set the title for this section:

Let’s begin doing this by selecting “Type Tool” (T) and type the title “Keep in Touch” using the following character settings:

Font Family: Centaur, Size: 30pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #a33e1b, Leading: Auto, Tracking: 25.

Once finished, apply the following “Outer Glow” layer style settings:

Now, add your phone number and email id using the following character settings:

Font Family: Acropolis, Size: 16pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #a7430a, Leading: Auto, Tracking: 0.

Once finished, apply the same “Outer Glow” layer style settings that you’ve already done for title text.

It’s time to download the Mini Social Icons Set and add the following icons to your layer:

Type the links of your socials using the same previous character settings (that we’ve done for phone number and email), but with small font size here, 14pt. As well as, apply the same “Outer Glow” layer style settings that you’ve already done for title text, phone number and email.

Creating the “Skills” Footer Block:

As we’ve done before, we’ll goanna make a new guide, go to (View > New Guide) and set the horizontal value 1042px as you see below, we’ll use this guide to set the title for this section:

Type the title by selecting “Type Tool” (T) and using the same character settings that you’ve done for “Keep in Touch” text, but with font size: 30.55pt. Then apply the same “Outer Glow” layer style settings that you’ve already done for “Keep in Touch “title text.

Add the icon you see near the “Skills” text from Onebit Icon set (download from resources above), you can use “Ctrl + T” to get control handles and control the size.

Now, set the color on value: #95542c, then select the “Custom Shape Tool” (U) and choose the following shape from options above (it’s default). Draw a small shape like below and once you’ve happy with it, rasterize the layer then duplicate it several times (as much as skills you want to add), and this is my result:

Select the “Type Tool” (T) to type the skills you want using the same character settings you’ve done for title text, phone number and email, but with small font size here, 16.08pt, as well as apply the same “Outer Glow” layer style settings that you’ve already done for title texts, phone number, and socials links.

Creating the “Send Message” Footer Block:

As we’ve done before, we’ll goanna make a new guide, go to (View > New Guide) and set the horizontal value 1008px as you see below, we’ll use this guide to set the title for this section:

Type the title by selecting “Type Tool” (T) and using the same character settings that you’ve done for “Keep in Touch” and “Skills” texts, with font size: 30pt. Then apply the same “Outer Glow” layer style settings that you’ve already done for “Keep in Touch “and “Skills title texts.

Add the icon you see near the “Send Message!” text from Onebit Icon set (download from resources above), you can use “Ctrl + T” to get control handles and control the size.

The next here, is to make some abstract breaks just as we’ve done before, this is my result:

Now, let’s begin creating the contact form by selecting the “Rounded Rectangle Tool” (U) with 5px radius and color value: #87ba36, then draw a shape with 189px (width), 28px (height). Once you’ve happy with it, rasterize the layer and apply the following “Stroke” layer style settings:

Label this layer “name_bg” then reduce its opacity to 50%.

Note: notice the far from right edge of the layout, 221px.

Duplicate the “name_bg” layer and re-label the new one with “email_bg” then drop it down while you’re holding the “Shift” key for almost 16px, you should get something like this:

With the “Rounded Rectangle Tool” (U), 5px radius and color value: #87ba36, draw another shape for message, it should be 260px (width), 97px (height). Once you’ve happy with it, rasterize the layer and apply the same “Stroke” layer style settings that you’ve applied for “name_bg” and “email_bg” layers, label this one “msg_bg”.

Add some icons from Onebit Icon set (download from resources above), you can use “Ctrl + T” to get control handles and control the size. Once finished, reduce the opacity of all these icons to 58%. This is what you should get:

Now, type some text with “Type Tool” (T) and using the following character settings:

Font Family: Arial, Size: 12.54pt, Weight: Italic, Anti-aliasing setting: Smooth, Color: #fce7d9, Leading: Auto, Tracking: 0.

Reduce the opacity of all these text layers to 60%.

With the “Rounded Rectangle Tool” (U), 40px radius and color value: #87ba36, draw the send button, like the one you’ll see it below. Once you’ve happy with it, rasterize the layer and apply the following “Stroke” layer style settings:

Now, type the word “Send” using the following character settings:

Font Family: Arial, Size: 16pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #fce7d9, Leading: Auto, Tracking: 0.

Reduce the opacity of this text layer to 73%.

Next, add the following alert icon from Onebit Icon Set, and then type text that says “your message has been sent!” using the following character settings:

Font Family: Acropolis, Size: 12pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #954416, Leading: Auto, Tracking: 0.

Then, apply the same “Outer Glow” layer style settings that you’ve done before for title texts, phone number, and socials links.

Conclusion

The first part of this tutorial has done now! We’ve just created the home page for our complete portfolio, so don’t forget to follow the coming parts which we’ll continue designing the other pages and of course exclusively on HV-Designs … I’ll be happy to see your comments below and know what you think, as well as see more results of your work.

Download Source Files

Download the free PSD for this tutorial that is licensed under the Creative Commons license. Of course, attribution is required and appreciated.

The Final result:

(Click on the image to see the full size)

Tutorial Details

Program: Adobe Photoshop
Version: CS5
Difficulty: Intermediate
Estimated Completion Time: 1 Hour

Resources you’ll need:

CS4 Mini Icon Set by Bobbyperux (deviantART).

Mini Social Icon set by design deck.

Metal Mesh Patterns by Axertion (deviantART).

Any email icon you like. (This is nice one from (GraphicsFuel)

Fonts Pack

Setting up the Photoshop Document and Creating the Background:

Create a new document (Ctrl + N) with the sizes 1200 x 600 pixels and fill it up with the color value #0a0a0a. Label your layer “Background”.

Duplicate the layer “Background” (Layer > Duplicate Layer), then go to (Filter > Noise) and add the following noise settings:

Reduce your layer opacity to 14%. Don’t forget to label this layer with “Background Noise” just to keep our final PSD file organized and tidy.

The next thing we have to do is setting some guidelines, so we can keep our final result as exactitude as possible. Go to (View > New Guide) and set your guides as the following:

Creating the Main Container:

In this, we’ll goanna make a nice container to put all content inside it.

Select the “Rounded Rectangle Tool” (U) with 10px radius and the color value: #101010 then draw a shape like the one you see below (try to use guidelines):

Once you’ve happy with the shape, rasterize the layer (click on it by the right mouse button and chose “Rasterize Layer”) then apply the following layer styles “Color Overlay & Stroke” settings (go to Layer > Layer Style):

Now, I’m going to add smooth texture to this layer, make sure to download the textures set that I mention in resources above.

Make a new layer (Shift + Ctrl + N) and fill it with the following pattern you see below by selecting “Paint Pocket Tool” (G) then choose the option “Pattern” from the bar above then add it to your Photoshop.

Now we’ll going to make cool trick now, make sure to place the pattern layer above the container one, next go to the layer “Container” (I mean make it active) then right-click on it while you’re holding down the “Ctrl” from keyboard, you should get a dotted selection around the container just like the one you saw above in the previous screenshot.

On the working space (layout), be sure to select “Rectangular Marquee Tool” (M) and the layer of pattern is activated, left-click by mouse then chose “Select Inverse”, now press the “Delete” key from keyboard … then reduce your layer opacity to 5%. You should get a result like this:

Creating “Hours”, “Days” and “Weeks” Rounded Squares:

Select the “Rounded Rectangle Tool” (U) with 10px radius and the color value: #171717 then draw a shape with almost 198px (width), 107px (height), rasterize the layer (click on it by the right mouse button and chose “Rasterize Layer”), this is the result:

Apply the following layer styles “Outer Glow, Inner Glow & Stroke” settings as we’ve done before:

This layer will be used for weeks; we need two more copies of it for days and hours. Just Duplicate it twice and drop each new layer to be located like this (the distance between the one and the other is 35px):

With “Line Tool” (U) draw a line with 2px radius and the color value: #728c24 (or you can apply it through “Color Overlay” from layer style. Be sure to locate the line layer under the number ones later to get something like this:

Duplicate the line to get two more ones and drop them horizontally … you should get something like this:

It’s time to use the “Type Tool” (T) to add the some numbers; we’re going to add them with the following character settings:

Font Family: Arial Rounded MT Bold, Size: 82pt, Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 5.

The color doesn’t matter now because we’ll goanna change it by applying this “Gradient Overlay” effect:

The same way, type other texts for days and hours, as well as apply the same layer styles. This is my result:

Keep selecting the “Type Tool” (T) and add the words “Weeks”, “Days” and “Hours” using the following character settings:

Font Family: Arial Rounded MT Bold, Size: 30pt, Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 5.

Apply the following “Outer Glow, “Bevel and Emboss” and “Color Overlay” layer styles on each text layer (you can use copy & paste layer styles by clicking right-click on required layer):

This is my result:

Typing Some Welcome Text:

A big, wonderful “Hello” word will be adding now with “Type Tool” (T) and using the following character settings:

Font Family: Andrew Gothic (get it from resources above), Size: 82pt, Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

Then apply the following “Outer Glow, “Gradient Overlay” and “Stroke” layer styles:

Now add the text you want to tell visitors about the site or encourage them to wait for launching! I use the following character settings for mine:

Font Family: Arial (it’s default), Size: 24pt, Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 5, Color: #a0a0a0.

Once you’ve happy with what you type, apply the following “Stroke” layer style, then give you layer the opacity 58%.

Creating the Email Notification Form:

Select the “Rounded Rectangle Tool” (U) with 10pt as radius. Then draw a shape like the one you see below to be the email notification. Keep the far 329px from the left.

Label you layer “email_notification_bg” then apply the following layer styles “Inner Shadow, Outer Glow, Color Overlay and Stroke”:

Add any email icon you like (I prefer to use the white color for it) then add it and reduce its opacity to 65%, then use the “Type Tool” (T) to add the text “your email here …” inside the rounded email notification rectangle with the following character settings:

Font Family: BenguiatGot Bk BT, Size: 18pt, Weight: Book Italic, Anti-aliasing setting: Smooth, Color: #414141, Leading: Auto, Tracking: 5.

The next step here is to make an obvious text that can be clickable when converting this layout into working XHTML/CSS template, and it’s for insure visitors’ requests and get them notified when the site goes live.

Use the “Type Tool” (T) to add the text “notify me!” with the following character settings:

Font Family: Arial Rounded MT Bold, Size: 18pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #414141, Leading: Auto, Tracking: 5, then apply the following layer styles on your text layer “Outer Glow”, “Gradient Overlay” and “Stroke”:

Once you’ve finished that, reduce the opacity of this layer to 52%.

Use the “Line Tool” (U) with 2px radius, color value #3c3d40 to draw a line under the “Notify me” text then apply the following “Outer Glow” settings:

Creating the Social Networks Links:

Download Mini Social Icon Set by design deck from resources above then add facebook and twitter icons (of course you can add whatever you want), control the size by using “Ctrl + T” and locate them like below then add your facebook page and twitter id using the following character settings to type:

Font Family: Arial Rounded MT Bold, Size: 14.24pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #f5f5f5, Leading: Auto, Tracking: 5.

Creating Title and slogan:

Ok … it’s time to type our site title and slogan! I think this is will be the easiest thing ever! Of course it’s our “HV-Designs” and its pretty slogan. Use the “Type Tool” (T) to type the name “HV-Designs” with the following character settings:
Font Family: Century Gothic, Size: 40pt, Weight: Bold, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 5 (just use any color).

Apply the following “Outer Glow”, “Gradient Overlay” and “Stroke” settings on your text layer:

For slogan, we’re goanna use the following character settings:

Font Family: Arial, Size: 16pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #8e8e8e, Leading: Auto, Tracking: 5.

Adding Adobe Icons for Back:

Download “Adobe CS4 Mini Icon Set” listed in resources above, then add some of these nice icons to your layout and use “Ctrl + T” to control size and make some rotation and locate them above each other for both the two sides. I think this is easy step, I’m sure you won’t find any problems. Be sure to group all layers (as usual) in one group and do the most important thing for this! It’s to locate this group exactly above the “Background” one, i.e. let it be under the container, which will make you get impressive show of specific part of each icon without doing any more steps to hide the other parts.
Also you can see how my PSD File is organized … I hope you keep yours like that too.

Conclusion

Ok … we’re done now! I wish you’ve found this tutorial useful. Feel free to share us your opinion and comments below.

Download Source Files

Download the free PSD for this tutorial that is licensed under the Creative Commons license. Of course, attribution is required and appreciated.

The Website

The first thing that you notice about the application is its website. When talking about an application’s website it is basically one big landing page. The application has a very limited time to grab your attention to make you want to read more into it. I think that Get Polka did a very good job on their landing page for what you see.

Right away you see the logo, a feedback bar, and the menu. Now, while this does catch your eye I feel like they fall a little short on getting their product in the spotlight right away. While the giant image will make you want to scroll down just to see what it is a picture of you are not scrolling down to actually learn about the application. If I was to re-design the home page I would place the image off to the right or left with some information on whatever side the image wasn’t on to really explain the application and show it off all ‘above the fold’.

Outside of that issue I think the website itself is very well designed. I love the subtle background and think it fits well with the whole application concept. I don’t like that it fades out into just a mono color background. I would love to see it repeated throughout the entire website, but that is my design opinion rather than an actual falling out regarding the website. The jQuery on the website is done really well and I love the natural scrolling motion and the separation of the different areas. All in all, however, the website is very well done and serves its purpose.

The Dashboard

Get Polka has a very simple sign in process that requires you to simply enter your email address and some bits of information like your name. I love the simple sign up form and then it immediately takes you to your dashboard, where you can begin using the application.

The design aspect of the application is very well done. From the log-in screen all the way into the project you are collaborating on the UI remains the same.

I really like the simplicity of the layout as it doesn’t clutter with unnecessary information and gets straight to the point. The first, and pretty much only, thing that you see when in your dashboard is the projects you are collaborating on. I do feel that they could use more of the screen for the application and maybe put in some thumbnails of the project instead of just the name, but those are all things that can come as the application grows and are aesthetic issues as opposed to usability issues.

Projects

Once you get into your projects area of your dashboard you can see a thumbnail of each design in the project. My project that I used for this review was the re-design of HV-Designs. As I was going through and testing I uploaded each individual page that was designed for the new design. The screenshot below only shows one page, but you can add as many different pages as you need per project

.

Now, here is where one of my main usability issues with the dashboard comes into play. When you click the Get Polka logo it should, based on UX principles, take you back to the home page of the dashboard as opposed to the home page of the website. I am sure this is something simple that my friends over at Get Polka will have already taken care of and fixed by the time this review comes out.

Uploading Files

Now we come to my favorite area of the dashboard. The creators over at Get Polka want to simplify your collaboration experience as much as possible, so they do something that I have rarely seen done in an application. The offer a drag and drop service that allows you to drag over your image as opposed to going through the upload steps and finding the right file. While that may not seem like very much work when reading it for someone like me that has literally thousands of files on my computer and hundreds of folders just on my desktop alone that can take more time than I want to dedicate. At first the drag and drop was just as much of a hastle if I was creating older projects, but as I create projects I am currently working on I already have their folder open anyway so I simple shrink screens, drag, drop, and it is uploading and I am ready to rock and roll with sharing.

Of course they do not limit to only a drag and drop service. You can choose to use a standard upload service if that is what you are more comfortable with. Either way you go you retain the same look and feel as the remainder of the dashboard.

The Application

Now we get to the application itself. The application offers so many different options that I am only going to skim through them and show you what they look like. When you guys get into the application you will see just what I mean. So, let’s start with one of the biggest things in the application that make it what it is; the comments. GP offers an amazing comment system and each comment starts its own thread, with its own number. As you delve deeper into the application, with more collaborators, you can hide and view layers/comments based on the individual collaborator. The commenting system was very well done and is definitely a big plus for the application. My only issue right now with the comment system is that the comments do not update in real time, meaning if two people are in there at the same time they will have to close the design and re-open it to see what the other person posted. It’s still a new program to me so I don’t know how often people with be in there are the same time, but I have used it for my last client and during the testing and two people were in there together more often than not. I am curious to see if this is still an issue as I begin using the full version and incorporating it into all my clients.

The next thing to talk about, which I already kind of touched on, is the collaborators. The choice to put each collaborator on what is, essentially , their own layer was a very good choice. This way you can see what each individual person is saying about the design, as well as seeing what everyone is saying about a certain area. When dealing with clients this helps, especially when you are working with a committee that has to decide on the website.

Now you can add other collaborators as well, which was a great option. I do not believe that there is a limit to the number of people you can collaborate on a project with, so go to your heart’s desire. The other great thing is that you add collaborators based on project and not based on design, so you are saving yourself some time. I do hope that they add the ability to add people strictly by design in the future. I know when I work with some clients there are people that I only want to be able to see one page of the design at the moment, or a different version of the page with a watermark when it comes to rough drafts. All in all though the entire application is very well done and can only get better as new versions are released.

I want to give a big shout out to Ajay Mathew, the co-creator of Get Polka and the man that reached out to me to review this design. Thanks for all the hard work Ajay and the entire team! Keep it up and we will keep using the project and watching it grow exponentially!

Visit the Site!

Final Result

Tutorial Details

Program: Adobe Photoshop
Version: CS5
Difficulty: Easy
Estimated Completion Time: 30 minutes

Resources you’ll need:

Grungy Asphalt Icon Set

SEM Labs Icon Pack

Used Fonts Pack (RIGAfont, Franklin Gothic Book, Segoe UI)

Used Texture (Fabric Patterns)

Setting up the Photoshop Document:

We’ll start by opining Photoshop and make a new document with the following sizes:

As you see, keep making the resolution 300 pixels per inch and set the color mode to 8-bit CMYK and label the document as you wish, it’s “Hiba_Personal_Card” here.

Now, set up some guides to help you placing the content by going to (View > New Guide) then make tow for vertical and tow for horizontal according to what you see in screenshots below:

The space you’ll get between the four guides is where we’ll work on! You must let all card content locate inside this area so you can finally get more successful result.

Creating the Back Side Background:

Create a new layer (go to Layer > New > Layer) and label it “Background”, select the “paint Pocket Tool” (G) then fill up the layer you’ve already create with the color: #4a2308. You may have the following result:

Now create a new layer (make sure to place it above the “background” one) and label it “Texture”, remember to download it from resources above. Use the “paint Pocket Tool” (G) and set the option “Pattern” then click to fill up the “Texture” layer with this pattern. Reduce the opacity of this layer to 40%; this is what you should get:

Select the “Brush Tool” (B) and the following soft round one with the size you see below:

From the color palette, set color on the value of white: #ffffff.

Create a new layer, and then click (with “Brush Tool” (B)) almost at the middle of your card to get the required light, label this layer “back_light” then reduce its opacity to 20%:

Download the “RIGAfont” font from recourses above, and then use the “Horizontal Type Tool” (T) to type your name or just any other name you want. For me, I’ll type “Hiba Hammad” as a name with the size: 14pt and color: # 614126. Here is our result:

Now, apply the following “Outer Glow” and “Stroke” layer styles (Go to Layer > Layer Style):

Note: To get the downloaded font inside Photoshop, all you need to do is copy it and paste it inside the folder “Fonts” that located in “Program Files > Windows”. When you open up Photoshop you’ll find it ready at the font list. I’m sure you won’t face any problems.

Creating the Front Side Background:

In this step, we’ll goanna design the foreground card side, and this is where we’ll add the information we want to let world know about us! Let’s start by hiding the old layers (Back side layers), you can easily do that by clicking on the eye symbol near each layer and folder, then create a new layer then label it “Foreground” just like you see here:

Fill up the color with the value: #f4f4f4 then use the “Paint Pocket Tool” (G) to give your layer this color, you should get a result like that:

With the same way we used to create the “Texture” layer, we’ll create a new one and label it “Texture2” then set the opacity on 20%:

Entering the Card Information:

Type the name you want, as you saw I type “Hiba Hammad”, of course, using the “Horizontal Type Tool” (T) with the size: 10pt and the same layer styles settings that we applied before on “Hiba Hammad” background text layer. Now give this new text layer the opacity 56%.
You’ll get a result like that:

Use the “Horizontal Type Tool” (T) to type “Production Manager” or your own job title under the name of you/your company just like you see:

Keep selecting the “Horizontal Type Tool” (T) to type some contact info (like email, phone number … etc) by using the “Franklin Gothic Book” font (get it from resources above) and the following character settings: Size: 4pt, Weight: Italic, Anti-aliasing setting: Smooth, Color: #797979, Leading: Auto, Tracking: 0. For me, I’ll type an email and phone … You should get something like this:

Now use the Grungy Asphalt Icon Set and add the following ones to your layout at the left side of both email and phone text layers:

Creating the summary block:

Set the color on value: #f4f4f4 then select the “Rounded Rectangle Tool” (U) with 10px radius, draw a shape like the one you see below, then give it the opacity 32%.

Use the “Horizontal Type Tool” (T) and type a text says “Who am I?” Use the “Segoe UI” font (get it from resources above) with the following character settings: Size: 8pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: # 9b8876, Leading: Auto, Tracking: 0. Give this layer the opacity 70%. Here is the result:

Now, use the SEM Labs Icon Pack (get it from resources above) to add the following female PNG to your layout (you may use other PNG’s, there’s male ones too). Be sure to place it at the left top from your “Who am I?” text layer. Also set the opacity of this layer on 70%.

Note: you can use (Ctrl + T) to get handles around any shape (like the icon we’ve already add) and control its size as you want.

Use the “Horizontal Type Tool” (T) to make a rectangle then type short summary so you can describe yourself / your company and tell people what you can do! Use the “Segoe UI” font (get it from resources above) with the following character settings: Size: 4pt, Weight: Italic, Anti-aliasing setting: Smooth, Color: # 9b8876, Leading: Auto, Tracking: 0. Here is the result:

The final result for this:

Conclusion

That’s it, my friends! I hope you enjoyed this tutorial and learned something from it. Feel free to share your comments; I’ll be ready to respond to all of them!

Download Source Files

Download the free PSD for this tutorial that is licensed under the Creative Commons license. Of course, attribution is required and appreciated.

Hiba_Personal_Card (1.06 MB, ZIP)

Mega Design Bundle 3 from Vectorpack.net Available for only $37!

As they are aware for your need of great design resources, the guys at Vectorpack.net have created a new Mega Design Bundle which contains over 900 design elements and which is available, for a limited period of time, for only $37, although its real value is that of $550. This great Mega Design Bundle is a collection of all the elements a designer needs in his everyday work, from vectors to PS brushes, from abstract backgrounds to seamless patterns, from web elements to textures and wordpress themes. Check out this Mega Design Bundle and buy now all these incredible resources which are available now for only $37!

As these design elements come from Vectorpack.net, you can be sure to expect top notch quality!

If you are to purchase this Mega Design Bundle, you are to get the following elements:

- 210 PS brushes

- 396 vector elements

- 162 web elements

- 66 abstract backgrounds

- 70 seamless patterns

- 30 textures

- 1 wordpress theme

Moreover, you are to get an extended license for these products, and you will get your download immediately after you buy the Mega Bundle. Remember that this is a limited offer, which will be available for you only till the 18^th of March. So make sure to purchase this great deal today in order for you not to miss these incredible design elements!

As you already know it, Vectorpack.net makes such incredible deals every once in a while, so, if you don’t want to miss the next Mega Design Bundle, make sure to subscribe to their newsletter!

Some of What’s Included

Download the Bundle Today!

So what is the importance of Social Media Marketing? It is not necessarily an important aspect of a web presence, as much as it is a necessity of your web presence.

It’s Your First Impression

It used to be that your store front was a person’s first impression of your business. Then it graduated to your website being your first impression, and now we have graduated once again to Social Media being your first impression to much of the internet. That’s not to say your website isn’t vital, because it is still the most vital aspect to a web presence, but your social media presence is becoming just as important.

Facebook, Twitter, Zerply, LinkedIn, and a million other social media sites are visited every single day by millions of people. If your friend had a bad experience at Taco Bell you are going to hear about it first via Facebook or Twitter. Knowing that, as a business would you rather be able to talk about that person’s experience or hear about it days down the road when you start losing business.

Now, naturally as a web designer we want what is best for our clients, right? Well, I wouldn’t say we want what is best for them all the time, but we have reputations to uphold. The whole reason your client wanted the website was to build their business, and the more success that they have the more success you will have.

How to Tell Your Clients

I can guarantee that you will get that one client at some point that will want to harass you about adding a Facebook or Twitter. You will get the standard, “That’s too much work” or “we don’t have time” and you have to know how to combat those.  You need examples, both professionally and personally,  to give your clients on the importance of social media.

If social media was not that important then why would you see such a big presence by companies like Pepsi, Coke, McDonalds, and even Wal-Mart? Your clients may come back with the fact that they are huge companies and can afford to hire a team dedicated to Social Media, and that may be slightly true. You need to explain to them though that these big companies realize that Social Media is the key to gaining new customers, and the only way to do that is to give them a reason. You can also explain to your clients that these businesses are big enough that if it wasn’t an essential part of business in today’s world why would the big companies waste their time?

Utilizing Social Media for Your Client

Outside the obvious Twitter and Facebook buttons for the website you are designing, how else can you utilize Social Media? First you need you explain to your client that they must offer potential clients a reason to follow their pages. Once you have done that you must incorporate that into your pages and into the various designs.  Having a Facebook and Twitter page is great, but you really want them to stand out.

Once the design is completed you will want to explain to your client how to utilize their Social Media. While Facebook and Twitter are great places to spread the word about your business people are also following you to get some interaction, especially if you are a smaller business. It is essential that you explain to your client that if they only have time to make two posts a week that one of those be interacting with those that follow/like their page.

Personalization of a Facebook or Twitter page will take it to that next level and show customers that you really do care and that you are a real entity instead of just some business wanting their money.

Conclusion

With the importance of Social Media moving forward in the day it is essential that you make sure your clients understand this. What are some tips and tricks that you guys use for your clients to show them how essential Social Media is?

The winner of our giveaway is Lawrence777. We have replied to your tweet. To claim your prize please send us an email to the admin email on the contact page so we can get you the details of your hosting account! Congratulations again, and be sure to keep watching the site for more excellent tutorials and big giveaways.

• Unlimited Web space
• Unlimited Traffic
• Unlimited Email Accounts
• Unlimited SQL Databases
• Unlimited FTP Accounts
• 99.9% Uptime Guarantee
• Free CDN Service
• Free Google Vouchers
• Free Transfer & Setup
• Free Tech Support
• cPanel Web Hosting
• Fantastico De Luxe
• Softaculous Premium
• Attracta SEO tools via cPanel

How To Enter

Entering the contest is incredibly easy. All you have to do is post a comment explaining why you want to win the hosting account and what you would use it for.  Of course the winner’s will be announced here and on Twitter, so your best bet would be to follow us on twitter and like us on facebook as well.

You can also follow us on Twitter and tweet out, “I just entered @hvdesigns hosting giveaway! You should enter to: http://bit.ly/wMmTl1 ” and receive another entry to the contest.

Your third and final entry can come from liking us on Facebook and posting on our wall about your favorite tutorial.

The contest will run from 2/10/2012 to 2/17/2012, with winners being announced on 2/20/2012.

Alright, start out with a new document 600px x 600px and fill it with #89c3db. Now grab your rounded rectangle tool and set the rectangle radius to 25. Change your foreground color to #e4bf84 and draw out a rectangle that is 510px x 80px. You are gonna wanna space it somewhere near the bottom. Right now there are no specific pixels for spacing yet. We will worry about the spacing once our hamburger is done.

Now, grab your pen tool and choose the Add Anchor Point tool. Add an anchor point at the center of your rectangle and pull it down to give our bottom bun just a little bit of a rounded feeling.

The Burger

Ok, now we are going to create our simple burger patty. To create our burger patty we are going to change our foreground color to # and then we are going to grab our rounded rectangle tool again. This time I want you to draw out a rectangle that is 550px x 95px.

Now grab your Add Anchor Point tool again and give the top and bottom a slight curvature as well.

The Condiments

We are on our way, now we just have to give our burger that little extra something to make it look delicious: the condiments. We will start out by adding the cheese to our burger. To do this you can either use your polygonal lasso tool or your pen tool. In either case you will want to create a new layer above your burger layer and change your foreground to #f3ad53.

Now make a selection that looks like the cheese is curving over the burger. It’s basically a rectangle on the sides and top, with a triangle at the bottom. This is what we got for our selection:

Now fill your layer and you have your cheese.

Now to draw out the next condiment, our lettuce. Depending on how detailed you want to get with it you can use your pen tool, but I found an easier way to make some nice lettuce. Grab your freeform pen tool so you can just draw out some nice lettuce shaping. If you have a tablet to draw on now is a great time to use it, but you can do it with your mouse as well. I have never seen a perfect piece of lettuce on anything, so why make ours look perfect?

This is our shape, on a new layer and filled with #56b861:

Now for the tomato, my favorite piece of a sandwich. The tomato is made up of another simple rounded rectangle with a little curve to them. So, grab your tool again and choose 10px for the radius and #ca4a4a for your foreground color.

Drag out a new rectangle that is 535px x 65px. Again we want to grab our add anchor point tool and give the tomato some curvature to it. We want to add a little more of a curve to our tomato than anything else.

Oh yea, the condiments are all finished. Now to finish off our burger with the top bun.

The Top Bun

Change your foreground color to #e4bf84 and drag out a circle that is 545px x 300px. It will overlap the rest of our design, which is fine for now. We are going to take care of that in the next step.

Now, buns all have a little curve to them, so we will add that in now. Go ahead and rasterize your layer and then grab your elliptical marquee tool and draw out a large selection with the same curvature that you would like your top bun to have.

Once you have your selection, right click and hit Select Inverse. Once you have the inverse selected you will want to hit your delete key, and that is your top bun curvature. You may need to play with it a few times to get it exactly how you want.

You will notice that the tomato is barely showing, which is what we wanted. The top bun still feels just a little to much like a circle so enter into free transform mode (CTRL+T) and just shrink the buns height a smidge until you are satisfied and enough of the tomato is showing.I shrunk ours down to 95% height to get the right feel that I wanted.

What is our burger missing? Well the top bun is sure missing its sesame seeds and then the burger still feels to be lacking something….grease. Let’s get started on the sesame seeds first as this is one of the easiest steps.

Change your foreground color to #FFF and grab your ellipse shape tool. Now drag out a simple ellipse that is 25×4 and place it on your document. Now just duplicate your layer over and over, moving them around and rotating if you want, to give yourself the sesame seeds.

And to add the grease simply grab your Blob 1 Custom Shape Tool and draw out some grease shapes with #f0a45a set as your foreground color. Be sure your place them underneath your burger layer and there you have it, your grease!

Our burger looks great. Now, you can start playing around with some effects and textures to really get a nice looking illustration. We added a few shadows, some texture to the burger, and an overlayed noise layer and get another version.

Conclusion

We now have our drink and our burger for our Illustrative Poster. Next we will be creating the fries and fry basket and then will put them all together with some simple text to create our poster. Be sure to check out the article that spawned this tutorial series and Part One of the series.

Want to share your results? Go ahead and post them to our Flickr group, Facebook, Twitter, or just post them in the comments for us to see.

As always let me show your our final product. Below is the full version of what we will be creating over the next week. Today we will be working on creating the beer glass.

To get started create a new document that is 600px by 600px and fill it with #89c3db

Setting Up Our Outline

Alright let’s get started by drawing out the outline to our glass. Go ahead and change your foreground color to #a1a1a1 and grab your Ellipse Tool. Drag out a circle that is 355px wide by 90px tall. You are going to want to center it horizantally and space it 60px from the top of our document.

Now, this will be the only time we open up the layer styles and that is just to reduce the fill and make it a solid outline circle. If you have your shape styles set up you can just choose a stroke only ellipse to draw, but in case you don’t apply the following:

Awesome! Now you are going to want to duplicate your layer and bring it down 310 pixels. You can do this by selecting your move tool and holding down the ALT key, moving down and duplicating your layer all at the same time.

Now let’s enter into free transform mode, CTRL+T, and shrink our circle to 75%.

Ok, now go ahead and rasterize your layer for your small circle because we aren’t going to need the full circle for our design. Once you have the circle rasterized grab your rectangle marquee tool and draw out a 240px rectangle, drag it down just a little over the top line of your circle, and hit the delete key.

Now, grab your line tool and draw out a 4px line that is 395 pixels tall. Enter into free transform mode again and now we are going to rotate our object to give us one side of our glass. Hold down your SHIFT key and rotate it -7 degrees and line it up with our glass.

Now simply duplicate your layer, enter into free transform and flip horizantal, and line it up on the other side of your glass. Now we have the outline for our glass and it’s time to move onto the next step, the actual creation of the glass.

Creating the Glass

Alright, now comes the glass creation. The first thing you want to do is make a selection that just barely goes beyond our glass and change your foreground color to #c7c7c7. My selection is 367px(w) by 480px(h). Create a new layer above your outline layers and fill it with our foreground color.

Awesome, now unselect your image and move your layer down below your outline. To make things easier you might want to Group together your outlines, that way you only have to bring it below the group instead of the other layers. Now for the very tedious part. Hold down the CTRL key and the SHIFT key and begin selecting each of your layers to have a full selection of your outline.

Now, right click and hit select inverse. Grab your eraser tool and begin erasing away the extra from our grey layer. You will want to really zoom in on the document so you don’t erase any of what we need. This will definitely take some time. Make sure you are letting go of the eraser tool every once in a while just in case you have to go back you aren’t going back too far.

When you have finished lower the opacity of our layer to 50% and you have the makings of the glass.

Create the Beer

Now it’s time to really get going on this baby. Change your foreground color to #eed7a0. Grab your rectangle marquee tool again and create a selection that is 355 by 330 and space it 35px from the top glass spacer and fill it with our foreground on a new layer.

Now, select the thumbnail of our glass layer (holding down ctrl and clicking the thumbnail) so you have a selection of your layer. Now we need to shrink our layer. Go to Select–Modify–Contract and choose 15px so you have a selection. Now select inverse and hit delete. It should look like below-

Awesome, now change your foreground color to #dcd6c0 and grab your ellipse tool again. Drag out a circle that is 305px by 85 px at the top of our glass. Depending on how high you want your foam you can line it up directly at the top, but we kept it down a little bit and showing some of the corners from the beer.

Looks funny right? Well now we are going to be creating the next layer of foam. Duplicate your circle and nudge it up 3px. Change the color to #ece5cb. Now, duplicate your circle one more time and nudge it up 7px. Change the color to #f5f1e4. If you want more foam you just add more spacing and a few more of our last layers. We are sticking with small foam though.

That there could be your beer, if you wanted to go for the most basics, but we are going to add just a few more things to make it look more realistic. We want to add some bubbles to our beer so we are going to grab our ellipse tool, change the foreground to #d5cca7, and draw out some random bubbles, rotate them, to whatever your hearts desire.

Now we want to give a few subtle glass highlights. To do this we are going to create a new layer, change our foreground to standard white, and lower our layers opacity to 45%. Make a selection of our glass layer and fill it with white. Contract the layer by 15, using our earlier method, and then delete the inverse selection. Shrink it down a little bit to get the right reflection for whatever you are doing.

Do the same with the top of the cup, using only our top circle for selection, instead of the full glass. This time when you do your selection you will also want to move your selection down 15px so all you are left with is a line type shape. Lower the opacity to 25% and your are finished!

Conclusion

We now have a super amazing glass of beer without effects. The next stage will be creating our fry basket, continuing with no effects. If you want to take your glass to the next level start playing around with colors on your outline, giving your glass layer more shadows and highlights, different style bubbles, and play with the foam to give it more feeling. Starting out with no effects can really get you the feel that you are looking for and then you can start adding in the additional details to get something really fantastic. Watch our Dribbble feed for what you can turn this glass into.

Recently on Dribbble there was an excellent No Effects Challenge posted by the amazing Jonathan Ogden (who we are going to reach out to and see about getting a tutorial from his awesomeness) that really inspired this post. Each and every shot in the challenge was, obviously, created without using any layer styles or effects in Photoshop, just standard graphic talent. They are all amazing, amazing shots, but what is the point of them? Why have the layer styles if you aren’t going to use them? The importance and reason are both one and the same in their answer, because it’s important.

I am not by any means saying that we should just give up effects all together, but I am saying that it is VITAL to practice without them. I find that whenever I am strugling for inspiration on a design or wondering what Typography will look good on this poster, that if I just step back from the effects and put everything into an almost matte like look, that it flows together nicely. Let’s take a look at a few areas that can really benefit from using little to no effects.

Typography

Typography is one of the most important aspects of any design, if not the most important. You can have an excellent looking website, but if the typography sucks that’s all people are going to notice. Believe me on this because typography has to be the weakest aspect to my design and it really sets me back sometimes. Honestly, without the great people over on Dribbble and Forrst I would be lost in the dark when it comes to typography, but the best advice I ever got was to just step back from the effects and play on font and placement only, before bringing any of the layer styles into anything.

Here are a few of my favorite Typographic images from the no effect challenge:

A Very Simple Sports Style Typographic With No Effects

Free Binder Cover by Brad Blackman

Berlin Likes Fancy by Julie Ann Horvath

Those are, without a doubt, my top three typographic elements from the No Effect Challenge. Every single submission has been awesome and they just keep building and getting better. If you want to submit a typographic to the No Element Challenge and are a member of Dribbble post it up and let us know in the comments. If you are not a member of Dribbble then post it in our Flickr group so we can see the awesomeness.

Random Elements

Throughout the main challenge there were so many inspiring posts but not really a category to fit them in but I still wanted to show off the most inspiring no effect elements from the challenge, in my opinion.

No Effects Turntable by Alpis Design

NoFX by Jow Fawkes

Rum Runner by Mike Kamanski

I chose those three as my most inspirational because it just goes to show you how versatile design really is and that you can use less effects and still come out with an amazing design, whether all together or just as an element in the design. All three of the above designs can stand on their own as excellent designs or be placed into a project at any point, but most importantly you can then take the basis of what you created, add some effects, and bring your design to the next level, if that is what is required.

Conclusion

Be sure to check out and follow the design contest as I am sure it will continue to grow and post. I hope that what we talked about today helps you guys with any inspirational/technical issues that you might be having. I am interested in hearing what you guys have to say about the subject and seeing some of your no effect work.

We will be building our application screen at a 960×640 pixel resolution, but will be keeping in mind that screen size will change all the time, so we want our design to be functional as a fluid design, as well as a static design so when the app would be implemented on anything but the iPhone it is easy to bring over. Anyway, let’s get started with our design.

Open up a new document in Photoshop at 640×960 (obviously). Create a new layer and fill it with #343434 and then go download the Carbon Fibre pattern from Subtle Patterns (http://subtlepatterns.com/?p=22). Go into your layer style options and apply the CF pattern we just downloaded, changing the scale size to 55%.

Alright, now let’s start with our logo implementation. In a normal design process you will already have a completed logo ready to use on the app, but for now we are going to just be using a text filler logo with some basic metallic styling. Grab your favorite font and type out whatever you want for the logo. We are going to be using the Carbon Block Font, 110px, #e6e6e6. You will want to horizantally center the text/logo on your document and space it 110px from the top of our document. (If you are following our guide then the left and right margins are 202px)

\

Now to give it a metallic look you will want to apply the following texture, if you are following our color scheme.

Now, just underneath you will want to add your site tagline if you have one. We are using an #e6e6e6 30px Caviar Dreams for our tagline, Photoshop Tutorials.

Amazing! Now let’s begin to work on the sign in form for our log-in screen! We want to use the two main aspects of a log-in, username and password, as well as the obvious submit button and then a recover p/w option as well as a Register feature.

Because this is a mobile app I am going to diverge away from the standard label to the left or top and we will be putting the label into the actual input field. With such a limited space and the fact that users are using this on their phone you want to keep the information as readily accesible as possible.

We will start our by changing our foreground color to #efefef and grabbing our rounded rectangle tool. Set your radius to 10px and drag out a rectangle that is 510×75 pixels, horizantally center it, and space it 65px from the bottom of your site tagline or logo (If your logo is a little smaller then you may want to add some additional padding between the logo and first input area).

Now to make it look just a little bit better we are going to add in some simple styles that will give it that extra pop.

Now to add in the label. Grab your text tool and choose whatever font you want. We are using Comfortaa, a free font you can find and download at Google Fonts and is safe for Web Use, but you may want to use a safer font, such as Tahoma or Arial. Whatever font you choose pick a size that is relevant to the image below, and use #979393 for the color. Type out whatever label you want, ,such as Username or Email Address, and space it 20px from the left and vertically centered.

Now grab our two layers we just created and duplicate them to create our second input field. Space our second input box 60px from the bottom of our first one. I recommend using rulers to keep to the left and right side grid so everything remains pixel perfect.

Alright, now lets get to work on our two call to action buttons, cancel and log in. We will start work on the Cancel button, using very simple layer styles and effects to create an amazing button. Grab your rounded rectangle tool again and set the radius to 5px this time and your foreground color to #a31313. Drag out a rounded rectangle that is 150×70 pixels. Line it up with your left hand ruler and space it 65px from the bottom of our last input box.

Now to give our button a little bit of style, apply the following layers:

Now, I played around with what I wanted to do with our cancel button a lot before finally deciding. At first I wanted two small buttons with just icons in them, but it just didn’t look right on the screen. I decided that I would just go with the standard text, but again it just didn’t look right. Finally I decided to try them both and it turned out excellent.

First we are going to want to create our icon. Grab your custom shape tool, go to all shapes, and choose the x icon, easy to find as it’s the only one. Change your foreground color to #530a0a and draw out a shape that is 16px by 17px. Vertically center it and space it 15px from the left of the button.

Now we want to apply a very basic drop shadow to our icon to give it a letterpress style effect.

Now grab your text tool again and choose a very bold font. We are going to be using Delicious Heavy at 34px. Whatever font you choose should be a little bit taller than our icon and #530a0a. Center your text vertically and space it 15px from the right side of our icon.

Now apply the following layer styles:

Amazing! Our button is almost finished but we have just one more step. Change your foreground color back to #FFFFFF and grab your rectangle marquee tool. Create a new layer and make a rectangle shape around our button, about halfway down the button and fill it with white. Select the thumbnail of our button, select the inverse, and hit your delete key. Now change the opacity to 20% and you have an awesome, and finally finished, button.

Now, for our log in button all we are going to do is duplicate our layers and change some colors around. The button bg color is going to be #30a012 and the color for the icon and font is going to be #13530a. You can use whatever icon you want, but we are using the standard checkmark icon that comes with PS, same sizes as the x icon.

Looking amazing, right? We could stop there, but what about people that don’t have an account? What if you can’t remember you password? To keep with the simplistic feel of our app design we will just use simple text links, with a standard line underneath them. We are using 16px Tahoma for our font on both lines. Our first line color is #a9a9a9, same with the line underneath, and for our forgotten password line we are using #a41919.

The first line is spaced 80px from the bottom of our buttons and the password link is 25px from our register link.

There we go, we are all done with our sign-in screen. You might notice that there is a little bit of extra space at the bottom. We left that space there so if the menu key is up the design won’t interfere with the log in screen (a design we will get to later on) and also because our forms will be pushed down a little bit with validation issues, if present.

If you feel like something is missing you can always add in a button for the registration instead of a standard link or even a simple gradient on our patterned background would look nice. This is our final product:

and here is our final project with a few personalized changes.

I hope you enjoyed this tutorial and we look forward to bringing you more App Design tutorials in the near future. Let us know what you think in the comments or continue the discussion over on our Facebook Page.