Adobe Photoshop is most powerful image editing software, having great variety of tools to do your desired actions in order to create astonishing graphics and making image look better. Photoshop has major market share in the class of image editing softwares. Although it  is the best software available but it is not easy to learn, it can take a heck of time and guidance to learn its basics. If you want to learn Photoshop or you are just getting started with it then you found the right place. In this roundup we have compiled a list of absolute basic Photoshop tutorials for getting started with Photoshop.


Table of Contents:

  1. Photoshop Tutorials for Beginners
  2. Free and Premium Photoshop Tutorials for Graphic and Web Designers
  3. 35 Wonderful Gadget Design Tutorials for Photoshop
  4. How to Recreate Tumblr’s Layout Using Adobe Photoshop in 10 Minutes
  5. Design an Elegant Calendar Using Adobe Photoshop in 15 Minutes
  6. Create a Minimal and Super Trendy Login Interface in Photoshop
  7. Easy Brush Text Nature Effect: Tutorial
  8. Create A Sleek Music Player In Adobe Photoshop
  9. How to Create a Sleek Wii Controller

Photoshop Tutorials for Beginners


 

1. Getting Started with Photoshop

If you are just getting started with Photoshop then this article is worth a read, it discusses Photoshop and Fireworks interfaces and common tools, and explains few basic tasks such as creating new documents and saving files for the Web. If you go through it whole article you will have basic knowledge of all tools you will need to work with.

Getting Started with Photoshop

2. Photoshop’s Toolbox

In this tutorial, Photoshop’s Toolbox will be introduced to you, describing the basic functions of every tool present in Toolbox.

Photoshop’s Toolbox

3. Create Your Own Custom Photoshop Keyboard Shortcuts

Using Keyboard shortcuts is a great way to speed up your workflow and make both you and Photoshop much more efficient. In this tutorial you will learn how to create custom keyboard shortcuts in Photoshop.

Photoshop keyboard shortcuts

4. Photoshop Secret Shortcuts

This list provides you 30 secret Photoshop shortcuts. “Secret” because they are  not mentioned in the menus. They will surly help you in boost your productivity.

Photoshop Secret Shortcuts

5. Working with Layers in Photoshop

Learning Photoshop Layers should be very important to learn Photoshop. Layers are like parts of an image, working on different layers will make it lot easier and will not effect other parts on the image, we can also say that layers are like colorless papers arranged on top of each other, on which we can work separately without making any changes to other papers.

Working with Layers in Photoshop

6. Photoshop Pen Tool Guide

Pen tool is very important as it is used in drawing shapes and objects. This guide will teach you to create simple shapes using Pen tool.

Photoshop Pen Tool Guide

7. Making Selections With The Pen Tool

If you don’t want any conflicts in making selections in Photoshop then you should know how to use Pen tool as a selection tool. It is the best practice to use Pen tool for selection and this basic guide will help you if you don’t know how to use Pen tool for making selection.

Making Selections With The Pen Tool

8. Photoshop Shapes

In this Adobe Photoshop tutorial, you will learn everything you need to know to create and work with custom shapes in Photoshop.

Photoshop Shapes

9. Photoshop Brush Tool: A Basic Guide

Mainly Photoshop Brush Tool is used to fill colors in pictures, but it has many other uses also, in fact you can explore this tool in endless ways. This comprehensive article will make you understand the Brush Tool and its main features.

Photoshop Brush Tool

10. Installing And Managing Brushes

This basic Photoshop tutorial will demonstrate how to install brushes and few techniques that will help you keep your additions organized and safe.

Installing And Managing Brushes And Other Presets

11. The hidden power of Photoshop brush tool

Discover the hidden power of Photoshop Brush tool with this guide.

The hidden power of Photoshop brush tool

12. Creating your own Custom Adobe Photoshop Brushes

If you want some creativity and don’t want to use same brushes which are used again and again by other people then you can create your own custom brush. This tutorials will help you in doing so.

Creating your own Custom Adobe Photoshop Brushes

13. Photoshop Gradients

A gradient is a fill consisting of two or more colors blending together. In this guide you will learn how to create and use Photoshop Gradients.

Photoshop Gradients

14. A Comprehensive Introduction to Photoshop Selection Techniques

If you are facing any difficulties in making selections in Photoshop then this comprehensive guide about selection tools and techniques will definitely help you. It discuss different ways to make selection, more techniques you learn, better it will be.

A Comprehensive Introduction to Photoshop Selection Techniques

15. Image Masking Tools

“Image masking is the process of marking the background around the object that effectively instructs the Photoshop software to print only what’s inside the selection and ignore everything that’s outside.” This guide will teach you how to use Image Masking Tools effectively.

Image Masking Tools

16. Photoshop Adjustment Layers

Photoshop Adjustment Layers allow you to apply an effect to a group of layers and edit that effect later while preserving original layers. In this tutorial you will learn the benefits of working with Photoshop Adjustment Layers.

Photoshop Adjustment Layers

17. Photoshop’s Filters

Using Photoshop Filters you can change the appearance of an image, any selection or layer in Photoshop. This tutorial will demonstrate how to apply and use some common Photoshop Filters.

Photoshop’s Filters

18. Retouch and Healing Tools

Retouching and Healing tools are very handy when you need to touch-up bit or spot healing in images. This tutorial will enable you to use some common healing tools.

Retouch and Healing Tools

19. Photoshop Actions

Photoshop Actions make your work super fast, imagine you have to resize 50 or 60 images using Photoshop and you don’t know how to use Photoshop Actions? Huge trouble. For this purpose you can define a specific action first and it will resize images all by itself. This tutorial will help you in making and using Photoshop Actions.

Photoshop Actions

20. Use The Grid in Photoshop

“The Grid is the perfect alignment tool for graphic design, and is very easy to use. By combining the Grid with the “Snap” feature, users can perfectly align objects along grid lines and subdivisions.” Learn how to use Grid effectively from this tutorial.

Use The Grid

21. A Comprehensive Introduction to the Type Tool

Everybody knows Type tool is one of the most popular and powerful tool. Anyone can use it but this tutorial will explore all the potential this tool got, you will learn many techniques about type tool here.

A Comprehensive Introduction to the Type Tool

22. A Basic Guide to Photoshop’s 3D Tools

“From opening a 3D file to rotating, scaling and moving it, working with meshes, creating textures or even materials, adding lights, and more, this tutorial covers most of the secrets of the useful feature 3D Tools of Photoshop CS4 Extended. If you have it, why don’t you try? I can assure you that this guide will help you discover a brand new world of infinite possibilities.”

A Basic Guide to Photoshop’s 3D Tools

23. Creating Custom Patterns

Creating Custom Patterns

24. Add Visual Texture 3 Easy Steps

Add Visual Texture 3 Easy Steps

25. Light Effect On A Model

Light Effect On A Model

26. Colour Invert Effect

Colour Invert Effect

27. Create Elegant Curvy Lines with Pen Tool in Photoshop

Create Elegant Curvy Lines with Pen Tool

28. Design a Glossy Download Icon

Design a Glossy Download Icon

29. Making the ATI LOGO

Making the ATI LOGO

30. Pencil It In

Pencil It In

31. Awesome digital bokeh effect in Photoshop

Awesome digital bokeh effect in Photoshop

32. 6 Quick’n’Dirty Photoshop Text Effects From Scratch

6 Quick’n'Dirty Photoshop Text Effects From Scratch

33. A Draw-Through Technique, With a Spaceship

A Draw-Through Technique

Now let’s take a look at some more tutorials and websites that offers great deals. You will find premium and free ones. Let’s rock!


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.

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!

In the next section we are again returning to Photoshop. Ready? Alright!


35 Wonderful Gadget Design Tutorials for Photoshop

Gadgets such as mp3 players, usb devices, iPhones, iPads, and other tablets and so on have now become an important part of our lives and these are also one of the most favorite subjects for the designing community. This is the reason why you see loads of gadgets being incorporated into web designs. This can be best achieved by using Adobe Photoshop; and there are heaps of Photoshop tutorials to help you improve your skills and techniques. We have compiled 40 gadget design tutorials that will help you create sensible gadget designs using Adobe Photoshop!


In this round up, we’ll showcase 40 of the most excellent gadget design tutorials from different sources. Look into these high quality tutorials and make learning experience more satisfying.

1. How to Create a Detailed Audio Player

In this tutorial, we will show you how to create a detailed audio player from scratch. This tutorial will be a great opportunity for you to practice those Shape Tools and Layer Styles skills, with lots of adding and subtracting of Shapes. Enjoy!

How to Create a Detailed Audio Player in Photoshop

2. Make a Floating in Air USB Key Illustration

In this tutorial, we will show you how to illustrate a USB key floating in the air and reflecting on a surface. We’ll be adding numerous details that will make this illustration shine.

Make a Floating in Air USB Key Illustration

3. Design an MP3 Player

In this tutorial you will learn how to design a product in Photoshop. The product is a RCA Lyra X3030 portable media player, the reason for this tutorial is to teach people the techniques used for mocking up a product design.

Design an MP3 Player

4. Create an USB Portable Audio Speaker Design

In this tutorial we will show you how to create a Photoshop design USB portable speaker logo icon in photoshop.

Create an USB Portable Audio Speaker Design in Photoshop

5. Photoshop Design Bluethoth Logo Icon

In this tutorial we will show you how to create a Photoshop design bluethoth logo icon in photoshop.

Photoshop design bluethoth logo icon in photoshop

6. Designing Canon Digital Camera

In this detailed tutorial we will learn how to design Canon digital camera.

Designing Canon Digital Camera

7. Nokia 5300 Cell Phone Interface

This tutorial shows you how to use multiple vector shapes, layer styles, and various tools to create a mobile phone design. It’s a nice design with multiple small details explained.

Nokia 5300 Cell phone interface

8. Creating a CD Player in Photoshop Tutorial

In this tutorial you will learn how to create a realistic cd player image shown below.

Creating a CD PLayer in Photoshop Tutorial

9. Design a Vintage Radio Icon in Photoshop

In this photoshop tutorial, you will learn how to design an old vintage radio using simple shapes, gradients, patterns and textures.

Design a Vintage Radio Icon in Photoshop

10. Learn to Create a Simple Yet Pleasing Music Player

In this tutorial we will walk you through the steps of creating a simple yet pleasing music player in adobe photoshop. Lets get going…

11. Make a Watch in Photoshop

In this tutorial you will learn how to create a watch from scratch in Adobe Photoshop. We will guide you step by step until it is complete.

Make A Watch In Adobe Photoshop

12. How to Create a Super Retro Style Game Controller

In this tutorial, we’re going to be drawing a retro game console controller. Rather than a perspective look, this one will have an isometric look. This tutorial is extremely detailed, and will be fun for all you classic arcade lovers.

How to Create a Super Retro Style Game Controller

13. Draw a Sound Dock System

In this tutorial we will demonstrate how to draw a Sound Dock System with Photoshop. Let’s get started!

Draw a Sound Dock System With Photoshop

14. Creating an iOS Device Connector in Photoshop

In this tutorial you will see how to make a pixel-perfect iOS Device Connector design from scratch.

Creating an iOS Device Connector in Photoshop

15. MP3 Player Illustration

In this tutorial you will learn how to create a beautiful MP3 Player Illustration.

MP3 Player Illustration

16. Create a Motorola Droid Style Phone

Recreating electronic devices in Photoshop is a great way to learn. In this tutorial, we will demonstrate how to create a Motorola Droid style phone in Photoshop. Let’s get started!

Create a Motorola Droid Style Phone in Photoshop

17. Clean Mobile Login Screen Tutorial

Mobile design is getting bigger and bigger as the weeks go by, its only a matter of time before mobile design tutorials start popping up in every tutorial website. So to kick it off we will be showing you how to create a simple mobile login screen.

Clean Mobile Login Screen Tutorial

18. Strawberry Cell Phone

In this tutorial we will teach you how to create a beautiful Strawberry Cell Phone.

Strawberry Cell Phone

19. Creating a Set of Digital Painting Icons

In this tutorial we will create a pen tablet from scratch, specifically the Wacom 12″ Cintiq tablet. This model combines touch and pressure sensitivity, which allows users to draw directly on the screen. These capabilities make it a favorite for illustrators. Let’s get to work.

Creating a Set of Digital Painting Icons Part 4 – Digital Tablet Icon

20. Bamboo Fun Tablet

In this tutorial you will learn how to create an awesome Bamboo Fun tablet.

Bamboo Fun tablet

21. Create a Sidekick LX Styled Vector Illustration

This tutorial will show you how to make a vector illustration of the Sidekick LX. This tutorial uses mostly the Pen tool, basic shapes, and simple gradients to give this illustration a degree of realism. In this tutorial, you’ll learn quick ways to make stylized vector illustrations.

Create a Sidekick LX Styled Vector Illustration

22. Design a Colorful USB Flash Stick with Tattoo Style Decals

In this tutorial, we’ll explain how to create a semi-realistic flash stick with gradients and simple shapes. We will make our own custom brush to create tattoo style swooshes. Also, we’ll review how to use Global Colors in Illustrator, which allows us to flexibly change the colors of an object on the fly.

Design a Colorful USB Flash Stick with Tattoo Style Decals

23. Design a Shiny Photorealistic Apple Remote

Apple has so many beautiful products. Their product designs consistently attain a sought-after status, which distinguishes them as an innovative company. In this tutorial, we will teach you how to make a shiny new apple remote.

Design a Shiny Photorealistic Apple Remote

24. How to Create a Detailed Apple iPad Icon

In this tutorial we will be showing you how to create a Detailed Apple iPad Icon in Photoshop

How To Create a Detailed Apple iPad Icon in Photoshop

25. Design an HTC

With this tutorial we will see how to create a smartphone HTC starting from the beginning. At first sight it seems a long job but, we can assure, it is not difficult at all. We are going to use several simple shapes, such as rectangles and circles and each one will be formatted in different styles.

Design an HTC

26. Learn To Create A Sleek Shiny Mouse

In this tutorial we will be showing you how to create a sleek shiny mouse from scratch using adobe photoshop CS5. Lets get started.

Learn To Create A Sleek Shiny Mouse

27. How to Draw a Realistic Mobile Phone

In this Photoshop tutorial, we will draw a realistic mobile device. Our aim is to make our work appear so realistic that it looks just like a regular product shot.

How to Draw a Realistic Mobile Phone with Photoshop

28. Blackberry Fruit phone

This is step by step photoshop tutorial that teaches you how to create original and nice blackberry glossy device concept design from blackberry photo using simple tools, filters and layer style effects.

Blackberry Fruit phone

29. Create a Sony Playstation 3 (PS3)

This tutorial teaches you how you can create a realistic looking Sony Playstation using Adobe Photoshop. Each stage is simply outlined allowing you to follow along.

Create a Sony Playstation 3 (PS3) in Photoshop

30. Create iPhone From Scratch in Photoshop

In this tutorial you will learn how to create iPhone from Scratch in Photoshop.

Create iPhone from Scratch in Photoshop

31. Make an Apple iPod Classic in Photoshop

In this tutorial you will be learning how to create an iPod classic but also you can use the same technique to make an iPod nano.

Make an Apple iPod Classic in Photoshop

32. MP3 Player Photoshop Tutorial

In this tutorial you will design an interface for a modern MP3 player.

MP3 Player Photoshop Tutorial

33. Create a Realistic Blackberry Style Mobile Phone From Scratch

In this tutorial you will learn how to create a Realistic Blackberry Style Mobile Phone From Scratch.

Create a Realistic Blackberry Style Mobile Phone From Scratch

34. Create a Vector-Based Zune with Photoshop

In this tutorial you will learn how to create a Vector-Based Zune with Photoshop.

Create a Vector-Based Zune with Photoshop

35. iPod Shuffle From Scratch

In this tutorial you will learn how to re-create an Apple iPod Shuffle by using the original image from apple’s website as a reference and using the gradient tool, layer masks and basic selection and guide techniques.

iPod Shuffle From Scratch

We had to give something from our side, so let’s start with some great tutorials.


How to Recreate Tumblr’s Layout Using Adobe Photoshop in 10 Minutes

In this tutorial we will be re-creating Tumblr’s layout. Keep in mind that we do not want to copy their design with bad intention, but only to develop our skills and would like to see if we could achieve an exact, or at least a similar web layout.


This tutorial is meant for beginners, those who are looking to grasp the basics of Photoshop on how to create web layouts. By the end of this tutorial, you will have a good understanding of how Blending Options can almost solve anything!

What are you waiting for? Let’s begin!

Final Result 

Step 1

We are starting out by creating a layout of the following sizes: 1000 pixels in weight and 900 pixels in height. Give it a blue color (#3a5975) and by using the Rounded Rectangle Tool (U) add a smaller, dark-blue shape of about 900 pixels in weight and 500 pixels in height. The top of the gradient must be a dark-blue color, and the bottom one must be identical to the background. This way we will create a nice gradient which will disappear in the background.

Step 2 


Because we are doing this tutorial for skill-developing purposes only, we will not be copying or creating their website’s logotype. I grabbed a screenshot of their logo and placed it on the top (see tumblr.com for comparison).

Step 3 

We move on to creating one of the top buttons you can see on the official Tumblr page. By using the rounded rectangle tool, create a shape of the background’s color. Apply a white inner-shadow effect as shown on the picture to achieve that top white stroke.

Step 4 

Apply a blue-ish gradient overlay. The colors used are very similar to the background, but we are doing it by intention.

Step 5 

The last touch for our button would be the stroke which is basically the most important element. You can barely notice the button without the stroke effect, that is why the color used for the stroke is a dark-blue one.

Step 6 

It is the time to create another button that you can see on Tumblr’s page. This time we will be using a bright contrast of blue. Add a black drop-shadow effect to it, and set the opacity to 15 percent which will give it a really nice and elegant look.

Step 7 

We are adding the same effect we gave to the previous button – Inner Shadow, for a white top stroke.

Step 8 

We will be adding a little bit of “Bevel and Emboss” effect to the button as well. Along with the gradient overlay effect, it will make it stand out.

Step 9 


Add a gradient overlay effect to button by using 2 variations of the light-blue color.

Step 10

Finish the button by adding a stroke effect, stroke’s opacity being: 30 percent.

Step 11 

By using the Helvetica Neue Bold font, input some text on the buttons. I decided to go with Tumblr’s text on the respective buttons which is “Sign In” and “Register Now”

Step 12 

We continue our layout by creating a search form. By using the Rounded Rectangle Tool (U), create a shape and set it’s “Fill” to 0 percent. Then apply a dark-blue, 1 pixel stroke effect and an almost visible inner glow effect. By using Helvetica Neue bold, input some text inside the search form. Give the text a dark yellow color and a 1 pixel, blue drop shadow effect (30% opacity). Grab the free IconSweets icon set by Yummygum, and find the “Magnifying glass”. Give it a dark blue color and place it near the right border of the form.

Step 13 

Get the Rounded Rectangle Tool (U) again, and create a shape of about 190 pixels in width, and 200 pixels in height. Follow the exact steps we applying to create our first button from header, the only addition this time would be a straight line each 35 pixels. The following line will divide our container into equal shapes. To create a line you can use the Line Tool (U) and hold Shift while dragging it.

Step 14 

As with the button, give our shape a barely visible white inner glow, of 3 percent. Apply a stroke of 1 pixel with an opacity of 60 percent and a dark blue color.

Step 15 

Result So Far

Step 16

In the same IconSweets 2 set, find a tag icon and give it the background color. Apply a black drop shadow with an opacity of 40% and a distance of 1 pixel.

Step 18 

Repeat the same exact steps to create another shape with 5 dividers. Instead of using tag icons, add various small images at the left corner of the shapes and input some bold & regular text. The size for it will be 11 pixels.

Step 19 

As you can notice on the Tumblr.com website, they are showcasing various postings from different people’s blogs. Near each posting you can notice the avatar of the respective author. By using the Rounded Rectangle Tool (U), create a box of the following sizes: Width & Height: 65 pixels.

Step 20 

Right now we will create the base for our postings. By Using the Rounded Rectangle Tool create a shape of 545 pixels in width and 605 pixels in height. Leave it white but apply a black drop shadow effect, with a size of 5 pixels. By using the lowercase Helvetica Neue Bold font, with a size of 12 pixels, input the a random username, near the top left corner of the shape.

Grab some icons from the IconSweets2 set, and place them at the right corner. Give them a bluish-gray color (#adb3bc). Refer to our final result or the oficial Tumblr.com website for details. Use the Rounded Rectangle Tool to create a shape of the same color, and by using the Helvetica Neue Bold font, input 4 numbers, which will represent either the comments a posting has, or the views. To finish up our posting, we are adding a big picture which almost covers the full space. Keep the image size at 500 pixels in width, and 500 pixels in height.

Step 21 

With the same font, and a size of 11 pixels, input some hashtags with text. This will show the tags the post is categorized under.

Final Result 

Now let’s create some great looking calendar.


Design an Elegant Calendar Using Adobe Photoshop in 15 Minutes

In this tutorial we are going to design a nice, minimal calendar widget in Photoshop. We are going to use some really easy techniques to achieve a beautiful final result. By combining some gray, black, and variations of different light colors, and a nice subtle texture, we will try to give the interface a grungy, minimal look.


Calendar Design – Final Result 

This is the final result of our calendar widget. Just in case you’re getting curious, use this link to download the .PSD

Step 1

 

We’re starting our calendar by creating a simple shape. It doesn’t need to be big since it will be used somewhere in a sidebar. Choose a size between 200-300 pixels in height, as well as 200-300 pixels in width. For this project I’ll go with 235 pixels high and 230 pixels wide. Apply a really subtle shadow by adding a 1px shadow, with an opacity of 50% because we are working on a dark-grey background which doesn’t contrast with a really visible, black shadow.

Step 2 

 

It is time to create the base for our date-boxes. This will be pretty simple even if it does look a bit strange. We must create a rectangular shape (somewhere around 35 pixels in height) and add a gradient overlay effect with an opacity of 6%. That is really small, but we don’t want those boxes to stand out. They will simply hold the “numbers” which will show the dates. Because we are working on a white background, you’ll have to do 6 white lines (of 2 pixels in width) which will divide each box.

Step 3

 

Repeat that action five times. We now have 35 boxes which will show our dates. Don’t worry that there aren’t 31 or less because we will also show a few dates from the previous and upcoming months.

Step 4

 

You’ll have to fill two rectangles of the same height with two different colors. We’ll give the upper one a darker color and the bottom one a lighter gray. The color of the upper rectangle doesn’t matter because we will apply a pattern effect to it later. This is an optional step, but if you make the upper bar 1px smaller so we can achieve a nice drop shadow effect later.

Step 5

 

Now apply a real drop-shadow effect to the upper bar but be sure to set the size to zero, and give it an opacity of 50% so it is more gray than white.

Step 6

 

Now we would like to make a really visible separation between the bars by adding an inner shadow with an opacity of 15%. That is really an almost visible inner shadow, but it does make a difference if you take a look at overall details.

Step 7

 

We will be adding a really nice and subtle pattern from SubtlePatterns which will add a grunge effect. You can choose any light texture from their collection as almost any will work. Also add a gradient overlay effect with an opacity of 20%.

Step 8

 

Input and center the current month in text along with the year in numbers, and give it a dark gray color . The font I used is Helvetica Neue Bold and14 pixels. Apply a drop shadow effect with an opacity of 50%. By using the custom shape tool (U), create two shapes, merge them (CTRL+E) and then duplicate it and reverse it (CTRL+T). This will indicate the previous and next month.

Step 9

 

Moving on to our empty gray bar. By using the Regular Helvetica Neue font, at 12 pixels, input the abbreviated version of week days.

Step 10

 

By using the Rectangle Tool (U), create a gray box over any “date-placeholder” and add an inner shadow effect, of about 50 percent opacity, overlay blend mode, size of 10, and distance of 3 pixels.

Step 11

 

To the same gray box, apply a darker gray stroke of 1 pixel. It will make the inner shadow more visible and will create a small border between the highlighted box and the others.

Step 12

 

Input all the dates of the current month by using the Regular weight of Helvetica Neue (12px). By using the same font, we will input numbers for the upcoming dates, as well for the last day of the previous month. Set the color for the bold numbers a little bit darker than their background.

Final Result

Click here to download the .PSD

You can finish it up by creating 2  round shapes (Use the Ellipse Tool (U) and keep holding SHIFT for a perfect circle). Set the fill for the circles to zero and then apply a 1 pixel dark gray stroke. Position them around the “previous-upcoming” shapes to enhance their look a little bit.

Yes you guess it. We are continuing with tutorials. In the next tutorial we will design nice log in form.


Create a Minimal and Super Trendy Login Interface in Photoshop

In this tutorial we are going to create a minimal login interface using Adobe Photoshop. With some simple techniques we will create a beautiful login interface. We will be using some variations of the color gray to help keep the interface as simple, elegant and minimal as possible.


While anyone can follow this tutorial, it is ideal for beginners.

Login Interface

Step 1

Create a new document 800 pixels high and 600 pixels in wide. It can be any size, but be sure to have some space to work. With the Rounded Rectangle Tool (U)  fill in a space of 320 x 210 pixels with a light gray color. This will be the base of our login interface.

Step 2

Apply a dark gray (#dbdada) shadow to our light gray base with a distance and size of 1 pixel. The blend mode must be set as “Multiply” and the opacity to 50 percent.

Step 3

Add a 1px stroke, the color being exactly the same as we used for the drop shadow effect.

Step 4

The final effect for our base rectangle will be a light gradient overlay. The colors must be white and a really light-greyish color (#f1f1f1). We want to make our gradient overlay really subtle, almost invisible, that is why the opacity should be reduced to 60-65%.

Step 5

We’re done with the effects for the base rectangle, but we should enhance it a little bit, that is why a 1 pixel line will really make a difference and won’t make it look blank and too simple. The line should be the same color as all previous effects applied, however, besides the gray line, the 1px white line must be placed exactly under the gray one.

Step 6

In the upper left corner, we will add some text. I simply wrote “Login Form” which will describe what the interface is for. While this isn’t something we really need in a Photoshop layout, this might be helpful on a live website. The text is a dark gray color, which contrasts well with the rest colors and gives the interface a minimal look.

Step 7

With the Rounded Rectangle Tool (U) create two white shapes. Apply a stroke of 1 pixel (#dbdada) and by using the same color write a random e-mail address in the upper shape (which will be used for inputting e-mail addresses) and in the bottom shape, input some star signs (*) which will show an inputted and hidden password. The font used is Droid Sans, which you can grab for free on Google Fonts

Step 8

To make it more clear what the forms will be used for, we will add some icons. I am using the YummyGum’s iconSweets 2 set all the time, and find a use for them almost in any project of mine.

Step 9

With the Rounded Rectangle Tool, create two small shapes (10×10 pixels) and apply the stroke effect with the same color we used in previous steps. Inside the upper box, with the Custom Shape Tool (U), browse for the “checked” sign you can see in the image, and place it in the center of the box. Using Droid Sans, write some text right next to the boxes

Step 10

The last touch to our interface will be a big button which will finish the “login process”. By using the Rounded Rectangle Tool (U) create a shape of about 110 x 35 pixels, and make it a dark-gray color (#6d6d6d). Apply some white shadow, and don’t forget to change the Blend Mode from “Multiply” to “Normal”.

Step 11

Apply an inner shadow effect to the button, the size and choke being 0, the distance 3 pixels, the opacity 30% and the blend mode: overlay.

Step 12

A final touch for the button would be a dark 1 pixel stroke (#595656).

Final Result

In the next section we will create nice natural effect on some text. Let’s rock!


title-naturalEasy Brush Text Nature Effect: Tutorial

Today we will learn how to use text layer letters as paths to create amazing effects. You can use this trick in many different ways, just changing brushes and brush options. Also we will learn how to use pen tool again together with brush tool and change different options.

 


I tried to write everything pretty detailed, so everybody could understand and also added *.psd version for everybody to check out, if something in Your work is wrong. Check finished result on the bottom of this page and good luck completing this tutorial! So join with me to  these 10 simple steps!

Step 1

Open Photoshop and create a new document 1000x800px. Use radial gradient to add background as the picture below.

Use RGB color : #051601 and black #000000.

gradient

gradient-background

 

Step 2

Now write some text in the center of the document, I used verdana font,207pt, text “Natural” – no matters which color You use, we won’t be using it anyway, just shape of it. After that increase tracking between the letters, by selecting all text and using CTRL+ Right arrow or CTRL + Left arrow to decrease. We do this so later we could more easily see the text, while it’s covered with brush.

work-path

Step 3

So let’s use now letter shapes and convert it to path. You can bring up paths panel – Windows–>Paths. Right click on the text layer and choose option Create Work Path. Hide now Natural text layer, create new layer with commands CTRL+SHIFT+N. Your result should look like the same as in the image below.

switch-off-text-layer

Step 4

Ok, now select brush tool, I wanted to create natural effect so pick any of those natural and floral brushes, I used Suddenly Spring beautiful brushes, download them, just double click on the *.abr file to get brushes loaded into the photoshop. Now press B(brush) and F5(to get brush panel). I added roundness so the brush would rotate along the path. Use brush size ~60px

roundness

Step 5

And now with the new layer selected brush stroke the path. After that with CTRL+H switch off path outlines.

stroke-path

You should be result like mine, so in the next step in the blending options we will be changing colors to get natural effect:

natural-grey

Step 6

In the blending options select Gradient Overlay, change rotation angle to 0 and add gradient with these options:

rotation-angle

gradient-green

Your outcome should look like mine now, looks pretty cool already? :) :

natural-green

Step 7

In paths panel, delete natural text path or just create new path.

Now lets add some more effects, select pen tool and create path through the letters like me:

path-pen-tool

Now switch to the brush panel pressing B button and then F5 to get brushes panel.

Use 7px soft mechanical brush and add the same settings as in the images:

brush-1

brush-2

brush-3

Okay, now again switch to Pen tool(P) and right click on the path–>stroke path:

stroke-brush-path

Now right click again on the path and click delete path.

natural-brush

Step 8

Change the color and add outer glow in the blending options, to maximize the effect. I used these settings:

Outer glow: #45ff13

outer-glow

Color Overlay: #d1fad1

color-overlay

 

Step 9

Select Eraser tool (E) and erase parts like in the picture below:

erase-parts

Step 10

Download this grass image and paste it in the document above the background and set blending to overlay, resize it to fit Your needs.

This is finished result, I hope You will find this tutorial and method useful for Yourself.

Download *.psd version to compare the result! Hope You enjoyed this one too!

Click on the image to view it on the full size.

finidshed-nature

Download PSD version

Still not enough? We thought so. Let’s create some music player.


Create A Sleek Music Player In Adobe Photoshop

In this tutorial you’ll learn how to make a beautiful music player in Adobe Photoshop. It is important that you take the time when you are designing and do not rush things. I focused on the details so I invite you to look at every little thing carefully and think about why I did it and how you can learn from it! Good luck!


Final product:

What you’ll need:

PSD Download

Prepare your tools

Okay so let’s begin! The canvas size depends on the size of your music player, my canvas is
1000 x 500px. Please make sure that you are using 72dpi before you create your new canvas.

You should have a nice canvas size to work with now, but if you’ve looked closely at the end
result, I’ve used a pattern on the background. Here’s where you’ll need the subtle patterns, load
the .pat file and pick a pattern you like and reduce the opacity.

Now that we know what the background looks like, we can make a nice color palette.

Start designing the player!

Let’s start by creating the base of the music player. Grab your rounded rectangle tool (U) and
make sure that the radius is set to 3px. I’ve used a gradient for the stroke because the bottom of the player would’ve ended up looking blurry.

These are the blending options I used:

  • #000000 drop shadow

  • #FFFFFF inner shadow

  • #f7f7f7 to #ebebeb reversed gradient

  • #bcbcbc to #d4d4d4 stroke gradient

You should have a pretty nice background for our player now, but there’s something missing. So let’s make it more glossy!

Select the rectangular selection tool (M) and make a selection at the bottom of the music
player’s background. Now that you’ve made a selection we can select the gradient tool (G), grab one color for the gradient and keep the other one transparent to accomplish a nice glossy effect.

You can deselect (cmd + d / ctrl + d) your selection after you made the gradient, since the layer underneath the gradient has a gradient overlay it’s not possible to make a clipping mask. So what we basically do is make a selection of the layer underneath and select inverse, you can
make the selection by ctrl or cmd click the box which I gave a red stroke.

What you should have this far

Lets make the album cover

You will need to use the first two colors of our palette to make the gradient of the background of the
album cover. Duplicate the background layer of our music player and make sure you put the
layer above the player’s background and glow. Rasterize the layer and make a nice square
selection, select inverse and press delete. You should have something like this:

But hey – wasn’t the background of the album cover blue?! Yes it is, so now we have to disable the layer styling and start adding new blending options.

  • #ffffff inner shadow

  • #2961aa to #45a6fa gradient

  • #1c5297 stroke

Now that we have the base ready we can design the picture frame, just grab your rounded
rectangle tool and make a nice square frame. Please make sure that you give the picture frame area to breathe, I gave my cover a 20 pixel margin on all sides. We will have to use the blending options panel again to give the picture frame a nice border.

  • #3379c6 drop shadow

  • #2961a9 inner glow

  • #164c91 stroke

Great! the frame is ready so now we can add a nice picture of Nadia Ali, just open the image with Photoshop and create a clipping mask, resize the image where needed. But we are not ready yet, we still need to add the glare, select your pen tool and make a nice curve, fill the path (#FFFFFF) and reduce the opacity to 20%.

The last thing you have to do is make a group of your album cover section, select the layers that are related to the album cover and press cmd or ctrl + g, rename to group to whatever you want.

What you should have this far:

Making the controls

What is a player without controls, right? So we are going to make a nice play/pause button, previous and next buttons.

Select your Ellipse tool(U) and drag a nice round circle, make sure that you hold shift. This first circle will be the blue stroke around the pause button, the requires some blending options.

  • #000000 inner glow

  • #2961aa to #45a6fa gradient

  • #1c5297 stroke

Okay we have a nice blue circle now, just make a new circle on top of that circle with some
spacing on all sides. this circle will only need a gradient overlay.

  • #e8e8e8 to #f6f6f6 gradient


Now you have to add a nice icon to the button to make it look like a play/pause button. Add a nice gradient and inner shadow to the icon.

  • #000000 inner shadow

  • #e8e8e8 to #f6f6f6 gradient

The play/pause button should be done by now. Now we’re going to make the previous and next buttons, these buttons require the same styling as the play button, so copy the layer style and paste it on those icons.

Also add these layers to a group and call it ‘Controls’.

What you should have this far:

Give the song a name

This step only requires 2 layers. This step can be accomplished with one single layer but I
personally prefer to make two separate layers.

The text color of the artists & song title is #2c69b4, the font size of the artists is 18pt and the font size of the song title is 12pt. Both are Helvetica neue 55 roman, and both layers have a white 1px drop shadow.

What you should have this far:

Making the love and repeat button

Make the love button

Let’s start with the love button, the love button has a nice orange gradient when hovered or
activated. Make a button with a nice size with the rounder rectangle tool, please be aware of the icon that we have to be put in later.

Now that you have a rounded rectangle shape you’re ready to give it some blending options.

  • #FFFFFF drop shadow

  • #FFFFFF inner shadow

  • #db5825 to #ea6733 gradient

  • #bd530d stroke

You should have a nice orange button if you’ve done this, but it’s not shiny enough, so we are going to repeat the step that we did to make the glow for the background and it should be fine.

Now it’s time for the icon to take place, take the custom shape tool (U) and find the heart shape, make sure that you hold shift while you make the icon. After you’ve done that, make sure that it’s white so that we can add a nice inner shadow to the icon.

  • #bf540f inner shadow

Make the repeat button

Okay so now we have the love button. Add the layers that belong to the love button to a group, rename the group to ‘like button’. Duplicate the group and call the group ‘Repeat button, because the button is almost the same as the love button, we only have to redo some blending options.

Remove the heart icon and add a nice repeat icon to the button, also this icon has to be white (you can always make it white by color overlay).

On the button:

  • Replace inner shadow color with #FFFFFF and reduce the opacity to 25%
  • Replace the gradient with #d3d3d3 to #e2e2e2
  • Replace the stroke color with: #c1c1c1

On the icon:

  • Replace the inner shadow color with #c1c1c1

What you should have this far:

Make the track length bar

The track length bar we’re going to make has a stream, buffered stream and a played track. But we are going to start off by writing the track length text.

The track length text is written in 2 different colors the passed time text is #717171 and the
complete track length is #2c69b4. Add a 1px white drop shadow to the text and you’re done.

Total track

Make sure that you give this bar 20px margin from both sides to make it align well. Make a
shape with the rounded rectangle tool.

  • #000000 inner shadow

  • #000000 inner shadow

  • #e0e0e0 to #f1f1f1 gradient

  • #f8f8f8 stroke

Buffered track

Make sure that this bar is 2px smaller then the total track bar because of the border that we’ll add. Make a shape with the rounded rectangle tool. Make sure that you change the angle of the gradient to 180 degrees.

  • #FFFFFF inner shadow

  • #e8e8e8 to #f6f6f6 gradient

  • #8faed6 stroke

Played track

Make sure that this bar is 2px smaller then the total track bar because of the border that we’ll add. Make a shape with the rounded rectangle tool. and copy the layer style of the buffered track layer. Make sure that you change the angle of the gradient to 180 degrees.

  • Crank up the opacity of the gradient to 100%
  • Give the stroke the color #1c5297

What you should have this far:

Design the tracklist

Designing the background of the track list is simple, it’s simple because you can just copy the layer style & glow from the background of the player. Just make a wrapper for the theme songs with the rounded rectangle tool and paste the layer style on the layer and don’t forget to add the glow.

Now we only have to display the songs, make another rounded rectangle and make sure that you have 20 pixels free space from both sides. This one will look a a bit different from the others, so you can’t copy a layer style. Please make sure that the background of the shape is white, otherwise the gradient won’t work.

  • #FFFFFF outer glow

  • #e1e1e1 inner glow

  • #d7d7d7 to #b4b4b4 reversed gradient

  • #d4d4d4 stroke

Add the number of the song, and full name of the song in that rectangle and give the text the color #717171 and 1px white drop shadow. This is the same styling that you need to add to the track length indication.

Duplicate the love button and place it in the track’s shape, copy all the layer styles of the repeat button (or you can leave it this way if you want it to stay orange).

Add all the layers that belong to the track to a group.

What you should have this far:

Duplicate this group 3 times and place them underneath each other with a 10 pixel margin. You are almost done now, the only thing that we need to do is design the current song indicator. Pick one song and do the same thing as we did with the background for the album cover and add a Now playing text. This text is written with Helvetica neue 65 medium, has a white color and has a 1px #1c5297 drop shadow.

Yay we’re done! I hope you’ve enjoyed reading this tutorial and I highly recommend you to
make your own suggestions to make sure you’ve understood everything well.

Final result

And we are finished! I hope you love this final outcome and learned a lot throughout this tutorial!

Next up Wii controller created with Photoshop.


How to Create a Sleek Wii Controller

Today we will be creating one of the most beautiful and evolutionary product. The Wii is a video game system made by Nintendo that has a unique interface that forces players to get physically involved in the game playing action. For creating a Wii Controller in Photoshop, you just need to know the basics of Photoshop to get a great result.


Step 1 – Background

Let’s start by creating a new document of 30 by 50 inch.

Then create a layer, fill it (with any color) and add this Gradient Overlay in the blending Options.

Step 2 – The Wii Shape

Create new layer, select the Rounded rectangle Tool (U). After then,  set radius to 22px and create the Wii shape.

I have used following blending options which you can see to get exact result.

Step 3 – Glow

For a little bit glow, create a new layer and then draw a straight white line like I did.

Select the new layer, now hold down CTRL and click on the Wii Body layer thumbnail OR select the Wii layer and go to Select, Load Selection and hit okay.

Now select white then go to the Brush Tool (B) and select the Hard Round brush. Change the Master diameter to about 600 px and click one time like I did to create an inner glow effect.

Now deselect your selection by holding down Ctrl + D. Go to the layer and set the Opacity to about 50% then select your eraser (E) set its Opacity a little bit down like you want and erase a little bit of your glow like I did.

Step 3 – Speakers

Create a new layer. Set your color to the color code: #3a3a3a and create something like this using your brush tool.  (in the picture you can see the sizes of pixels i used to create the circles).

Now duplicate the layer (Ctrl + J) then set these blending options for the duplicated layer.

And now create the duplicated layer below the other layer. so it will be like this…

Step 4 – Player LEDs

Your speaker is done. Now let’s begin with the LEDs. So create a new layer and at the bottom of the Wii create 1 square using the color (858585#) and duplicate it twice.

To give a glow, create a new layer, create a square and add this blending options for it.

This is what you will get.

Now create a new layer and set the brush tool to 3px

For the first square set 1 circle, for the second set 2 circles, for the third  set 3 circles and for the fourth set 4

For this you need to select the same color of the Wii Body. Now because you can’t see what you are doing because it’s the same color of the Wii, select the Color Overlay in its Blending Options to see what you are doing. After you finish Deselect the Color Overlay and add this Bevel Emboss.

Below is the screen shot of blending options.

Step 5 – Power button

For the power button create a new layer and create a small circle like i did using your preferred tool. (the color doesn’t matter)

and add following Blending Options for it

Now you should have something like this…

Now to create the POWER symbol create a new layer, select a gray color , create a small circle and fill it like below

then create a smaller  rounded selection

and delete it.

Create a selection of a vertical rectangular

and delete it

now create a smaller vertical selection and fill it

if you did it good, you should have something similar like this.

then set these blending Options.

Now select the Text Tool (T) and write POWER using the font: Kartika (the color i used for the font is 8a8888#)

Step 6 – Logo

Let’s go down again to write the Wii logo.  The logo is just a text, so write “Wii” using your text tool with the color #989898 and using the Font: Sony Sketch EFF.

Step 7 – Home button

create a new layer and create a circle similar like this above the speaker

then add these blending Options.

Now duplicate this layer and set  this Blending Options for the duplicated layer WITHOUT deselecting the other settings.

then set the duplicated layer behind the original layer.

Now create a selection around on one of the 2 layers, create a new layer, select “white” and brush like we did in the previous step.  (STEP #3

Now create a new layer and create a small house  and fill it with the color #31befa

Write below the button, the word “HOME” using the font: Kartika OR Simplified Arabic with the color 878686#.

Step 8 – Minus (-) Button

And add these blending options for it.

then as we did in the previous step. you can do it to create a glow effect.

Then create a new layer and create a small horizontal rectangle line with a gray color

Step 9 – Plus (+) Button

create a new layer, and create a circle like this, but this time at the right side of the HOME button and do the same settings as we did in the previous step. but now create a “Plus at the end.

Step 10 – the A button

Now create a new layer above the home button and create a bigger circle and fill it.

then add these blending options.

Now you should have something like this.

Then create a new layer and create a glow effect like i did below

now create a new layer create just a little bit smaller selection than the button, fill it with white and erase some parts like i did

Now write a Capital Letter “A” with  Grey color. For the font use: Simplified Arabic.

Step 11 – the 1 and 2 buttons

Now create a new layer, create a circle and fill it with gray.

then duplicate it and move the duplicated a little bit add the right (The selection is created just to show you what i mean)

After that, add these blending options.

And create a glow effect for it.

then write number “2” on it. i used the font Kartika.

now duplicate this layers and write “1” in place of “2”.

you can move the gray circle layer of the other layer a little bit to make it looks different.

Step 12 – The Control Pad

To create the control pad shape select the rounded rectangle tool set it to 2px. Create new layer and follow the picture steps…

create a vertical one…

then a horizontal one.

then add this blending option.

Now if you want, you can create a new layer and brush a little bit on it for a cool glow.

Then create a new layer again to create the 4 lines like this.

Step 13 – Optional

To make this Wii controller like a real one, you can go back to the Power symbol and change the gray color to red.

so let’s go to the Power symbol layer, and change this blending options

Now to get some shadows and some glow, create a new layer and brush with a dark gray color over here.

Step 14 – Reflection

Now for the final step, let’s select all the other layers except the background and holding down “ctrl” or “shift” and selecting them. Then right click on one of them and select “merge layers.  Then duplicate the layer (Ctrl + J) and go to Edit, Transform, Flip Vertical, set it below the other layer. and bring the opacity a little bit down.

and this is the end.

Let me know if you have some questions and I will answer you in comments section.

Editorial Team

Written by Editorial Team

6 Comments

  1. Russell Hargrove January 7, 2016 at 17:33

    Good, Easy to understand.

    Reply

  2. This is a great collection of tutorials! Thank you. These will be very helpful.

    Reply

  3. Good tutorial. It is very much helpful for the beginners.

    Reply

  4. Nice list of tutorials :) I think there is so much to learn about photoshop, and the average user probably uses like 3% of it!

    Reply

  5. Exelent lessons. Thanks!

    Reply

  6. i would love using photoshop but it costs so much and it looks so cool you should do a blog about making a website webs.com you can make free websites on

    Reply

Leave a Reply