Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

July 27 2013

13:00

Flat Web Design Tutorial – Portfolio Landing Page [FREE Download]

Some people may find flat web design boring while others totally love it. I find flat design interesting and more user friendly. It puts more emphasis on the content and it’s very flexible, which is really ideal for responsive web design. If you, like me, love flat design, make sure to check out 40+ Flat Web Design Inspiration. I’m pretty sure you will get goosebumps after seeing several flat designs.

Feeling inspired seeing those designs? Good! Today I will teach you how to design a portfolio landing page. Almost an hour long free video tutorial!

PSD Download

It doesn’t matter if you just started using Photoshop. I will guide you throughout the video, step by step using the basic Tools and Techniques like using Text Tool(T), Shape Tool(U) and quick tips to align elements and masking and manipulating an image.

Resources to complete this Tutorial:

Make sure you download all the resources! Are you ready? Let’s get started!

Flat Web Design Portfolio Landing Page Tutorial

That’s all guys, we’ve just finished our awesome portfolio. We hope you learned something from this tutorial. If you have questions feel free to drop them below. Don’t forget to share this article. Thanks!

July 02 2013

13:17

Create a Flat Countdown Timer in Photoshop – iOS 7 Inspired

In this tutorial I’m going to show you how to create a simple countdown timer, iOS 7 inspired!

Flat design is dominating the web and I’m sure you all know that Apple created a new look and feel for their OS. I’m really happy seeing the minimal look of the user interface and I know Apple fans are eagerly waiting to test iOS7 this fall. So, while we’re waiting I’m going to show you some great wallpapers and we’ll create a countdown timer in Photoshop. The look and the colour scheme will be based on the iOS 7 wallpapers that have been released. This tutorial will be very quick and beginners will find this Photoshop tutorial helpful in understanding the power of Free Transform.

Video Tutorial

And in case you prefer to do it the rough way, here’s a text and screenshot combo tutorial for you!

Step 1

Create a new document in Photoshop 730px by 410px and then let’s create guidelines by just dragging some guides from the Ruler Tool and placing them at the center of the canvas horizontally and vertically.

Step 2

Using the Ellipse Tool (U) create a 120px by 120px shape and place it in the center. Hide the fill layer and a stroke of 5px, color to #e1e1e1.

Step 3

Zoom in about 1200% and create a 1px line using the Line Tool (U) starting from the top edge of the circle down to the middle.

Step 4

Press Ctrl + Alt + T on the keyboard and you will see a transform control. See that Pivot Point (something like the crosshair of a sniper) on the center of the line? Let’s move that to the bottom edge of the line by holding the Alt key on the keyboard and clicking and dragging it to the very bottom.

Step 5

Don’t press enter yet. While the transform control is still there change the value of the Rotation to 10 degrees and press enter twice.

Step 6

Now press Shift + Ctrl + Alt + T on the keyboard, what this does is copy what we did in Step 5. Just continue pressing the keys until you have a spiral line shape.

Then change the color to white.

Step 7

Duplicate the base first/base shape that we’ve created and place it at the very top of the layers panel. This will serve as the rotation indicator.

Apply this gradient overlay.

Step 8

Mask the part you want to hide and make sure it matches with the desired day, time, min, sec that we will put it.

Step 9

Using the Text Tool (T) add a number for the desired day, time, min, sec and add the right label to it.

Final Step

Group the layers that we’ve created and duplicate it 4 times and align them horizontally by adding a 20px gap between each timer.

Look what I did here. With the timer that we’ve created I put an iOS7 wallpaper and blurred it about 15%. Then I played with the layer mask to hide the unnecessary parts, added some drop shadows and Boom! I came up with image you see below.

It’s a challenge for you to take this tutorial and go to the next level by just playing with layer mask and adding touches to make it look interesting, yet still minimal.

The Wallpapers

Man Of Steel


Download

Flying Paper Plane


Download

Windmills


Download

Hot air balloon


Download

Hot, Ice, Cozy and Frapp


Download

The Evolution of Man Geek


Download

Paper Plane


Download

Vintage Camera


Download

Air Plane


Download

Space Shuttle


Download

iOS7 Wallpaper

Image from Ihponehacks
Here is the iOS 7 Wallpaper from WWDC 2013. You can download the wallpaper here.

That’s it guys, I hope you learned something from this tutorial. It will be awesome if you share your results below. If you have questions feel free to drop them below. I would love to hear your thoughts and I am willing to answer your questions. I’ll catch you guys in the comments. Peace!

June 24 2013

13:00

Free and Premium Photoshop Tutorials for Graphic and Web Designers

Premium membership websites have become popular in recent years, by following the tutorials these sites offer you can teach yourself graphic and web design. However, if you’re having a hard time learning by yourself another option is to subscribe to premium courses. Sounds good right? You will become a graphic/web designer without having to spend the money on a degree from school, and many people are doing that.

School is not an option regarding this matter. Read Learn Web Design The Right Way: Quit College And Start Sucking Blood to learn more about this. Our Freelance Sergeant James Richman will explain everything about why you need to start sucking blood from now on and become a freelance web designer.

Okay, continue reading to check out both free and premium video courses for graphic and web design!

Tuts+Premium

Tuts+ is a fantastic network of educational websites. They offer tons of high quality and in-depth written and video tutorials. Tuts+ is composed of amazing sites where you can learn different kind of skills like web design and development, graphic design, motion graphic, photography and many more.

Price

  • Monthly: $19
  • Yearly: $180

Ledet

Ledet is a place that focuses on tools such as the Adobe Creative Suites and Auto Cad. Members have access to classes that cover Photoshop, Illustrator, Dreamweaver, and the rest of the gang.

Price

  • One time membership: $1,595

Lynda

Lynda is a place where you can learn everything about the web, they offer tons of high quality instructional video training for creatives. The instructors are professionals and some of the best in the web design industry such as Chris Coyer, owner of CSSTricks.

Price

  • Monthly: $19
  • Yearly: $180

Train Simple

Train Simple is a good place to learn Photoshop CS6 Fundamentals, tackling the power of Photoshop CS6 and learning how to create superior images and artwork. Learn how to perform key image editing tasks, including retouching, sharpening, and color correction. In the course you’ll see how to effectively work with layers, blend modes, masks and so much more.

Price:

  • Monthly: $9.99
  • Annual Membership: $99.99

Barryhuggins

A professional training course by Barry Huggins tackling Photoshop for web designers. Courses cover topics like defining colour settings for Web design work, designing buttons, saving images the right format and much much more.

Price

  • Monthly: £9.96
  • Annual Membership: £99.58

Photoshoptopsecret

Photoshop Top Secret might just be the most advanced course ever put on DVD, but now you can watch online! Your personal trainers Mark Monciardini and Melanie Stimmell will push you past your limits. Over 20 hours of jam packed training with surreal graphics and Hollywood special effects!

Price

  • Annual Membership: $179

Photoshopuser

If you’re tired of boring, basic training Photoshop User is the best place to learn in-depth Photoshop techniques. Once you feel comfortable with Photoshop, these courses will help you get up to speed on the areas you want to learn more about. Like, Path and shapes, layer styles, blending modes, types and much more.

Price

  • Yearly: $99

Adobe Creative

Adobe Creative Cloud is the place to go if you’re really looking for a more professional approach to teaching. Their premium membership will get you access to all the latest web-standard tools as soon as they release them. Learn new skills with their exclusive library of free tutorials. And never worry about being equipped for the future. You already are.

Price

  • Yearly: $49.99

NAPP

Photographers, designers and enthusiasts of all skill levels look to NAPP for the best Photoshop tutorials on the planet. Their 71,000+ members know how to take an ordinary image and turn it into something extraordinary. You can too.

Price

  • Yearly: $99.99

Kelbytraining

Kelbytraining offers tons of video Photoshop tutorials that are really high quality and in depth video training that you can learn from. Check out their video sample on their website and find out yourself.

Price

  • Monthly: 24.95
  • Yearly: $199

Totaltraining

Total Training’s Adobe CS6 course will help you know the key new features in this version and teach you about the tools, palettes, and menu bars, as well as the major features like layers, selections, image editing, compositing, using Adobe Bridge, type design, drawing and painting, and creating a web photo gallery.

Price

  • Monthly: $24.99
  • Yearly: $239.88

Before & After Magazine

Before & After Magazine is really good for learning design theory, ideas, tips, quick fixes to turn your project from blah into bravo. You can apply this to both print and web which is really helpful especially in doing layouts and placing elements.

Price:

  • Print Course: $49.00

Free Video Tutorials

Here is a list of helpful free premium-like videos tutorials that can help you learn how to design everything from UI elements and layout to effects, backgrounds and more.

Background and Effects

Here you will learn how to create Pattern and lighting techniques that can be applied to the background for a website or other graphic elements needed for banners or ads.

Beautiful Lady with Flowing Light Effects

Textures and Patterns

You definitely must know how to create patterns. In this Photoshop tutorial you will learn how to create texture patterns. This saves your website loading time by just repeating the original pattern using CSS.

Create Custom Shadows

Creating shadows is great, especially if you want to make an element to capture your viewers attention. In this tutorial you will learn how to create different shadows.

Fancy Dimple Background

Linen Texture

Wood Texture

Logos and Icons

Here you can learn various techniques on how to create logos and icons. I also included a time lapse video to show you a quick overview process on how the spotlight icon was created from scratch.

Cloud Icon

If you’re making a 3D icon this tutorial will help you turn you 2d logo into a superb sexy with light effects icon.

Hand-Stitched Social Media Icons

Stiched is designed buttons or icons is very nice to look specially when you crafted it pixel perfect that will turn you simple social icon into a WOW!

Vibrant Color Ring

Most of corporate agencies logo have this type of logo that has 3-4 different colors but it still blends well. So in this tutorial you will learn what is the process of creating those.

How to design a logo fast

Having trouble in designing a logo? Here is a great tip on how to design logo fast in 3 different ways.

Spotlight Icon

Getting bored in long detailed tutorial? In this time lapse video you will see the process on how he created a stunning spotlight icon from scratch.

UI Elements

I’m pretty sure this video ui tutorials will really help you boost up your creativity in creating some UI elements like buttons, navigation, search bar, login box and much more, which is very useful in designing a website.

Glazed arched Menu

This tutorial will help you understand how to play with blend modes to turn a simple navigation menu into a superb glazed areched menu.

Shiny Glassy Buttonv

What you have learn in above tutorial can still be applied here in creating Glassy Button effect.

Login Box

A great tutorial guide on how to create a 3d looking login form with the help of shadow and that curved lock icon on top right side.

Creating a Knob in Photoshop

Volume Control

A great way to learn how to create a volume control & knob to apply it in your music instrument app.

Coming Soon Timer

This tutorial will guide you on how to create a countdown timer. You can apply this if your portfolio is on progress and the launch date will be on that designated time.

Loading Circle Animation

A great Photoshop tutorial on how to design a pre-loader and animate it.

Create Slick Web Tags

Turn your ordinary tags into a trendy looking one.

Sleek Calendar Photoshop Tutorial

If you have an old looking or default calendar in your sidebar it’s time to turn it into a eye catching gorgeous calendar.

Minimal Loading Bar

A cute way to turn you loading/progress bar into a nice looking striped bar.

Search Bar

This will give you an idea how to create a great search form.

Chat Bubbles

You will learn how to create cute and glossy chat bubble that can be used also in Testimonials section.

Mp3 Player

Love of Music? Here is a great tutorial on how to create a simple Mp3 player yet very catchy with that shiny cover.

Countdown Timer

Here is another Countdown Timer gorgeous dark with shiny string holding the fold.

3D Button

This effect is great for Call to action buttons.

Facebook and Twitter Buttons

A well designed social media buttons to trigger the viewers to click that social media buttons to gain more followers.

Web Layout

Here you will learn to create website layout and structure it in a proper way like were to place header, banner, sidebar, content and footer.

Website Layout Tutorial

Here is a simple tutorial on how to create a dark toned website you will learn how to apply patterns, highlights, shadows and more.

Web Design Tutorial Part 1

Web Design Tutorial Part 2

Another great tutorial on how to create a fresh looking website from scratch to finish.

Basic Photoshop: Designing a website

Lifehacker shows how to create a website from scratch, gathering what are the important elements and placing it into Photoshop and giving it a try and try until it came up with a great outcome.

I have another option for you. Are you one of those individuals who really want to learn but you can’t afford the monthly membership? well that is not the problem 1stwebdesigner is here to help you. It’s your chance to learn and become a web designer for free.

Basic Web Design Video Course

In this course I will walk you through the very basic steps on what to do and what to learn before, and during, building a website.

You’ll learn all the steps I use including:

  • Planning
  • Wireframing
  • Using basic tools and panels in Photoshop
  • Designing Simple Blog Page
  • HTML
  • CSS

The Course:

Part 1

  • Planning and Wireframng – 13:19
  • Phothsop Basic Tools and Panels – 12:51
  • Designing In Photoshop – 36:36

Part 2

  • Preparation – 09:15
  • HTML Basic Tags and Structure – 20:38
  • Basic CSS Properties – 18:54

Part 3

  • Complete HTML Markup – 23:17
  • Applying CSS Styles Part 1 – 23:05
  • Applying CSS Styles Part 2 – 25:28

That’s it! I hope the course will help you out specially for those individuals who are just started. As we know we individuals are different some can’t learn from their own and some can learn by them self. But I think the best way is to push hard and learn one step at a time and by that I’m sure that you will become the career you’re dreaming about. Cheers!

July 31 2012

13:00

Create a Charity Website Layout in Photoshop

In this tutorial we will be creating a minimal, yet very elegant, layout in Adobe Photoshop. The main purpose of the template will be for charity and NGOs who needs a specific kind of design, with more call-to-action buttons which would increase the number of contributions to their charity/organization.


This tutorial is an exception because you will not be getting the final PSD file for download, because this page, along with the others is part of a template available for sale at ThemeForest. If you would like to grab the full template, which consists of 5 layered designs then you should click the final product image to be redirected to the ThemeForest item page.

Charity Website Final Product

Click for full resolution and other pages.

Note: this tutorial covers the home page of Charity, a PSD template for a full website that you can check out on ThemeForest if you want the whole package.

Step 1 

We will start our layout by creating a pretty large canvas in height. Set the width at 1020 pixels and the height at 1725 pixels. We will be working with a 960 Grid System. I recommend Nathan Smith’s 960 grid system, which you can grab for free, right here.

Step 2 

 

We’ll be adding a really subtle pattern so we won’t have to work on a white, plain canvas. The best source for free subtle patterns is SubtlePatterns.com, where you’ll find hundreds of awesome textures. Grab any light texture you think will be suitable, and apply it to our background, so it would cover all the canvas space. We don’t want it to be really visible that is why we will give it an opacity of 15 percent.

Leave 70 pixels in height (count from the beginning of the header) for our navigation, and then create a gray shape, which is 500 pixels in height and will be the base for our slider section.

Step 3 

Fill the space we left blank with a dark-gray, almost black color: #272727.

For this layout, i chose 2 font families. Helvetica in Regular and Bold and League Gothic are the fonts we will be using. If you do not have Helvetica, you can always use Arial, which is pre-installed on windows computers, and barely differs from Helvetica Neue. The font for our logotype is Coffee Script Italic, 36pt. The font for navigation is Helvetica Neue Bold, 12pt. The color used for the font and navigation text is white. We’ll add an almost visible black slash sign, between each navigation link.

Step 4

At the right side of the navigation we will place 2 small “Call to Action” buttons. By using the Rounded Rectangle Tool (U) create an orange-colored shape (#e26424). Apply a soft light gradient overlay effect, with an opacity of 30 percent.

Step 5

We continue our button by adding an inner shadow effect, the blend mode being soft light as well, and the opacity: 75%.

Step 6

One more touch for our button will be a drop shadow effect. Set the size to 2 pixels, the distance to 1px and give it a gray color: #a3a3a3.

Step 7

Finish the button by applying a gradient stroke effect. Start with a very dark red (#491803) and finish with a brighter one (#8a2800)

Step 8

Grab the IconSweets2 free icon set, and grab the “cloud-download” icon and then input some random text near the icon.

Step 9

Result So Far:

Repeat the same exact steps, the only exception is the color of the button base shape, which is now a dark-gray:  (#4d4d4d).

Step 10

Grab the Rounded Rectangle Tool (U) and create a shape of about 340 pixels in height, and 700 pixels in width. Give it the usual dark-gray color: #282828.

Step 11

The rounded corners shape looks plain and too simple, that is why we will be adding a nice ribbon to it. Creating a ribbon similar to the one you can see on the screenshot above is pretty easy, but we will not cover it’s creation as it is beyond the scope of our main tutorial. Webdesign.Tutsplus have published a very good and detailed tutorial on how to create such a ribbon.

Use the Helvetica Neue Bold font in 14pt and add some random text. Find the “globe” icon in the IconSweets2 icon set, give it a gray color, and place it near the left border.

Step 12

Grab any image or picture of 430 pixels in width and 240 px in height. I personally prefer Flickr for images licensed under the Creative Commons licence.  We will write some text near the image, by using League Gothic (24pt) and Helvetica Neue Regular (12pt). Copy the orange button we created in the header, remove the icon and change the text to “Read More” and align it with the text.

Step 13

By using the League Gothic font (72pt), input some text. In my case, it’s a donation-related message. The color of the font must be #272727 and give it a white drop shadow effect.

Step 14

Create 3 rectangles.  Let them be 250×150 pixels and position them accordingly. By using a nice orange color (#dc561d) and the rectangle tool create a simple bar which would connect those 3 boxes. Use the same color to create three vertical bars with triangles, which would cover the left part of boxes.

Step 15

Now start inputting text in the boxes. First box would have some simple text in it. The second would contain a list of items. By using the Elipse Tool (U), create a few dark circles and apply the Gradient Overlay effect you see in the image.

Step 16

Find any payment icon set you would like and grab 4 random icons and place them in the bottom part of the box.

Step 17

Take the Rounded Rectangle Tool (U) and create a shape. Apply a Gradient Overlay effect with an opacity of 20 percent. Give it the same inner shadow and drop shadow effects we have applied to other buttons during the creation of this layout.

Step 18

Grab the “finance” icon from the IconSweets 2 set and then input some text. I used Helvetica in two weights(bold/regular) and 2 sizes (18/12px). Apply the drop shadow effect you see on the image.

Step 19

Create 2 buttons and position them under the second box. By this time, you will be able to create them on your own. If not, refer to previous steps.

Result so Far:

Step 20

We move on to creating another section. It will be really simple and basic. Will consist of a text block, one image and a button. By using the “League Gothic” font, 36px, input “Browse All Charities” and center it.

Step 21

Use the Elipse Tool (U) to create an orange circle. Apply a stroke effect with a darker orange color. Use “League Gothic” to input the date.

Step 22

Duplicate the circle two times so you would get “3 upcoming events”. Use Helvetica to input event names and locations.

Step 23

Grab the “pin” and the “phone” icon from the IconSweets set and give them a really nice, subtle gray color. We’ll be creating four small widgets. For the first two, we’ll be using Helvetica (uppercase/lowercase) of 14 and 12 pixels accordingly.

Step 24

Use the Rounded Rectangle Tool (U) to create a white shape. Apply a gray stroke (#c6c6c6) and then take and cut a screenshot of any google maps location. Place it accordingly.

Step 25

The last thing would be a “box” with social icons. By using the Elipse Tool (U) create 6 equal circles. Five of them must be gray, #c6c6c6 will work perfectly. One circle must be orange, it will represent the “hover/clicked” state.  Finish it by adding a gray button (refer to previous steps for details).

Result so Far:

Step 26

Let’s finish our layout by adding a “footer bar”. It’s nothing complicated. Just a simple, dark gray (#272727) bar which is supposed to contain some copyright information or something similar.

July 18 2012

13:00

Create a Pricing Table using Photoshop in about 20 Minutes

We are used to presenting data using different graphics, modules and tables so that the information is easier to understand. Pricing tables have been, and still are, used by a lot of companies and individuals to display their available plans. It’s pointless to use a pricing table if you only have one plan to offer. But if you have more, then it is a very useful and attractive way of displaying information about each of your plans. We’ll be using Adobe Photoshop to create a pricing table which will only take about 20-30 minutes.

Are you ready?

Pricing Table

Step 1

Create a new 1200x600px document. Our pricing list itself will be 1000x340px but we need some work space that’s why our main document is larger.

Step 2

By using the Rounded Rectangle Tool (U), create a shape of 1000x340px. Apply a barely visible outer glow effect as well as a 1px stroke. Set the stroke color a little bit darker than the color of our shape.

Step 3

We’ll divide our pricing table into 3 sections. The “header”, the “content” and the “CTA” zone.  Our “header” section will only contain the name of the plan. By using the Rectangle Tool (U), create a shape that is 1000pixels wide and 70px high. Give it a dark gray color (#e0e3e3) and apply some Drop Shadow to achieve the effect we would get by applying “Outer Glow”, the only exception is that we can set a direction (by changing the angle).

Step 4

Our Pricing Table will contain 4 plans which you can sign up for. It is a common thing to highlight one of the plans, and mark it as the “Best Deal” or something similar. Use the Rounded Rectangle Tool (U) and create a shape of 250x290px. Your shape must have the same effects applied as our base layer.

Step 5

Repeat the third step, the only exception would be the header. Give it a darker gray color (#d1d1d1).

Step 6

In our pricing plan, we will be using 2 fonts, “Open Sans” and “Helvetica”. Use the Semibold weight of “Open Sans” for the plan names in the “header” section of our table.

Step 7

Use “Helvetica” for the price of each plan. As we want to highlight our “Advanced” plan, we will make the price tag a brighter red.

Step 8

We move on to the “content” section. It will consist of 3 features that you are going to provide your customers. It has a pretty simple structure. We’ll be using “Open Sans” as our font. The numbers are 24pt Bold. The text is 14pt Regular. Each feature is divided by a “dotted line”, but can be easily changed with a simple line.

Step 9

Each plan must have a CTA Button which would allow customers to take an action. Whether it will allow them to find out more, or proceed to pay, the button must be there. By using the Rounded Rectangle Tool (U), create a gray shape and apply a dark gray Drop Shadow effect.

Step 10

Apply the Gradient Overlay effect with the Blend Mode set as Soft Light, and the Opacity: 40%.

Step 11

Finish the button by adding a Gradient type of Stroke.

Step 12

By using “Open Sans Bold”, 24pt, input some text on the button. “Choose Plan” looks good to me. Now duplicate the “content” and “CTA”  sections twice that we have just created and place them accordingly. Refer to the final version if you feel a little bit confused.

Step 13

The “Advanced” plan does not differ much except the brighter price tag and the CTA button. The red button is pretty similar to the gray one, the only exceptions are its base color which is: #ed161c and the stroke colors which you can see below.

Step 14

Change the stroke colors from the gray ones to the following red ones and finish the button.

Final Result


Want To Check Details Yourself? – Download PSD


What do you think about this tutorial? Share your thoughts!

April 16 2012

07:00

Build a Basic Dribbble Fed Portfolio Website (Part 1/2)

Follow this step by step tutorial to create a simple single page portfolio website design that will self-update using shots from your Dribbble profile. In this first of the two part series we’ll go through the process of designing the website concept in Photoshop, before coding up the HTML and CSS next week.

Simple portfolio website design

The portfolio design we’ll be creating is a single page design and features the very basics of a design portfolio website: A logo, an intro, the showcase of work, an about me paragraph and a contact form.

Create a new document in Adobe Photoshop. I like to give myself a large canvas to work with that resembles a large monitor resolution. 1680x2000px will provide enough space to visually build our design as it will appear on screen.

Fill the background with a warm grey tone such as #f1f0ed. Using subtle tones as opposed to black on white will help avoid any contrast clashes.

Use the Noise filter (Filter > Noise > Add Noise) to add a subtle texture to the background to give the site a warmer, more tactile feel.

Draw an 820px selection in the centre of the document and use guides to highlight the centre and edges of this main content area.

Fill a circular marquee selection with a dark grey and add your initials in a font of your choice to create a simple logo.

Right click and select Rasterize Type on the initials layer then CMD+Click the thumbnail of the background circle layer to load its selection. Inverse the selection and hit delete to remove any overlap beyond the edges of the logo.

Dab a spot of a soft black brush, then hit CMD+T to transform the shape. Squash it down so it can be used as a shadow under the logo. Move it into place and reduce the opacity to suit.

Begin writing out a short introduction to your portfolio website. In the coded version we can use Google Web Fonts to make use of the @font-face CSS3 property, which will allow us to use a cool font for the body text. Here I’m using a downloaded version of Droid Serif to mock up the text in Photoshop to gain a feel for the text sizes.

Change the colour of text that will appear as a link and add the underline effect to simulate a clickable element. Planning these features now will make it easy to just copy and paste the hex colour values into the CSS stylesheet.

This portfolio will be self-updating using your shots from Dribbble, so begin copying and pasting the design thumbnails from your profile and align them accordingly in the Photoshop document. Hold Shift while pressing the cursor keys to nudge the element by 10px increments.

Add a Drop Shadow effect to the portfolio designs to lift them from the page. Effects like this that were once only achievable in Photoshop can now be replicated with the CSS3 box-shadow property.

Make a copy of the intro text and adjust the wording to create a brief About Me section under the portfolio elements. Maintain the same font hierarchy and link styling.

Finish off the design with a Contact section at the bottom. Use copies of the existing text to mock up the wording and form labels, then draw a rectangular selection as a base for the input fields.

Open up the Layer Styles window and add a subtle Inner Shadow to give the illusion that the field is inset, then add an off-white Color Overlay to reduce the contrast between the field and the background slightly. Then finally add a #dedede 1px stroke to define the border of the input field.

Duplicate the form field and move it into place as the second input and a textarea element. The great thing about layer styles is they can be scaled to any size without being distorted.

Add a darker grey rectangle the represent the send button. Give this element a quick noise filter to match the texture of the background.

Use the same font styling to add the Send label, except change the colour fill to white, then finish off the button with a subtle drop shadow to help the element stand out.

Simple portfolio website design

This leaves our basic portfolio concept complete ready for part two, where we’ll export the few images we need from the Photoshop document then replicate this design with HTML and CSS before adding the simple code to pull in our Dribbble shots.

November 23 2011

21:00

Snickles: Create A Modern Business Template In Adobe Photoshop

Good day! Today we will be designing a modern business template in Adobe Photoshop.. This template will contain a header, slide show, service area, video, about us, testimonials, and footer. What you will be learning from this tutorial are how to achieve that 3D looking interface in just a few simple steps, creating patterns, combining textures, colors, alignments and many more. So get ready and let’s get started!

Here is what we will be making, click on the image for full preview:

Resources for this tutorial

Step 1: Setting up the Document

Start by creating a 1400px x 1700px document in Photoshop.

Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.

  • Rulers: Ctrl + R
  • Guides: Ctrl + ;

Also one thing important in using Ruler Tool is the Info(Information) Panel. The use of this is when you are measuring using the ruler the information will be shown in the information panel. Make sure that this is shown in your panels at the right. If it is not shown you can access this by going to Windows – Info.

The total width of this site will be 960px. So, let’s create our 1st guide by going to View – New Guide, set the value to 220px. Repeat the step of create a guide but now change the value to 1180px, this will make a total of 960px to the center of our canvas.

Step 2: Working on Base Background for Header and Slider

What we’re trying to achieve here is a 3D like surface to hold our slider preview and on top of it will be our logo, navigation and RSS feed.

To start using Rectangle Tool(U) create a 100% by 960px shape, color #092f56. Next, using Ruler Tool(I) measure 140px staring from the bottom of the shape towards top and drag a guide from the ruler.

Next add a 1px line, color #062340 just 1px above the guide.

Using Rectangular Marquee Tool(M) create a selection as shown in the screen shot below. Set the Foreground color to #000 and select Linear Gradient Foreground to Transparent then, fill the selection with it. Once you have fill it set the Blend Mode to Multiply, Opacity to 30%.

Select Rectangle Tool(U) and create a 100% by 45px shape. Place it as shown in the screenshot below.

Apply this Blending Option

  • Dorp Shadow: #000

  • Inner Shadow: #0f3b69

  • Gradient Overlay: #051f3a, #082c50

  • Stroke: #06213a

Result

Next you need to extract the paper texture that you have downloaded. Select Paper 9 and place it into our canvas as shown in the screenshot below.

Set the Blend Mode to Multiply and Opacity to 30%. Later on when we finished putting all the content for header and slider we will be adding highlights to our base background.

Step 3: Working on Header

Our header will contain Logo, Navigation and RSS Feed.

Logo

I used a font called Snickles you can get it on Font Squirrel. Now type in your website name using the font settings below.

Font Settings

  • Font Name: Snickles
  • Weight: Normal
  • Size: 60pt

Apply this Blending Option

  • Drop Shadow: #000

  • Inner Shadow: #fff

  • Gradient Overlay: #c0c0c0, #ffffff

Result

Navigation

Using Rounded Rectangle Tool(U) set the Radius to 20px. Create a 580px by 50px shape as shown in the screenshot below.

Apply this Blending Option

  • Dorp Shadow: #000

  • Inner Shadow: #fff

  • Gradient Overlay: #fea201, #fccf6a

Result

Using Text Tool(T) add site links Home, Blog, About Us, Free Consultation and Contact Us. Distance with each links will be 41px so go ahead and measure it with Ruler Tool(I)

Font Settings

  • Font Name: Helvetica Neue
  • Weight: Roman
  • Size: 12pt
  • Color: #fff, #ac5b00

Duplicate the text and exclude the Home link in a separate text layer. Place it under the original text layer and move it 1px above using arrow up key and lastly change the color to #d38904. For the other links place it below the original text layer and move it 1px below and change the color to #ffe91e. You may now have an embossed looking links.

We will be adding dividers. Using Line Tool(U) with a fill color #fee79e create a 1px line and place it as shown in the screenshot below.

Below all the text layers create a 70px by 30px shape, color #ee9e0d using Rounded Rectangle Tool(U) and place it as shown in the screenshot below.

Apply this Blending Option

  • Dorp Shadow: #fff

  • Inner Shadow: #000

Result

RSS Feed

Download RSS button from the resource and place it as shown in the screenshot below and add a text using Text Tool(T)

Font Settings

  • Font Name: Arial
  • Weight: Regular
  • Size: 12pt
  • Color: #fff

Apply this Blending Option

  • Dorp Shadow: #000

  • Inner Shadow: #fff

  • Gradient Overlay: #f38600, #fed676

Result

Step 4: Working on Slider

Our slider will contain text title & description, button and a browser display.

Text Title & Description

Using Text Tool(T) place a dummy text using the text format provided below.

Title

  • Font Name: Helvetica Neue
  • Weight: Condensed
  • Size: 24pt
  • Color: #fff

Description

  • Font Name: Arial
  • Weight: Regular
  • Size: 12pt
  • Color: #dddddd

Button

Using Rounded Rectangle Tool(U) create a 150px by 35px shape.

Apply this Blending Option

  • Dorp Shadow: #000

  • Inner Shadow: #fff

  • Gradient Overlay: #f38600, #fed676

Result

Label it with View Details using Text Tool(T)

Description

  • Font Name: Helvetica Neue
  • Weight: Roman
  • Size: 14pt
  • Color: #fff, #02b0f3

Result

Display

First using Rectangle Tool create a 450px by 250px shape.

Select Rounded Rectangle Tool(U), set the Radius to 5px. Create a 450px by 20px and fill the rounded corners in the bottom.

Apply this Blending Option

  • Drop Shadow: #404040

  • Inner Shadow: #fff

  • Gradient Overlay: #f38600, #fed676

Result

Open up the web ui elements. Cut out the buttons and resize it to fit to the shape that we have created. Refer to the screenshot below.

Next create a new layer below the white shape we have created. Select Elliptical Marquee Tool(M) and create a selection as shown in the screenshot then fill it with #000. Go to Filter – Blur – Gaussian Blur – 2 and change the layer Opacity to 50%

Controls

Using Ellipse Tool(U) create a 14px by 14px shape. Place it on the center as shown in the screenshot below.

1st Shape

  • Drop Shadow: #000

  • Inner Shadow: #fff

  • Gradient Overlay: #03b8ff, #89e3fe

2nd & 3rd Shape

  • Dorp Shadow: #fff

  • Inner Shadow: #000

  • Color Overlay: #051f3a

Result

Highlights

Select Dodge Tool(O) set Exposure to 10%, also set the Dodge size to 200px.

Duplicate the base layer shape and rasterize it. Using Dodge Tool(O) lighten up the area as shown in the screenshot below.

Result

Step 5: Working on Consult Area

To create a pattern create a new 15px by 15px transparent document. Using Pencil Tool(B) create a pattern the same on the screenshot below.

Go to Edit – Define Pattern, name it zigzag. Now, create a 100% by 150px shape using Rectangle Tool(U). Select Paint Bucket Tool(G) and change Foreground to Pattern from the dropdown list. Create a selection at the very bottom of the shape and fill it with pattern that we made.

Apply this Blending Option

  • Drop Shadow: #bfbfbf

  • Gradient Overlay: #f5f4f4, #fdfdfd

Result

Using Text Tool(T) add a dummy text.

Font Settings

  • Font Name: Helvetica Neue
  • Weight: Light Condensed
  • Size: 20pt
  • Color: #444444

Button

Create a 210px by 50px shape using Rounded Rectangle Tool(U), apply the same Gradient Overlay and Inner Shadow.

Apply this Blending Option

  • Stroke: #cf8606

Label it with CONSULT NOW using Text Tool(T).

Font Settings

  • Font Name: Helvetica Neue
  • Weight: Roman
  • Size: 18pt
  • Color: #fff, #cf8606

Result

Step 6: Working on Services

Service area is divided into 4 columns. Each column has a size of 210px by 125px. The distance of each column will be 40px. Create this guide by measuring using Ruler Tool(I).

Open up the icons set that you have downloaded from the resource and place it as shown in the screen shot below. Next label each Icon using Text Tool(T).

Font Settings

  • Font Name: Helvetica Neue
  • Weight: Condensed
  • Size: 18pt
  • Color: #444444

Using Line Tool(U) color #bfbfbf, #f8f8f create lines as shown in the screenshot below.

Once you are done, merge all the line shape and mask it by clicking the mask icon from the layers panel. Using Brush Tool paint every edges of the line. You should have similar to the screenshot below.

Step 7: Working on Video Tour

Using Text Tool(T) add a header text.

Font Settings

  • Font Name: Helvetica Neue
  • Weight: Condensed
  • Size: 22pt
  • Color: #444444

Using Rectangle Tool(U) create a 460px by 255px shape, color #dddddd.

Apply this Blending Option

  • Outer Glow: #bfbfbf

  • Stroke: #fff

Place some sample play button at the center of the shape.

Result

Step 8: Working on About Us and Testimonials

Header font is the same, for the paragraph use the font settings below.

Font Settings

  • Font Name: Arial
  • Weight: Regular
  • Size: 12pt
  • Color: #444444

For the thumbnail in the testimonials area create a shape 70px by 70px and apply the same blending option as we did in our video tour. Change the stroke size to 3px. For the quotation follow the font settings below.

Font Settings

  • Font Name: Arial
  • Weight: Regular
  • Size: 215pt
  • Color: #dad9d9

Result

Step 9: Working on Footer

Our footer will contain Quick Links, Latest Posts, Latest Tweets, We Socialize, and Copyright. The width of this will be the same to our 4 columns as we did in the services area.

To start let’s create the base background first. At the very bottom of the canvas create a 100% by 45px shape, color #04203b using Rectangle Tool(U). On top of it create another shape size 100% by 450px shape, color #052342. Duplicate the paper texture we made on our header and slideshow area then place it below to our footer.

Quick Links

The header title will be place 30px below the shape. Each link will have a distance of 15px from the dividers. Divider color will be #265686

Header

  • Font Name: Helvetica Neue
  • Weight: Condensed
  • Size: 18pt
  • Color: #fff

Links

  • Font Name: Arial
  • Weight: Regular
  • Size: 12pt
  • Color: #fff

Latest Posts

For the latest post still the same text format as we did in Quick links.

Date

  • Font Name: Arial
  • Weight: Regular
  • Size: 11pt
  • Color: #8496a9

Latest Tweets

Text

  • Font Name: Arial
  • Weight: Regular
  • Size: 12pt
  • Color: #8496a9

Link

  • Font Name: Arial
  • Weight: Regular
  • Size: 12pt
  • Color: #fcc757

We Socialize

Place the Icons you have downloaded from the resource accordingly as shown in the screenshot above.

Apply this Blending Option

  • Drop Shadow: #000

  • Inner Shadow: #fff

  • Gradient Overlay: #03b8ff, #89e3fe

Copyright

Here is our Final Result!


PSD Download

I hope you enjoyed and learned something from this tutorial. Don’t forget to comment, share and subscribe. Thank you! :)

October 24 2011

07:00

Create a Typography Based Blog Design in Photoshop

The tutorial posts where I go through the process of creating a complete WordPress theme from Photoshop concept right through to coding the template files always go down well, so let’s start with another tutorial series based on my latest WordPress theme design. Follow this tutorial where we’ll lay out a typography based blog design over a strict underlying grid, then stay tuned for the next tutorials where we’ll build the concept into a HTML5 prototype then finish it off as a fully working WordPress theme.

Typo WordPress Theme design

The WordPress theme we’ll be creating this time is called Typo. It’s a design that’s entirely based on typography to allow the content to shine. To allow the design to work without the use of any graphical interface elements it will be based on a strict grid to balance the design and tie everything together.

View the Typo WordPress theme concept

Before getting started with our design we need to set up a grid system in our Photoshop document. I have a ready made grid document using 12 columns from the handy generator at grid.mindplay.dk. I also created a pattern overlay to lay out a 24px baseline grid.

Fill the background layer of the Photoshop document with a light grey, then add a couple of percent of Noise (Filter > Noise > Add Noise). Change the settings to Gaussian and Monochromatic.

Save one of the handy seamless paper texture files from LostandTaken and open it up into the website design document. Position it in the top left corner.

Desaturate the texture, change the blending mode to Darken then adjust the levels to brighten up the image to match the lighter grey background, allowing the details of the texture to add to the noise of the background.

This design is going to be entirely made up of typographic elements, including the logo. We’ll be using Google Web Fonts later in the series so for now we can mock up the layout using the chosen typeface, which in this case is Droid Serif.

Lay out the navigation links according to the grid columns and baseline. Number each link for a touch of style, then adjust the colour of the number so it’s not as prominent.

Leave plenty of white space before moving onto the main content. The heading of the blog post is an important element so choose a larger font size.

Drag a text box to create a passage of dummy text. 14pt makes for a comfortable size for body text, with 24pt leading to match the baseline.

Any links in the document should be easily identified, so mock these up with a blue fill, italic styling and an underline.

Group all the items that make up the first sample blog post, then duplicate the group and align the post underneath the original leaving a few lines of white space between them.

At the bottom of the document add a couple of links to previous and next pages. Use the same link styling but increase the size to give these elements more prominence.

Begin adding the sidebar content in line with the main content using the same baseline grid lines. The sidebar headers aren’t as important, so a smaller font size can be used to continue the hierarchy of the page elements.

Some lists of links can be doubled up next to each other while adhering to the grid layout, while others will span over multiple columns.

Fill a rectangle to create a search box element. The search feature is one of the only elements where styling beyond the basic typography is required to make it easily recognisable.

Double click the search box layer to add some Layer Styles. Add a subtle Inner Shadow, a light grey Color Overlay and a thin 1px grey stroke.

Align the label text inside the search box with the baseline grid. This will imbalance the vertical margins so we’ll have to break the grid to cut the search box down to size for the spacing to match.

To the right of the search bar add a stroke to a small circle to create a magnifying glass icon. Finish it off with a 5px diagonal line to represent the handle.

When viewed without the baseline grid the search bar looks perfectly balanced. Elements like buttons and search bars often need sizing outside of the grid to allow the enclosed text to remain on the grid lines and still appear balanced.

Finish off the page with a black border along the bottom edge. Fill a selection that matches the height of two baseline grid lines. Change the blending mode to Overlay.

Add some small elements to the footer area to finish off the overall page design.

Despite only using typographic elements without any kind of interface or images the page still appears interesting and inviting thanks to the baseline grid that ties everything together.

Typo WordPress Theme design

Without the gridlines the page elements balance nicely to give a well laid out design with plenty of white space around each section. The hierarchy of the titles and headings help draw the users eye to the most important information, while the blue links immediately show what’s clickable.

View the Typo WordPress theme concept

October 10 2011

07:00

How To Create Repeating Texture & Pattern Images

Repeating background images are safest method of styling up your website background other than a plain old CSS background color. Websites are viewed in all types and sizes of browser these days, so a repeating background ensures the whole of the user’s screen will be filled with your design, unlike a static image that can often end up being cropped off or lost in a sea of flat colour. Let’s take a look at how seamless or repeating textures and patterns can be created in Photoshop.

Creating seamless textures

Anyone who’s followed any of my tutorials or seen my work before will know how much I love using textures in my design work. Textures really help add a tactile feel to an otherwise flat and digital design. Open up a texture file and crop it in Photoshop to exclude any marks that would stand out when repeated.

Go to Filter > Other > Offset then enter a figure in the Horizontal and Vertical fields that’s half the dimensions of your image. My texture file is 800x800px, so I enter 400px in the fields.

The offset filter will show obvious lines where the file is repeated, but these can be blended in using the Healing Brush. Hold ALT while selecting a sample area, then draw over the lines with a soft brush. Photoshop will disguise the hard lines to blend the four corners together.

Give the new file a test in a new document by duplicating and butting up the copies against each other. You should be left with a seamless file that doesn’t leave any obvious gaps.

Creating repeating patterns

Repeating pattern files are also a popular choice for website backgrounds. Patterns come in all shapes and designs, from vintage wallpaper to simple stripes like these. Whatever pattern you’re creating the same simple steps apply.

Zoom in and pick a focal point on the design, in this case it’s a point in the design where the pink line changes to yellow. Drag out a marquee until you reach the same point elsewhere on the design.

Crop the image to size then make duplicates to check whether the file tessellates and creates a seamless pattern.

Creating pixel patterns

Pixel patterns have been popular in web design since the early days of Photoshop designed table layouts. They really help add subtle detail to your website background or page elements. Create a new document at 3x3px.

Zoom as far into the document as possible, then use the Pencil tool to fill three pixels to create a diagonal line.

When this pattern file is applied to an element at normal zoom it creates an intricate diagonal line pattern. Check out my pack of free pixel patterns, containing similar diagonal lines amongst other pattern swatches.

August 22 2011

07:00

How To Create a Blog Theme Concept in Photoshop

In the next few tutorials posts we’re going to go through the process of building a WordPress theme, starting today with the initial design concept in Photoshop. Follow this step by step walkthrough of the creation of the design concept for my Ticket Stub theme, which is based on a movie review type blog. We’ll create a full page design ready for coding up into a fully working website.

The theme we’ll be building over the next couple of posts is named Ticket Stub. It’s a clean and simple blog layout that’s set up as a movie review blog, but is generic enough to be used for any kind of website.

View the large scale blog theme concept

We’ll start by creating the background texture tile. Open up Photoshop and add a spot from a subtle grunge brush in the centre of the document.

Grab the rectangular marquee tool and draw a square selection somewhere in the centre. Invert the selection and delete out the excess. It’s trial and error to find a section that repeats without any obvious edges.

Reduce the opacity of the texture to around 30%, then see if it repeats correctly by duplicating the square to cover a larger area. Use the Clone tool to delete any unwanted particles in the original file.

With the original texture file selected go to Edit > Define Patterns to save the swatch. Fill the background of your web design file with this newly created pattern file.

Outline a 960px centre area in the document and fill it with white. I use the marquee tool by right clicking a selection and choosing Transform Selection. In the top bar you can then enter specific dimensions.

Add a very subtle Drop Shadow effect to the content rectangle. I’m using settings of 6% opacity, 0 distance, 0 spread and a size of 10px. Also give the layer a very fine 1px grey stroke to help define the edge.

The theme’s default logo can be added to the space in the header area. Fill a rectangle with a deep red.

Add a Gradient Overlay using the Overlay blending mode. Reduce the opacity in order to tone down the impact of the gradient to leave a subtle change of colour.

Add a 1px Stroke using a darker shade of red, then add an Inner Glow effect using a lighter shade. Adjust the options so the Inner Glow has a normal blending mode, 100% choke and 1px size.

Use the subtle grunge brushes to add a textured overlay to the logo using both light and dark red tones.

Add a spot of text to the logo. Here I’m using the American Typewriter font, with size and tracking adjustments on the word ‘Stub’.

Paste in a couple of star graphics from Illustrator and add a subtle drop shadow to the text to finish off the logo with a retro style cinema ticket stub appearance.

Add a couple of icons to the upper right area of the header for RSS and Twitter links. All text will be set in Helvetica in this design, while a deep red has been selected as the global link colour.

Use a guide to highlight a margin from the edge of the content area, then begin fleshing out a sample blog post with header and post image. Set the header to uppercase to help add typographic emphasis to these elements.

Generic dummy text can be used to represent the introductory content for the post. Set up the font at a legible 14px with a generous line height of around 24px to help with readability. Black on white would be way too contrasting, so a mid to light grey is selected for the body text.

Blog posts also have snippets of information that are displayed with every post. These can be included in their own panel. Draw a grey rectangle across the width of the column and add a 1px stroke of the same colour.

Set up an Inner Glow effect using the Normal blending mode, white, 100% choke and 1px in size to create a double border effect.

Use the same body copy text styling to add the date, category information and read more link for this sample post. Don’t forget to highlight links in the red link colour.

The date and category can be grouped together, separated by a little star graphic, while the read more link works well aligned to the right to suggest that it leads further.

Group all the elements that make up a sample post, then make a duplicate and position it underneath. Adjust the title to something much longer to plan how a longer sentence would wrap.

Use the same panel styling used in the post excerpts to create button elements for the older and newer post links.

The same button styling can be used in the sidebar to allow for more prominent links to the blog pages and categories. Align the text to the right in these elements.

Create a search bar using a finely outlined rectangle, then replicate the style of the icons in the header with a grey circle.

Use an Elliptical marquee as the base for a magnifying glass icon. Right click and select stroke to give the selection a 2px white outline, then finish off the icon with a handle using the Line tool.

It’s important to provide consistency throughout any design, using the same link colour, button styling and similar icon designs.

A short About excerpt in the sidebar helps fill out the empty space and provides another link through to other areas of the website.

The sidebar currently blends into the content area a little too much. Draw a light grey rectangle down the right side of the design to enclose all the sidebar elements. This helps the content with its brighter white background stand out with more prominence alongside the slightly darker grey.

Finish off the design with a back to top link, again creating a little icon based on the same style as those in the header.

This leaves our concept for our blog theme homepage complete. Next time we’ll begin chopping up the design and creating it as a coded webpage with HTML and CSS.

View the large scale blog theme concept

July 04 2011

07:00

How To Create a Vibrant Radar Icon in Photoshop

Get to grips with Photoshop’s various tools to create a detailed and vibrant radar icon. We’ll build the icon over multiple layers with the help of gradients, brushes and layer style effects. The final icon would look great in your dock as a Mac application or used to create an icon for your iPhone app.

Radar icon

The icon we’ll be creating features a typical green radar with a vibrant illuminated screen. Subtle gradients help add depth to the icon while the scanlines pattern and soft glows on the screen elements really help add a touch of realism.

View the final radar icon

Create a new Photoshop document and fill the background with black. As for sizing, create the design at the largest your icon will ever need to be. Fill a white circle in the centre, then right-click and select Transform Selection. Scale down the selection while holding Shift and ALT. Press Enter then delete out this centre portion to leave a thin ring.

Double click the ring’s layer in the layers palette to open up the layer styles. Add a Gradient Overlay flowing from dark to light green, then add a soft white Inner Glow.

Next, change the settings of the Outer Glow effect to add a black shadow around the ring. It won’t be visible yet, but it will help add depth to the radar screen later.

Draw a circular selection within the area of the outer ring, then fill a new layer underneath the ring with a green gradient. Choose colours from black to mid-green to a very light green and select the radial gradient option.

Create a new document at 2x3px. Zoom right in and select the Pencil tool. Draw a line across the top edge, then go to Edit > Define Pattern.

Draw another selection within the confines of the outer ring, then select the fill tool, change the drop down menu to Pattern and select the recently created pattern swatch. Change this layer to Overlay at 50%.

Use the Single Row and Single Column selection tools to draw horizontal and vertical lines over the document. To make sure they’re centred, press CMD+A to select all, then CMD+T to transform. You can then drag out guides from the side rulers (CMD+R) and snap them to the transformation handles.

Add a layer mask to the lines layer and fill it entirely with black to render everything invisible. Then use a large soft white brush to bring back the lines by clicking once in the centre.

Draw two circular selections aligned to the centre (Click+drag from the centre guides while holding ALT), then right click and select Stroke to give them a 1px white outline.

Use the Polygonal Lasso tool to draw a rough outline to contain the radar sweep. Pay close attention to the alignment to the centre. Add a blob of white with a large soft brush.

CMD-click the outer ring layer thumnail and add in an extra selection to surround and delete any unwanted excess from the radar sweep layer. Change this to Overlay to allow the colours to interact and produce a vibrant green effect.

Use the brush tool to dab spots on the radar, then give them an extra vibrant glow using the Outer Glow effect from the layer style window.

Radar icon

This leaves our cool little radar icon complete ready for exporting as a transparent PNG and putting to use as a fully working icon file in your favourite app, or as some kind of interface icon on your web app or web site.

April 04 2011

07:00

CSS Basics: How to Design & Code a Stylish Button

Some of my most popular articles and tutorials are those that cover the basics. In this post we’ll go through the process of designing a stylish button graphic in Photoshop, then build a complete working example in HTML and CSS. We’ll be looking at pseudo selectors in particular to create hover and active states for the button.

View the CSS button demo

The button we’ll be designing is built with lots of detail to create a semi-realistic three dimensional appearance. The button has three states – normal, hover and active. In the normal state the button is made entirely of blue, when hovered the text within the logo turns to purple, then when the button is clicked it moves to give visual feedback that relates to how a button would react in real life.

View the CSS button demo

The Photoshop concept

Open up Adobe Photoshop and create a new document. Fill the background with grey and add a white highlight to the centre using a soft brush. On a new layer draw a rounded rectangle with 10px corner radius.

Double click the layer to open up the Layer Styles window and add a Gradient Overlay. Enter the colours #0730a5 and #a4c9f3 then adjust the angle to 90 degrees.

Give the button an Inner Shadow to create more of a three dimensional appearance. Adjust the settings to 2px Distance and 9px Size using the colour #d9f7ff.

Add a thin 1px Stroke to the inside using the colour #8eb4f2 to give the button a fine outlining border.

Finally, use the Drop Shadow feature to add a fine 1px highlight on the bottom edge. Change the settings to Normal, 100% Opacity, 90 degrees, 1px Distance and 0px Size using the colour #4285bd;

Create a new layer underneath the current button and draw another rounded rectangle. Match the new rectangle to the top and sides but extend it slightly on the bottom edge.

Add a Gradient Overlay layer style to this new rectangle. Use the colours #174994 and #3c64bf at the outer edges of the gradient bar to create realistic shading.

Give this lower button shape a thin 1px Stroke with the colour #315a99. Align the stroke to the Center.

Finally add a soft Drop Shadow to create more shading to provide a touch of realism to the design. Adjust the settings to 30% Opacity, 5px Distance and 18px Size.

Use the Text tool to add some wording to the button, then give the text a Gradient Overlay using the colours #3062ae and #557ac9.

Add an Inner Shadow to the text to give it an inset appearance. Use the settings #5c8fdf, 100% Opacity, 3px Distance and 4px Size.

Finish off the inset effect by adding a highlight to the bottom edge. This is done using the Drop Shadow feature with the settings Normal, #8eb4f2, 100% Opacity, 90 degrees, 1px Distance and 1px Size.

Group all the elements that make up the button, then duplicate the group. CMD+Click the text layer and fill a new layer with purple (#6c3a9c).

Change this layer’s blending mode to Color. This variation of the button will appear when the button is hovered by the cursor.

Duplicate the group again, this version will be the active state when the button is pressed. Move the upper layer of the button downwards.

Draw a selection around the excess left above the button and nudge it downwards to match the outline. This essentially shortens the button’s height.

Toggle off the background layers and draw a selection around the button. Toggle on just the normal button layer group and Copy Merged (CMD+Shift+C).

Copy and Paste all three button states into a new file. Each selection should be exactly the same size. Save this file for web as a PNG-24 with alpha transparency.

The HTML structure

View the HTML code

Being a demo file with just one button the HTML is very simple. First we start with the basic document structure of Doctype, title and link to the CSS stylesheet. The container div will help centre up our demo while the actual button is created from a simple anchor. This <a> is given a class of “btn” so it can be targeted for special CSS treatment.

The CSS styling

View the CSS code

The CSS stylesheet begins with a simple CSS reset to remove the browser defaults from the elements in use. The demo file is then set up with the grey background and centred container div.

View the CSS code

The anchor with the class of btn is targeted with CSS using a.btn. It is first converted from an inline element to a block element to allow for a width and height to be added and furthermore to increase the clickable area. The height of the anchor matches the height of a single button graphic in the sprite image, creating a kind of window which will mask the other two button states. The image sprite is added as a background image and text-indent: -9999px; used to shift the default text off screen.

The different button states are created using CSS pseudo selectors. For anchor elements these include :hover, :active, :visited and :focus. The background image is shifted into place for both the :hover and :active states for the button to show the relevant image in each sitation.

If you test the button in the browser you’ll see an ugly dotted border around the element. This can be fixed using overflow: hidden; to prevent the border extending across the page, or it can be removed altogether by adding outline: none; to all anchor elements. Remember that this visual cue is important for users browsing with a keyboard and/or screenreader, so a backup should be provided using the :focus selector. By adding the :focus selector to the same code as :hover, we can simply replicate the visual change on both mouse hover and keyboard focus.

The final CSS button demo

View the CSS button demo

Check out the demo to see the complete CSS button in action. Notice how the default blue button state is shown until it is hovered by the mouse. The text then changes to purple, then if the button is clicked, the :active state switches the background image to give the impression that the button has been physically pressed.

View the CSS button demo

March 07 2011

07:00

Create a Stylish Contact Form with HTML5 & CSS3

Follow this step by step process to create your own stylish contact form completely out of HTML5 and CSS3. We’ll be using a couple of the handy new features in HTML5 to add cool functionality to our form, while making use of cool CSS3 properties to recreate our Photoshop concept purely in code.

View the HTML and CSS form demo

The design we’ll be building features all the things that make a rich interface; gradients, highlights and shadows! We’ll create a visual concept in Photoshop first of all, but when it comes to building the form we’ll recreate every effect with HTML5 and CSS3.

View the HTML5/CSS3 form demo

The PSD Concept

Open up Photoshop and create a new document. Add a dark to light blue gradient to the background, then draw a rectangle in the centre to contain the form.

Use Photoshop layer styles to add a subtle drop shadow at around 30% opacity and a thin 1px stroke using a very light grey.

Add a title to the design using the darker blue colour swatch. Spruce up this text with a inset effect by tweaking the Drop Shadow settings to create a 1px light grey outline along the bottom edge of the text.

Use the same font styling on each of the labels, then draw a rounded rectangle with 5px corner radius to create an input field. Add a soft Inner Shadow to add depth to the design.

Copy the elements to lay out the form with a series of input fields, then a slightly larger text area.

Modify one of the input fields to visualise how the field would look when in use. Give it a lighter blue colour overlay and style up the text with an inset shadow. Use the Drop Shadow feature so the shadow appears on the outside of the text (not the inside as Inner Shadow does). Remember to uncheck the Use Global Light option so the -90 degree angle doesn’t also affect all the other gradients.

Add lines of text inside the other fields to represent the placeholders, but give them a darker blue fill to lower their contrast against the input fields.

Draw a smaller button shape with the rounded rectangle tool and style it up with a gradient, thin 1px stroke and a subtle shadow.

The visual concept is now complete. We won’t be using any of the graphics as background images, but the PSD will be handy to refer back to for Hex colour codes when recreating the design in CSS.

The HTML5 Structure

View the HTML code

Every web project starts with the HTML structure. Here we’ll be using some fancy HTML5 features to spice up the design. Lay out a basic document structure with Doctype and CSS stylesheet link. House the contact form inside a contaning div so we can centre it up in the demo. Each label element should have a for attribute that relates to an ID of each input field – This boosts the accessibility of the form and allows the user to click the label to activate the correct field.
One new HTML5 feature we’re making use of is the placeholder attribute. Simply enter your desired message and it will appear in each field, when the user has focus on that field the text is automatically cleared. This feature is currently only supported in Safari and Chrome, but is soon to appear in Firefox4.

The CSS Styling

View the HTML code

The CSS stylesheet first sets up the basic document with a reset to remove any browser defaults, then the body is given the blue gradient using CSS3. Currently different code is required for Webkit and Mozilla, but the handy CSS3 Gradient Generator website helps save time.
The containing div is given specific dimensions and centred up using margin: 0 auto;, then the shadow and stroke from Photoshop is replicated using box-shadow and a border.
Basic CSS font styling matches up the text to the concept, then the CSS3 text-shadow property replicates the inset text effect by adding a 1px highlight to the bottom edge.

View the HTML code

Continuing on, the label elements are given similar styling to the h1, then the input elements are styled up with dimensions and padding to match the Photoshop concept. CSS3 gradients come into play once again to recreate the inner shadow effect, simply adjusting the location of the gradient handles can create the impression of subtle shading.
The HTML5 placeholders can also be targeted using vendor specific CSS for both Webkit and Mozilla. The colours for these placeholders are colour picked from the PSD concept.
The CSS used on the input elements can be copied directly onto the textarea, the only difference being the larger height dimensions.

View the HTML code

To give the user visual feedback when the input elements are active, the :focus pseudo selector can be used to give the fields different CSS styling. Here the CSS3 gradients are adjusted using lighter blue colours.
The submit button will currently be styled with the generic CSS used on the input fields, so to target this field in particular the [type=submit] advanced selector is used to attach unique styling to this element in particular. Such styling includes a different width and height, a new gradient background, a subtle box-shadow and a thin 1px border. cursor: pointer; is then added to make the button seem clickable by displaying the ‘pointer’ style of cursor when the element is hovered.

The Complete Code

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Contact Form</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<div id="contact">
	<h1>Send an email</h1>
	<form action="#" method="post">
		<fieldset>
			<label for="name">Name:</label>
			<input type="text" id="name" placeholder="Enter your full name" />

			<label for="email">Email:</label>
			<input type="email" id="email" placeholder="Enter your email address" />

			<label for="message">Message:</label>
			<textarea id="message" placeholder="What's on your mind?"></textarea>

			<input type="submit" value="Send message" />

		</fieldset>
	</form>
</div>

</body>
</html>

CSS

body, div, h1, form, fieldset, input, textarea {
	margin: 0; padding: 0; border: 0; outline: none;
}

html {
	height: 100%;
}

body {
	background: #728eaa;
	background: -moz-linear-gradient(top, #25303C 0%, #728EAA 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25303C), color-stop(100%,#728EAA)); /* webkit */
	font-family: sans-serif;
}

#contact {
	width: 430px; margin: 60px auto; padding: 60px 30px;
	background: #c9d0de; border: 1px solid #e1e1e1;
	-moz-box-shadow: 0px 0px 8px #444;
	-webkit-box-shadow: 0px 0px 8px #444;
}

h1 {
	font-size: 35px; color: #445668; text-transform: uppercase;
	text-align: center; margin: 0 0 35px 0; text-shadow: 0px 1px 0px #f2f2f2;
}

label {
	float: left; clear: left; margin: 11px 20px 0 0; width: 95px;
	text-align: right; font-size: 16px; color: #445668;
	text-transform: uppercase; text-shadow: 0px 1px 0px #f2f2f2;
}

input {
	width: 260px; height: 35px; padding: 5px 20px 0px 20px; margin: 0 0 20px 0;
	background: #5E768D;
	background: -moz-linear-gradient(top, #546A7F 0%, #5E768D 20%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#546A7F), color-stop(20%,#5E768D)); /* webkit */
	border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
	-moz-box-shadow: 0px 1px 0px #f2f2f2;-webkit-box-shadow: 0px 1px 0px #f2f2f2;
	font-family: sans-serif; font-size: 16px; color: #f2f2f2; text-transform: uppercase; text-shadow: 0px -1px 0px #334f71;
}
	input::-webkit-input-placeholder  {
    	color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
	}
	input:-moz-placeholder {
	    color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
	}

textarea {
	width: 260px; height: 170px; padding: 12px 20px 0px 20px; margin: 0 0 20px 0;
	background: #5E768D;
	background: -moz-linear-gradient(top, #546A7F 0%, #5E768D 20%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#546A7F), color-stop(20%,#5E768D)); /* webkit */
	border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
	-moz-box-shadow: 0px 1px 0px #f2f2f2;-webkit-box-shadow: 0px 1px 0px #f2f2f2;
	font-family: sans-serif; font-size: 16px; color: #f2f2f2; text-transform: uppercase; text-shadow: 0px -1px 0px #334f71;
}
	textarea::-webkit-input-placeholder  {
    	color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
	}
	textarea:-moz-placeholder {
	    color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
	}

input:focus, textarea:focus {
	background: #728eaa;
	background: -moz-linear-gradient(top, #668099 0%, #728eaa 20%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#668099), color-stop(20%,#728eaa)); /* webkit */
}

input[type=submit] {
	width: 185px; height: 52px; float: right; padding: 10px 15px; margin: 0 15px 0 0;
	-moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999;
	border: 1px solid #556f8c;
	background: -moz-linear-gradient(top, #718DA9 0%, #415D79 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#718DA9), color-stop(100%,#415D79)); /* webkit */
	cursor: pointer;
}

The Final HTML5/CSS3 Form

View the HTML and CSS form demo

Preview the final web page in your browser to see the form completely rendered in HTML and CSS. Browsers such as Safari and Chrome will see every detail, whereas Firefox won’t see the placeholders until the release of Firefox 4. The styling will slowly degrade as we go through Internet Explorer until we see a basic and flat form, but the overall functionality is still usable and accessible.

View the HTML5/CSS3 form demo

February 21 2011

07:00

February 07 2011

07:00

How To Design a Custom YouTube Background

Have a YouTube channel? Want to customise it with your own background design? Follow this guide to find out how to create a cool theme for a gaming channel, then download the free template for use in your own projects.

Custom YouTube design

The design we’ll be creating is a dark military theme for my new gaming channel. Subtle camouflage patterns, grungy background textures and an array of awesome weaponry all combine to form an eye catching background design to entice viewers and subscribers.

View the final YouTube background design

YouTube background template

Like many social websites, YouTube allows the cusomisation of your personal profile through the uploading of a background image and the modification of the profile’s colour scheme. In order to make sure our design fits well with the YouTube website and its various palettes we need to base it on a template. Here’s a YouTube design template I made earlier, download it and feel free to use it in all your future projects. The template highlights where each palette is located and shows how much of the page is seen by common monitor resultions.

Download the YouTube design template (PSD)

The first step towards our dark gaming channel design is a camo pattern background. Here I’m using my free repeating camo patterns I posted on Blog.SpoonGraphics, with a slight colour adjustment.

Next, draw a large selection around the main YouTube container from the template and fill it with black on a new layer.

Download a grungy texture like this one from LostandTaken and scale it into position over the black area in the design. Reduce the opacity to tone down the grungy effect.

Toggle on the template and CMD+click the palettes layer thumbnail to load the selection. Fill these palettes with a black background and reduce the opacity so the texture can be seen through them.

Create a new layer then right click the selection and choose Stroke. Enter 1px with the color White. Change this layer to Soft Light.

Use the Eraser tool with a soft brush setting at 50% opacity to grunge up these borders by erasing out random areas.

Being a military themed gaming channel means we need guns, lots of guns! Scour the stock photo websites for various weaponry. I originally developed this design for an Expendables Movie poster tutorial, check out that post for more details!

Open up each weapon photo into Photoshop and desaturate, then use the Magic Wand to quickly make a selection of the object.

Go to Select > Modify > Contract and enter 2px in the settings. This helps clip out any unwanted white area that the Magic Wand might have included in the selection.

Clip out every weapon image you find and compile the selections in a new document. Aim to find a range of weapons of various sizes, including knives.

The images won’t be in proportion with each other, so scale and order each weapon according to their actual size.

Starting with the largest weapon and moving down, rotate and position the guns so they flare out in a kind of wing shape.

If the tones of some weapons don’t match, quickly adjust the Levels to clip their shadows and highlights.

The smaller weapons may need duplicating to fill out their area of the wing. Stack these weapons to give the impression of layered feathers.

Finally arrange the knives until the rotation of elements reaches the 180 degrees mark. Again stack and layer these objects to fill in any gaps.

When all the weapons have made up a complete wing shape, group them together and paste them into the main YouTube design document.

Scale and position the wing behind the content panel. Take into consideration the common monitor resolution guides to ensure the weapons will fit within the screen area of most viewers.

Paint in a blue overlay over the weapons to add a cool colour cast. This blue will also be sampled for use as the link colour to tie the design together.

Duplicate the group of wings, right click and selection flip horizontally, then position the duplicate in the same place on the opposite side.

Toggle on the design template to double check the scale of the design and its elements. This design will fit into 1440px resolutions, but the tips of the larger guns will be cropped off on anything smaller.

We also need to take into consideration larger monitor resolutions and browser window scrolling, so add a black fill to fade out the edges of the design to a solid colour.

Crop the design as tightly as possible, then save the image. Compress the JPEG settings as far as you can while keeping an acceptable image quality. The max filesize YouTube accepts is 256kb.

Log into your YouTube profile and edit your channel. Upload the background image and deselect the repeat option. Then go through and edit the design background, text and link colours. Also remember to set the transparency of the YouTube wrapper and palettes to 100% so the underlying background can be seen.

Custom YouTube design

Check out the final design over at my gaming channel on YouTube. Notice how the palettes sit nicely against the containers of the background. If you’re gaming fan, particularly of the Call of Duty series, why not consider subscribing? ;-)

View the final YouTube background design

January 24 2011

07:00

How To Create a Cool Animated Menu with jQuery

In this tutorial we’ll be building a cool navigation list complete with a sliding hover effect. Learn how to build the concept in Photoshop, lay out the basic HTML elements, style everything up in CSS then tie it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design.

View the animated menu demo

The design we’ll be building features a cool label image that slides into place under each navigation item on hover. We’ll build the design to work without jQuery first of all to ensure it’s widely accessible to users without Javascript enabled, then enhance the effect with jQuery for the majority of users.

View the animated menu demo

Build the Photoshop concept

Create a new document and fill the background with a light beige. Add a subtle 1.5% noise texture by going to Filter > Noise > Add Noise.

Use a subtle grunge Photoshop brush to add a little extra texture to the top centre of the canvas. Adjust the opacity to tone down the distressed effect.

Draw and fill a rectangle to create the base of the label graphic. Press CMD+T to transform the shape, then drag a guide to highlight the centre point.

Use the Polygonal Lasso tool to draw a small triangle. Use this triangle to clip out the bottom edges. Flip the selection horizontally and align with the guide to ensure the clipping is symmetrical.

Begin adding a range of Layer Style effects to bring the label to life. Start with a Gradient Overlay to add a range of dark to light red tones.

Add a thin stroke using a dark red colour selection with settings of 2px width and aligned to the inside.

Set up an Inner Glow using a slightly lighter red with 100% opacity, Normal blending mode, 50% Choke and 3px in size.

Add a soft Drop Shadow aligned to 90 degrees to give the impression of depth. Reduce the opacity to around 20% to tone down the effect.

Finish off the label with a distressed texture using the subtle grunge brushes. Load the selection of the label shape, inverse and delete out the excess. Change the blending mode to Lighter Color at 35%.

All the menu needs now is a series of text links. Set the fonts up with Helvetica Bold and choose a fill colour from the label. Simulate the hover effect by switching the fill to beige on the active link.

Make a selection of the label graphic and export the image as a PNG24 file with Alpha transparency.

The demo file uses just three images: A textured background image, the red label graphic and a repeating noise texture.

Create the basic HTML structure

View the HTML code

The basic menu system first needs to be laid out as a HTML skeleton. Begin the page with a Doctype, followed by page title and a link to the CSS stylesheet. Write out the menu itself as a good old Unordered List element, with each <li> item containing an anchor.

Style up the design with CSS

View the CSS code

Next, the CSS brings the design to life. Begin the CSS file with a quick reset to remove any default browser styling, then set up the surrounding page design by adding the repeating noise background texture to the page body. Centre up the <ul> with margin: auto; and text-align: center; and clear the element using overflow: hidden;.
Float each <li> item to the left to place each nav item side by side. The rest of the styling can then go directly onto the anchors. Each anchor needs to have the exact dimensions of the label graphic, taking into consideration any padding used to position the text into place. Replicate the font styling from Photoshop using the same bold Helvetica styling, and use the CSS3 text-shadow property to recreate the Photoshop Drop Shadow. Finally, add the label graphic as a background image and set the position to -149px so it is hidden off screen until the mouse hovers the nav item.
Set up the styling for the :hover effects by moving the background back into position and alter the colour of the font and shadow to ensure they can still be seen when the background colour changes.

A preview of the HTML file so far will show a fully working menu design, albeit with basic CSS styling where the label immediately appears and disappears without any cool sliding effects. It’s important to first develop this basic fall back so users without Javascript enabled will still see a hover effect.

Spice up the effect with jQuery

View the Javascript code

In order to add some fancy Javascript effects we first need to head back to the HTML file and link up some JS files. We’ll require three files: The jQuery library, a handy plugin allowing background position animation, and finally our own blank scripts.js file where we’ll write our own code.

View the jQuery code

The first thing to add to our jQuery code is a simple line to turn off the basic CSS effect. Adding a special ‘.js’ class to the anchor with Javascript allows us to add an extra line of CSS to overwrite the original styling. With this out of the way we can then style the actual sliding hover effect. Add a hover function to the anchors within the menu list. On hover, use .animate() to set the backgroundPosition to 0 0, then back off screen on hover-out. A speed of 200 keeps things nice and swift. One extra snippet to add is a .stop(true,true) to prevent the effect looping if the mouse passes over the menu quickly.

View the extra jQuery code

A preview of the effect in the browser will show the label sliding in and out on hover. We can add one extra line to really spruce up the effect. Adding an extra animation to move the label by just 5px creates a cool little bounce effect. Similar effects can also be achieved using easing plugins, but to save linking up extra files this little trick works nicely.

The complete HTML, CSS & jQuery code

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Animated Label Navigation Menu</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="js/animate-bg.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</head>

<body>

<div id="container">
	<ul id="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>

</body>
</html>

CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	background: #f5f0e0 url(images/noise.png);
}

#container {
	height: 800px;
	background: url(images/bg.jpg) center top no-repeat;
}

ul#nav {
	width: 700px; margin: 0 auto; text-align: center; overflow: hidden;
}
	ul#nav li {
		float: left; list-style: none;
	}
		ul#nav li a {
			display: block; width: 97px; height: 77px;
			padding: 72px 0 0 0; margin: 0 32px 0 32px;
			font: bold 16px Helvetica, Arial, Sans-Serif; text-transform: uppercase;
			color: #9c5959; text-shadow: 0 1px 3px #c4bda6; text-decoration: none;

			background: url(images/label.png) 0 -149px no-repeat;
		}
			ul#nav li a:hover {
				background: url(images/label.png) 0 0 no-repeat;
				color: #eee9d9; text-shadow: 0 2px 3px #4c2222;
			}

			ul#nav li a.js:hover {
				background: url(images/label.png) 0 -149px no-repeat;
			}

jQuery

$(document).ready(function() {
	$("ul#nav li a").addClass("js");
	$("ul#nav li a").hover(
      function () {
        $(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200);
        $(this).animate({backgroundPosition:"(0 -5px)"}, 150);
      },
      function () {
        $(this).animate({backgroundPosition:"(0 -149px)"}, 200);

      }
    );

});

The final animated menu design

View the animated menu demo

View the animated menu demo

January 03 2011

07:00

How To Create a Detailed Gauge Icon in Photoshop

Follow this step by step guide to creating a detailed gauge icon in Photoshop. We’ll be using various Photoshop layer styles to build up gradients and shadows to produce a detailed and realistic large scale icon, then modify and rebuild the icon into a range of typical icon sizes.

Gauge icon design

The icon we’ll be creating features a sleek and colourful gauge set in a chrome beveled frame with subtle textures and gradients. The largest and most detailed version comes in at 256x256px, then it is incrementally scaled to 128px, 64px, 48px and 32px, each becoming less detailed but modified slightly to work at the smaller sizes.

We’ll start with the largest of the icons. Draw a 256px circle with the Marquee tool on a new layer and fill it with any colour. Double click the layer to open up the layer styles options. Add a Gradient Overlay alternating between dark and light greys to give a shiny metal effect.

Add a thin 1px stroke using a mid-grey between the two tones used on the gradient. Using Photoshop layer styles throughout the creation of the icon makes it much easier to rebuild the icon at the smaller sizes as each effect can be reloaded and quickly edited via the layer styles options palette.

CMD+Click the layer’s thumbnail to load the circular selection. Right click and choose Transform Selection, then scale down the selection while holding Shift and Alt. Fill this new selection with black on a new layer.

Open up the layer styles window for this layer and add a black to dark grey vertical Gradient Overlay to form the base of the fascia.

On the same layer, add an Inner Glow and Stroke effect using light grey tones to give the impression of a chrome surround.

Load the selection by CMD+Clicking the layer thumbnail, then fill a new layer with a repeating pattern. I’m using one of the patterns from the recent pixel patterns freebie here on Line25. Change the blending mode to Multiply to render the white areas transparent then reduce the opacity to around 25%.

Load another circular selection, scale it down slightly and fill with white. Load the selection again, scale down further and delete this selection to form a white ring. Create a square selection, right click and choose Transform Selection, rotate it by 45 degrees (hold Shift) then move it downwards so the top corner is aligned with the centre of the gauge. Delete this selection from the white ring.

Load the layer styles for this shape and add a Gradient Overlay using the default rainbow color spectrum. Change the style to Angle then alter the orientation until the gradient begins with blue and ends with red. Add a subtle Inner Shadow to the top edge.

Draw a small circle in the centre of the gauge and add a metal style Gradient Overlay using grey tones. Also add a subtle Drop Shadow to add depth and a touch of realism.

Use the Polygonal Lasso tool to draw a needle shape on a layer underneath the centre pin and add a Gradient Overlay using dark and light red tones. Alter the gradient angle so it flows exactly down the centre of the needle. Give the needle a subtle Drop Shadow to give the impression that is lifted from the gauge face slightly.

The largest of the icons is now complete. All the subtle gradients help to replicate light and shade to create a more realistic icon design. Now let’s rebuild the icon into the smaller versions.

Select all layers and press CMD+T to Transform. Using the top toolbar to enter the specific dimensions of the smaller icons.

When the icon is scaled some of the effects are lost, or their size remains too large to work properly on the smaller icon. Go through the styles and remove effects that are no longer visible.

Other effects such as gradients and shadows will need adjusting to accommodate the smaller icon size. Go through and reduce the size of each of these effects.

The great thing about layer styles is the contents of the layer can be recreated entirely while keeping the same effects. The centre pin in particular becomes way too small on the tiny icons, so fill a larger circular selection on the same layer – The layer style will automatically add the same gradient and shadows.

The largest of the icons features all the textures and details, but as the icon is scaled down some of these details are lost. As the icon moves into the 48px-32px range the proportions are adjusted so the design is still recognisable, this includes a larger centre pin and needle as well as replacing the gradients of the chrome surround with a plain grey stroke.

December 13 2010

07:00

November 15 2010

07:00

Design a Textured Outdoors Website in Photoshop

In part one of this website build project we’ll go through the process of creating a detailed concept for an outdoors site. The design is based on a range of textures and a mix of blue and greys to create a stylish and sophisticated website for ‘Pinewood Forest’.

Pinewood Forest web design concept

View the Pinewood Forest design concept

Pinewood Forest is a fictional area of natural beauty and visitor attraction. The aim is to mock up a web design to showcase the forest, what it has to offer and inform visitors of upcoming events. We’ll be creating the design based on a sophisticated style with subtly textured elements and serif fonts. The background will feature a large static background image that allows the main content to scroll over it, and the content itself is broken up into key focus areas with photography used to draw in the user.

In this first part of the site build we’ll go through the Photoshop stage and mock up the design concept for the homepage, stay tuned for next week’s tutorial when we’ll finish off the homepage into a fully coded webpage in HTML and CSS.

Begin by creating a new document. I tend to create a canvas size at a typical large monitor resolution. With this design featuring a large background image we want to accommodate even the larger resolutions used by 24 or 27 inch monitors.
Transform a marquee selection to 960px and drag guides to identify this portion of the page, this will be where the main content will be contained.

Import a photograph for use as the large background image and scale to fill the majority of the screen, but leave a thin margin at either side. Drag a guide to identify a typical fold line for a large monitor resolution, say around 1920px. This particular image I have downloaded from ThinkStock, which was also the source of the range of blue and grey tones.

Add a Layer Mask to the photograph and use a range of Watercolor brushes to fade out the edges. Drop the opacity of your brushes to create a cool layered and textured appearance where the image blends into the background.

Create a logo for the forest and place it centrally in the header area of the page. Adjust the sizing of the fonts so the focus is on the word Pinewood, but align the two words by increasing the tracking on the word forest. A mix of sans-serif (League Gothic) and serif (Clarendon) works really well to combine the styles of modern and traditional.

Add a Drop Shadow and Gradient Overlay layer style to the logo. Both effects add depth by lifting the logo from the page and giving it more prominence. Keep the contrast between the gradient and the opacity of the shadow low to maintain subtlety.

Type out some navigation items to sit either side of the logo to form a menu. The serif Georgia font is a web safe alternative to the Clarendon typeface used in the logo, without needing any special web font treatment. The tracking in the design concept can be matched with CSS letter-spacing.

Draw a large rectangular selection to outline the content area within the 960px guides. Fill this rectangle with a light grey colour selection from the logo’s gradient.

Add a subtle Noise texture (Filter > Noise > Add Noise) of around 2.5% to give a tactile feel to the content panel.

CMD-click the layer thumbnail of the content panel, then right click and select Transform Selection. Adjust the width and height to 40px smaller in size and fill the selection with white. Add a subtle Drop Shadow to lift the white panel from the grey border.

Use a selection of paint roller brushes to rough up the edges of the grey border by painting onto a layer mask. Load the selection of the white panel and fill this area black on the layer mask to render it transparent, then drop the opacity of the grey border to around 60% to allow the photographic background to show through.

Import a photograph to use as a background of the main feature area on the page. Draw a thin rectangular marquee selection to match the content panel, inverse the selection and delete out the excess from the photograph.

The colours of the photo don’t really match the overall scheme of the website so make some adjustments with the Curves tool. Bend the Red and Green channels into very slight ‘S-bends’, then tweak the blue channel with an inverted ‘S’ shape.

Decrease the saturation of the image to tone down the colours, the result is a colour cast on the image that matches the cool blues and greys of the surrounding design.

Use one of the paint roller brushes from Colorburned to paint in a background for some text in the feature area.

Tweak the size and tracking of the title text to create a cool typographic header, then set the following paragraph as typical 14px body text.

Similar layer styles to those used on the logo will help boost the impact of the header. Add the grey to white gradient overlay and subtle drop shadow.

A clear call to action button will give casual browsers clear direction of where to go next from the homepage. Draw a thin rectangle and fill it with a blue colour swatch from the scheme. Add a subtle noise filter to rough up the button a little, then use a 1px pencil setting on the Eraser tool to clip a little notch in each corner.

Add an Inner Glow to the button using a slightly darker shade of blue. Set the options to Normal blending mode, 100% opacity and adjust the size to suit. Also give the button a 1px stroke using a slightly lighter shade of blue.

Finish off the button with a clear and descriptive message, them make sure all the elements of the feature area are neatly aligned.

Begin filling out the content area with body copy. Set the intro heading in a slightly larger font size and allow it to span across the full width. Align the smaller body copy into a two column layout, one wide column for the main content and a smaller column for the sidebar. Links will also need mocking up to show how they will be identified. Colour specific parts of the text with a lighter blue and add an underline.

In the sidebar we’re going to make three mini-feature areas that would link off to other areas of the site. Each one will include an image, title and short paragraph. Add a textured background using the paint roller brushes then clip a map image down to size within this textured area.

Use the paint roller brushes to create another background, this time using the darker blue to create a base for the title text. Trim off any overlapping areas to match the edge of the image.

Add a short title to the header graphic and give it the same treatment as the text in the feature section.

Group all the elements that form the aside feature in the sidebar, then duplicate the group and edit the content to form three separate feature areas.

Underneath the text in the main column we’ll add an ‘Upcoming events’ section. Use the already established font styles from the header and body text to lay out the content, then create a small date area using a selection from the grey border.

Each event is laid out with a date icon, title, more info link and short description. We can plan at this stage how this layout could be coding up with the relevant HTML elements, but you’ll have to wait until next week to see the step by step!

Pinewood Forest web design concept

Here we have the finished concept. Next week we’ll go through the process of coding it up with HTML and CSS. Remember we’ll be keeping that large background image static so the outer portion of the image won’t be seen by most monitor resolutions. This also means all the centre content will have to scroll over the background image, so we’ll be calling upon lots of PNG-24 graphics to use their alpha transparency.

October 25 2010

07:00

Create a Stylish Portfolio Site Design in Photoshop

This first of a two part tutorial series will go through the process of building a simple and stylish portfolio website design. We’ll begin by designing the concept in Photoshop and fleshing out every little detail before cutting up the design and building it all into a working website next week.

Design portfolio concept

The design we’ll be building is a simple single page website that’s made up of basic header with a short introductory sentence, a series of portfolio items each with a title and description, then the page ends with a stylish contact form in the footer. The idea for the portfolio items is to show the letterbox style thumbnail, then use some jQuery magic on the finished site to expand the letterbox to show the whole graphic, but you’ll have to wait until next week for that!

View the portfolio design concept

Begin by opening up Photoshop. I tend to create document that resembles a typical screen resolution of around 1680px width. Fill the background of the document with a base colour, such as a mid-blue.

Textures help give a tactile and realistic feel to a website design. Use the Noise (Filter > Noise > Add Noise) filter to add a subtle 2.5% amount of noise texture to the background.

We’ll also add a cool grid like repeating pattern to the design for a touch of visual interest. Create a new 24x24px document and draw a grid outline as shown with the Pencil tool. Go to Edit > Define Pattern to save this swatch into the pattern palette.

Fill a new layer with the recently created pattern swatch, then change the blending mode to Multiply and lower the opacity to tone down the effect so it subtly blends into the background.

Go to Edit > Select All, then right click on the selection and choose Transform Selection. In Photoshop’s top back, right click and change the units in the width(W) box to Pixels and change the size to 760px. Drag out guides to each edge and the centre of this selection.
Begin creating an introductory header by typing out the title of the portfolio. Use a subtle Drop Shadow to lift the text from the design. Then plan here is to use CSS image replacement to render the title, so the non-web font of News Gothic is used.

Draw a long thin rectangle to form the base of the title ribbon. Use the Polygonal Lasso tool to clip out triangular selections from each end.

Add a Gradient Overlay to fill the ribbon with dark to light green tones running vertically, then manually add a thin highlight across the top edge on a new layer. Fill this highlight selection with white and change the blending mode to Soft Light.

Use some Photoshop brushes to paint in some subtle textures over the ribbon to add realism and authenticity. This Subtle Brush Set from Function does the job perfectly.

Load the selection of the ribbon layer by CMD+Clicking on the layer’s thumbnail. Inverse the selection (CMD+Shift+I) then delete out the excess from the texture overlay layer. Change the texture layer to Overlay at 7% to tone down the effect until it’s barely visible.

Add a Drop Shadow layer style to the ribbon layer, then in the layers palette right click the effect and select Create Layers. This will convert the Drop Shadow into a layer of its own, which can then be manipulated with the Warp tool. Press CMD+T to Transform, then right click and select Warp. Bend the outer edges downwards to give the impression of depth and three dimensions with clever shading. Reduce the opacity of the shadow layer to tone down the effect.

Finish off the ribbon by typing out your name. Here I’m still using the News Gothic font, along with a subtle Drop Shadow. A couple of star graphics were quickly imported from Adobe Illustrator to finish off the header.

The introductory sentence is nothing more than text with a subtle drop shadow. The Helvetica font is certainly web safe, and the shadow can be replicated with CSS3 so this section will be coded manually in the final design. Mock up the text in Photoshop to plan out the alignment and line height.

Paste in the first of your portfolio pieces and scale it to fit the width of the design. Remember to hold the Shift key while scaling to keep the angles constrained.

The idea for these portfolio items is for them to expand to show the full graphic on hover as a little touch of fancyness. This can be replicated in the Photoshop document with a quick layer mask, which will show the narrow version while keep the original intact.

Use a duplicate of the top ribbon banner to create a smaller sub-heading. Clip off the edge on the left side and add an extra highlight line, then type out a brief description of the portfolio item in Helvetica. Match the line height to the subtle grid background.

Fill out the concept with a few more portfolio items. If you’re following this tutorial to create your own portfolio you might want to include a few more design samples, but the key is to show a fairly small number of items that show your best work.

Paste in another little star graphic to signify the end of the portfolio section. Blend this into the design with a few Layer Styles. A Color Overlay using a slightly darker shade of the background and an Inner Shadow create a cool inset appearance.

Use the same text styling as the introductory sentence to create a closing message, then lay out the contact form fields and labels with basic white graphics. Use the guides to keep everything aligned.

Add a Gradient Overlay and Stroke layer style to blend the form fields into the theme of the design. A dark to light vertical gradient can help create subtle shading on the input fields to give an inset appearance.

Use a copy of the banner graphic to create a submit button. Clip off the ribbon type ends and follow the highlight onto the edges to form a typical button graphic.

Design portfolio concept

Take a step back to check over the design and tweak the details. The design concept is all ready for chopping and coding up into a working website. Come back next week when we’ll cover the HTML and CSS aspects, and get those fancy image hovers working with some progressively enhanced jQuery.

View the portfolio design concept

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!

Schweinderl