Wordpress has long been one of the most favored blogging platforms, our very own Design Reviver runs on WordPress. Every web designer knows that whether you are creating a mock up for a website or for a blog, Adobe Photoshop is the most used program. Today we have collected some of the best Photoshop tutorials for creating stunning WordPress themes.

How to create a unique WordPress theme

How to create a WordPress theme in Photoshop

How To Create WordPress Themes From Scratch Part 1

Minimal WordPress Theme Photoshop Tutorial

How to build a custom WordPress theme

Design a creative WordPress theme

How to Build a Custom WordPress Theme from Scratch

Create a Typography bases WordPress theme

Create an Elegant Photoshop (PSD) Template for WordPress

http://www.webdevtuts.net/photoshop/create-a-nice-clean-blog-layout-in-photoshop/

Corporate WordPress Style Layout

The post 10 Great Photoshop tutorials for WordPress themes appeared first on Design Reviver - Web Design Blog.

The week is coming to an end and that means it is time for us to look back on the week that passed, the best design news, resources and other goodies. This week we look at CSS3 and HTML5 tutorials, what journalists need to know about web design, jQuery mobile for beginners, as well as great examples of typeface combinations in web design.

30 Really Useful HTML5 Tutorials

Almost everybody is talking about latest enhancement in web industry. Yes, it’s HTML5 and CSS3. Really these languages expanded the possibilities of web design. There are lots of web designer s and developers who have started using HTML5 into their designs. Here we’ve rounded up 30 really useful HTML5 tutorials that will definitely help.

Vexing Viewports · An A List Apart Article

“The Web is Agreement.” Jeremy Keith’s eloquent statement neatly summarizes the balance that makes it possible for us to build amazing things. Each week, new devices appear with varying screen sizes, pixel densities, input types, and more. As developers and designers, we agree to use standards to mark up, style, and program what we create.

What journalists need to know about Web design

Fifty milliseconds. That’s how quickly visitors can form strong, long-lasting impressions about your news or information website. But they aren’t sizing up the quality of your content or the sophistication of your code. They’re making nearly instantaneous, mostly subconscious judgments about how your work has been designed.

50 Helpful Typography Tools And Resources

We love beautiful typography, and we appreciate the efforts of designers who come up with great typographic techniques and tools or who just share their knowledge with fellow designers. We are always looking for such resources. We compile them, carefully select the best ones and then prepare them for our round-ups.

25 Web development resources to help you create better websites

As a developer I am always on the hunt for time saving resources, anything that can save me just a few minutes of time is a great help in an already hectic schedule. Compiled here is a list of 25 resources that are bound to make your life a little bit easier

Top 10 Free Online Tools for Creative Minds

In case you missed it, WordPress release 3.4 included a very exciting new development: the Theme Customizer. This allows users to tweak theme settings using a WYSIWYG interface and customize the theme so it includes the colors, fonts, text — and pretty much anything else — they want.

50+ Examples Of Drawings and Illustrations in Web Design

For a quite some time, web designers have used hand drawn illustrations and typography to give websites a non-digital look and feel and a more human touch. Right now, however, there is a strong web design trend coming with focus on keeping interface design minimalistic and flat.

A Complete Guide of jQuery Mobile for Beginners

There’s no doubt about it. Wherever developers look and whoever they talk to, mobile is at the top of the list. Talk to a C-level executive, and the conversation turns to mobile, and the question “How do I get me some of that?” comes up. Talk to other developers, and they tell you they’re targeting mobile devices. Mobile has become a big deal as smartphones have taken hold in the consumer marketplace.

10 Superb CSS3 Tutorials for Awesome Design

Many designers all over the world believe that CSS3 is a technique which has unbelievable potential which will in the future be used to create wonderful designed websites. At present, it is not being used variedly all over the world due to a number of limitations – obsolete browsers being one of them. In this post we’ve collected 10 Superb CSS3 Tutorials for Awesome Design, this can be proficiently functioned using markup, HTML, and some improved properties of CSS3.

40 Best Typeface Combinations in Web Design

When it comes to prints or Web Design, typography is one of the most important part. So selectng the right type of typography for your web design is one of the most crucial part. Keeping the small textured detail in mind while designing a website can sometimes be enough to get amazing results.

Providing responsive images with Drupal

In this tutorial, we’ll be solving this problem four times, thanks to the latest version of the Drupal CMS, 7, and its vast, user contributed module library. We’ll be looking at the adaptive image module, the adaptive image styles module, the client-side adaptive image module and, finally, the responsive images and styles module. These represent great solutions to optimising your Drupal website for bandwidth starved mobile devices; all modules used employ the techniques listed above.

The post Weekly News Roundup – 15 March 2013 appeared first on Design Reviver - Web Design Blog.

The week is coming to an end and that means it is time for us to look back on the week that passed, the best design news, resources and other goodies. This week we look at new frameworks for developers, flat design vs. Skeuomorphism, as well as take a stroll down Windows and Mac OS memory lane, furthermore we look at why there is no mobile internet and 45 HTML tutorials you need to see.

10 Recently Released Frameworks for Developers

A framework is basically regarded as a software application which aids developers in quickly designing and developing dynamic websites. With the advent of HTML5 and CSS3, design and development is becoming an easier endeavor for nearly everyone.. A well structured CSS framework serves as the basic conceptual foundation by which one can use as “scratch” for their web-projects. In order to save all of you code geeks some time and frustration, we have collected some of the latest and most recently popular frameworks which will assist you within your coding undertakings and make your life somewhat easier, and also save you time so you can step out and do more things you enjoy in life ! We hope these frameworks will serve your code purpose and projects.

5 Brilliant Web Form Designs You Should Know About

Web forms are everywhere…but people hate them, I’ve got a friend who works in the tech support of a hosting company, he says that every day their department receives from 10 to 15 emails about errors in web forms. According to tech support web forms are the nastiest things on any website. They break for no reason, and when they get fixed they break again. If you’re designing web sites, it’s likely forms will be there, whether it is a simple feedback form or a supercharged web application. In this article we’ve united 5 tips for designers/developers.

7 Usability Mistakes That Will Kill Your Online Sales

Right now, on your site, 7 deadly usability mistakes could be hacking and slashing away at your sales… And you probably don’t even know they are there. Fortunately, there is a lot of research in the UX (user experience) and eye-tracking space, and today you’re going to get these insightful studies served up in laymen’s terms, allowing you to incorporate their findings into your site’s design and interface.

Flat Design and Skeuomorphism

.Flat design existed long before it became a buzz word. It’s just finally been packaged. When talking about “flat design” we’re talking about design that is simplified and leaning more toward minimal in aesthetic. Besides being a mouthful, skeuomorphism is defined as “a physical ornament or design on an object made to resemble another material or technique.” You could call it an imitation, or a representation. For comparison the iPhone 5 versus Nokia Lumia – Skeuomorphic vs. “Flat Design” respectively Most noticed in Apple’s popular skeuomorphic treatments such as the calendar, video, camera, passbook and newsstand icons. The shiny, glossy nature is one aspect – but the literal representation of an object is a recurring theme throughout the interface and the applications themselves

There Is No Mobile Internet!

It’s time to stop thinking about the Internet and online communication in the context of a device, be it desktop, tablet or mobile. Advances by Google and Apple have heightened consumer expectations, which now require stricter focus from us to create seamless online communications — communications that work everywhere and that get their point across.

35 Awesome Swirl and Ribbon Photoshop Brushes

Just like fonts, when it comes Photoshop brushes, you just cannot have enough of them! In fact, the Brush tool in Photoshop is, quite unarguably, the designer’s best friend. Today, we bring to you an amazing selection of 25 awesome swirl and ribbon Photoshop brushes. So go ahead, check them out, and get ready to add some style to your designs!

Choosing the best custom fonts plugin for WordPress

Custom fonts have swept the web, starting with Flash & Javascript based solutions such as sIFR and Cufon. Next came @font-face and high quality hosting services such as Google Web Fonts, Typekit and Fonts.com. Whichever you choose, you’re eventually going to have to install it on your website, and if you don’t want to take the path of installing it yourself, there are a plethora of plugins that can help you.

Photoshop Touch for Android and iPhone Brings Simple Photo Editing to Smartphones

Adobe released its Photoshop Touch app for smartphones today. The app has the same basic features as the iPad and Android tablet apps released last year, including layers, fills, selection tools, and plenty more. Photoshop Touch works surprisingly well on the smaller touch screen. You can edit photos, crop, and retouch.

 45+ HTML5 Tutorials – Start Modern Web Development Today!

So what is HTML5 and should you start learning about and use it in your projects? Answer is simple and a big YES! A good way to get started is to work yourself through some HTML5 tutorials and learn from experienced web developers. It is also an option to look at HTML5 templates and see how they have been developed; you may even find a solution to quick-start your website project.

Pixel Dropr Lets You Create Icon Sets in Photoshop

Pixel Dropr is a Photoshop plugin created by UI Parade which allows designers to create collections of icons, illustrations, photos, buttons and other elements that can be draged and dropped to any PSD file. The concept behind the Pixel Dropr panel is simple: certain elements — particularly UI elements, like buttons — are often used across documents, and used multiple times in each. In cases like these, having a quick way to group, reuse and share designs can be quite helpful.

Operating System Interface Design Between 1981-2009

A Graphical User Interface (GUI for short) allows users to interact with the computer hardware in a user friendly way. Over the years a range of GUI’s have been developed for different operating systems such as OS/2, Macintosh, Windows, Amiga, Linux, Symbian OS, and more. We’ll be taking a look at the evolution of the interface designs of the major operating systems since the 80′s.

The post Weekly News roundup – 1 March 2013 appeared first on Design Reviver - Web Design Blog.

In part ONE we presented the first 10 in a collection of 20 great HTML5 and CSS3 tutorials.  Everyone agrees that tutorials are the best way to learn something new and stay up to date with the latest changes in the industry, so we have compiled a list of can’t miss tutorials. Let us know if you think we forgot a cool tutorial!

How to Create an Upload Form using jQuery, CSS3 and HTML5

An HTML5 Slideshow w/ Canvas & jQuery

Learn CreateJS by Building an HTML5 Pong Game

How To Create a Pure CSS Dropdown Menu

What You Need To Know About The HTML5 Slider Element

HTML5 Tutorial: How to Build a Single Product Page

Create HTML5 audio visualizations

Full CSS3 HTML5 Contact Form with No Images

Create Your Portfolio Gallery Using HTML5 Canvas

Create an HTML5 Canvas Tile Swapping Puzzle

The post 10 Can’t Miss HTML5 and CSS3 Tutorials – Part 2 appeared first on Design Reviver - Web Design Blog.

Welcome to our new series Photoshop 101.

Each post will feature a new photoshop tutorial. This week we will focus on Layer Masking ability and what it can do to your designs, inspiration and work flow.

For every beginner working with Photoshop it can at first seem quite daunting. However, this doesn’t have to be the case. Photoshop is one of the most powerful pixel pushing tools you can ever put your hands on. The tools available is more then enough for anyone to be able to create, modify and transform whatever you want into anything you can think of.

Layer masks can be found in software’s like Illustrator and Flash to name a couple but it’s really in Photoshop that you can really utilize its full power and technique.

Situations where you would be using Layer Masks instead of altering your images is everything from simple content management and interface design where you want to hide or manage a constructive design or a complex compilations where you don’t want to destroy, alter or delete parts of the images you are working with.

In this article we’re going to take a closer look at one example where we’ll be using Layer Masking to create a compilation of images in a really simple and effective way.

Tutorial

Let’s start by creating a work area measuring: Width: 300 and Height: 300 and set the background color to Black (#000000).

Create a new layer on top of the background layer and name it ”Orb”. In the new layer and in the middle of the work area create a circle measuring Width: 200 and Height: 200 using the ”Elliptical Marquee Tool”. Fill it with a Dark Purple color (#8600AC) using the “Paint Bucket Tool“.

Let’s go ahead and add some orb looking effect to the circle we’ve just created. With the ”Orb” layer selected right click the layer and select ”Blending Options…”

In the list to your left select ”Bevel and Emboss” and enter the following settings:

Alright, so we now have an orb that we can now start to work with. Before we start adding gloss and glow details to our orb we are going to use ”Layer Masking” to create some lightning/electricity rods inside the orb for a much more unique effect.

Create a new layer and call it ”Lightning”. Choose the ”Brush Tool” and select the ”Fuzzball” brush in the list at the top of the screen. Also make it size ”340 px” so that we get a good sized lightning effect.

**If you don’t have the Fuzzball brush you can download it here.**

In the newly created ”Lightning” layer put the ”Fuzzball” imprint at the top of our ”Orb” using the color White (#FFFFFF). Don’t worry about the streaks outside the ”Orb”. This is what we will be using ”Layer Masking” for in the next step.

After adding the ”Fuzzball” and before we’ve converted the layer into a ”Mask” layer you should have something looking like this:

Now right click the ”Lightning” layer and select ”Create Clipping Mask”. As you can see the layer now hides whatever is outside of the circle underneath it. We will now be able to move around our ”Lightning” layer to adjust it to the ”Orb” without having to delete, alter or damage any of the content in the layer.

Move the ”Lightning” layer around until you feel satisfied with the location of it at the top of the ”Orb”. After aligning it you should now have something looking like this:

As you can see masking has a huge advantage over altering your image. This way you can always be sure that your image is preserved even though everything is not showing.

To wrap it up, let’s add some gloss and glow to the orb just to make it a little bit more advanced.

Create a new layer above all the other layers and name it ”Gloss”. In the new layer and at the top of the orb create an oval circle measuring Width: 110 and Height: 70 using the ”Elliptical Marquee Tool” and fill it using the ”Gradient Tool”. Use the color White (#FFFFFF) and make sure you have the gradient selected to ”Foreground to Transparent” in the menu at the top of the screen.

We should also go ahead and add an effect making our orb look somewhat transparent and we can accomplish that by adding another oval circle to the bottom of the orb.

Create a new layer above the ”Gloss” layer and call it ”Bottom Gloss”. Again using the ”Elliptical Marquee Tool” go ahead and create an oval circle slightly above the bottom with the measures Width: 60 and Height: 30. Fill it using the ”Gradient Tool” again with the White color and the ”Foreground to Transparent” setting. We need to set the ”Opacity” of this smaller circle so go ahead and change it to ”40%”.

We also need to create a kind of a ”Surface” to the orb making it look like it is made out of glass. We can achieve this by adding yet another layer with some glossy features.

Create a new layer above the ”Gloss” layer and call it ”Glass”. In the new layer create a circle measuring Width: 200 and Height: 200 (the exact size of our orb) using the ”Elliptical Marquee Tool”.

With the selection still active, hold down the ”ALT” key and deselect 2/3 of the top of the selection. You should end up with a selection looking something like this:

Fill the selection you now have with the same ”Gradient Tool” and the color White, just like we did when we added the Gloss to the orb. This time begin from the bottom just like you did with the smaller oval circle at the bottom of the orb. We need to change the ”Opacity” of this layer as well so go ahead and change it to ”25%”.

Now we have a slightly glossy transparent surface of the orb and to top it off we can just go ahead and add some glow to it as well.

Select the ”Orb” layer and right click it. Choose ”Blending Options…” and then choose ”Outer Glow” in the menu to the left. With it selected insert these settings:

After adding it and after you’ve gone ahead and fine tuned your settings you should now have something looking like this:

There! Well, as you can see the Masking is pretty powerful and it makes for a great time saver. Instead of altering your images you can go ahead and just add masking and move around your images within those masking layers until you are completely satisfied and have the look that you are after.

I hope you have enjoyed this tutorial on how to use some of the tools in Photoshop especially the “Masking” feature.

The post Photoshop 101 – How to Work with Layer Masks – From Beginner to Pro appeared first on Design Reviver - Web Design Blog.

The week is coming to an end and that means it is time for us to look back on the week that passed, the best design news, resources and other goodies. This week we look at great examples of Flat Web design, the 10 commandments of Modern web design, and introduction to creating sliders, as well as an interview with the guys behind the Pixel Perfect Precision Handbook.

Flat Design: 17 Examples Of Flat Web & App UI Designs

Early 2013 has seen a rise in some pretty interesting discussions on the use of ‘flat web design’. Flat design seems to be causing a slight stir amongst the design community right now, arguments for and against the flat design trend are often lively and heated. Flat Web Design? Firstly, flat design in the case of this article is referring to either app or UI web design – NOT housing or apartment decoration. Flat design rather simply means your web or app design contains minimal use of heavy gradients, bevels, drop shadows or any form of element that would provide considerable depth to the user interface.

10 Tools for Creating Infographics and Visualizations

asel.ly is another free web-based tool for creating infographics. You cannot create graphs using real data with this tool, but its really good for conceptual visualizations and storytelling. It has a beautiful user interface and the themes you can start with are gorgeous.

10 Commandments of Modern Web Design

Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius — and a lot of courage — to move in the opposite direction. Albert Einstein I would argue that a huge part of that genius Einstein refers to can be found in clarity of purpose and principles.

7 Rules for Creating Effective Slides

The key to a great presentation design is to create visually stunning yet simple slides that your audience can quickly comprehend. Most people can’t effectively read and listen at the same time. The presentations that really stand out allow viewers to avoid reading lots of text by communicating information visually. The following presentation by Alex Rister takes a look 7 fundamental rules in creating slides: Introduction to Slide Design.

5 innovative examples of user interface design

In these days of intuitive touchscreens and intelligent apps, your audience is not going to put any work into using your product, app or operating system – they’ll expect it to be obvious. No one is going to read a lengthy, detailed instruction manual; instead, the user interface should guide your customer through to achieving their goals – doing all the hard work so the user doesn’t have to.

Tools and Tips on how to Optimize Images for the Web

The time a page takes to load is something every designer worries about, or at least is something that every designer should worry about. It doesn’t matter if the layout is nice and beautiful if it doesn’t function properly. Since images can be pretty heavy, this is certainly an issue to keep an eye on. And this is why today we gathered a few links here to show you some tools and articles that will help you with this issue.

10 PowerPoint Alternatives That Make Meetings Fun

This article presents 10 ways to make your meetings go by a little faster, everyone is tired of seeing the same boring PowerPoint template and it is time for something new.

50+ Clean, Simple and Minimalistic Website Design Examples

One of the fastest ways to set up minimalistic websites is to build it on top of WordPress and one of the many great simple templates available for this popular publishing platform. In this article, I have collected more than 50 Minimalistic website design examples you can use as inspiration.

MIHTool, the iOS web debugger

If you are a web developer, the strangely named MIHTool (MIH for “make it happen”) will make you happy. If you mostly work on mobile web applications, this will change your life. It’s the missing developer tool you wanted for so long, and Apple didn’t give you.

Sketch VS Fireworks

In response to many who have suggested in my blog Sketch VS Photoshop that Fireworks is a great alternative to Sketch, I decided to download it again after many years.

Pixel Perfection Precision handbook interview

Last week we had a chance to interview the guys from ustwo, to discuss their latest book “Pixel Perfect Precision Handbook”  You can download it here, And of course be sure to follow @pppustwo on Twitter for all the latest pixel news and advice!

The post Weekly News Roundup – 8 February 2013 appeared first on Design Reviver - Web Design Blog.

Today and next Wednesday we will be presenting a collection of 20 great HTML5 and CSS3 tutorials, 10 each week. Everyone agrees that tutorials are the best way to learn something new and stay up to date with the latest changes in the industry, so we have compiled a list of can’t miss tutorials. Let us know if you think we forgot a cool tutorial!

Design & Code a Cool iPhone App Website in HTML5

Orman Clark’s Vertical Navigation Menu: The CSS3 Version

How To Build a Handwritten Letter Style Contact Form

An HTML5 Slideshow w/ Canvas & jQuery

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements

Apple-like Login Form with CSS 3D Transforms

How to Create an Image Slider using jQuery and CSS3

HTML5 Clocks Tutorial

Circle Hover Effects with CSS Transitions

Creative Web Typography Styles

The post 10 Can’t Miss HTML5 and CSS3 Tutorials – Part 1 appeared first on Design Reviver - Web Design Blog.

Photo Manipulation is an art which makes a photo totally different and amazing. Most graphic designers love to do photo manipulation. And whenever we talk about photo editing or manipulation, the first thing which comes in our mind is Photoshop. Yeah, Photoshop is the best software for photo manipulation. It has lots of incredible features which are very tough to learn and tougher to be mastered. But you don’t need to worry for that because there are lots of amazing tutorials about photo manipulation on net. And you can easily enhance your techniques in photo manipulation.

These tutorials are most wanted and full of creativity. After learning these, you can use your creativity and can make something extraordinary and different.

(...)
Read the rest of 49 Most Wanted Photo Manipulation Tutorials in Photoshop for the download links!

© 2007 - 2012 Web Design Blog, 2012. | Permalink | No comment
Post tags: image editing, manipulation, Photo, tutorial

The post 49 Most Wanted Photo Manipulation Tutorials in Photoshop appeared first on Web Design Blog.

In this tutorial we will be creating a detailed iPod Nano illustation in Phoroshop complete with menus and on-screen icons. Througout this tutorial we will be utilizing the Drawing and Pen tools along with Gradient Overlay Styles to make our Nano as realistic as possible.

Step 1

The first step is to draw a shape layer, a square to be precise.Go to the Tools bar and select the Rectangle Tool (U) and draw a square (its colour doesnt matter now since we’ll be applying a Layer Style over it). Name this layer ‘Base.’

Step 2

Double-click the ‘Base’ layer and choose the Gradient Overlay style. Set the parameters of the Gradient as shown below:

Step 3

In a new layer, use the Rounded Rectangle Tool to draw a shape within the ‘base’ shape. On its Options bar, set the shape type to ‘Fill pixels’ and the Radius of the corners to 19 px. For greater accuracy, you should enable Rulers (Ctrl+R) and drag from the margins of the ruler, the Guides. Position these Guides within the base shape.

Drawing the rounded square within the guides automatically snaps to the lines of the guides when ‘Snap To’ is enabled from View>Snap To>Guides. Name the layer ‘Bevel.’

Step 4

For a ‘Screen’ layer, draw a square and add both a Gradient Overlay and Stroke Layer styles using the parameters below:

Step 5

To add droplets of water on the screen, download any of these images of your choice from either wallpapers.com or www.sxc.hu.

Step 6

Drag the image into your working window. Desaturate the image of the droplet by pressing Ctrl+Shift+U and have it resized to fit the Nano’s screen. Add a Layer Mask to water droplets image and erase a quarter of its bottom part unevenly. That done, reduce the Opacity of the layer to 54%.

Step 7

For the on-screen menus, draw a rounded square with the Radius of the its corners set at 11 px.

Step 9

Add a Gradient Overlay style to the rounded square and follow up with a Drop Shadow style:

Step 10

Draw three other menus each with its own Gradient Overlay styles as shown below. The settings for the Drop Shadow style are pretty much the same as above.

Step 11

Create a Group for these menus by clicking the fifth icon from the left below the Layers Palette.

Step 12

Now for the text. With the foreground colour set to white. Select the Text Tool (T) and set the text type to Arial Rounded MT and Font Size to 4.0pt from the Character Palette. Type ‘Playlists’ for of course, the ‘Playlist’ menu.

The completed texts for all menus:

Step 13

To add a glossy or shiny overlay to the menus, select the Rounded Rectangle Tool and draw an outline of  the same size as the menu’s. Right-click and select ‘Make Selection.’ Select the Paint Bucket Tool (G) to fill the selection with white. Press Ctrl+D to deselect and with the Rectangular Marquee Tool (M), cut out right about half of the shape by hittting the Delete key.

Step 14

Press Ctrl+T to enter Free Transform mode and then select the Warp Tool. In warp mode, drag the two bottom points downwards to create a slight curve.

Step 15

Create a Layer Mask and then select the Gradient Tool (G). On its Options bar, set the Gradient Preset to a ‘black to white’ one and its style to Linear. Making sure the mask thumbnail is selected on the Layers Palette, drag with the tool upwards within the menu icon, for a fading transition effect.

For the other menus, just simply duplicate your gloss effect and reposition them appropriately.

Step 16

At the bottom of the screen, draw four circles with the Ellipse Tool. One white, the other three, black. You may want to set the Ellipse Options to Circle for a perfect circle if you find holding the shift key while drawing tricky.

Step 17

For the black tabs, apply a Gradient Overlay style to them with the parameters below:

Step 18

For the ‘Now Playing’ menu, select the Polygon Tool and set its Sides to three for a triangle; its fill colour should be #2f2e2e. Drag a Guide to the centre of the menu and draw a triangle along the planes of the Guides. The triangle snaps to the Guides at its axis perfectly.

Step 19

Draw two more triangles and a standing rectangle all partially mashed together. Merged these shapes (Ctrl+E) and then duplicate them pressing Ctrl+J. For the duplicate, ‘Flip Horizontally’ when in Free Transform mode.

Step 20

For Playlist menu, in a new layer, use the Rectangle Tool to draw horizontal bars like the ones below:

Step 21

As part of the musical notation we’re trying to create, draw a standing rectangle as a shape layer and rotate it at an angle with the Direct selection Tool.

(A). Click on the shape to reveal its Anchor points and then select the ‘Add Anchor Points’ Tool from the Pen Tool fly out.

B. Add a couple of more Anchor points to the shape and reposition them along with adjusting their handles. Work on this until you get a curved shape as shown below:

C. Add other shapes such as a standing rectangle and a circle.

Step 22

Next is the ‘Mixes’ menu where we’ll create an atom symbol over it. Select the Custom Shape Tool and then pick a circle shape. With a foreground set to white draw a narrow circle or ellipse.

Step 23

Duplicate this shape and entering Free Transform mode, rotate it. Make another copy of the rotated shape and ‘Flip Horizontally in Free Transform mode.

Step 24

Follow up with white circles (atomic particles supposedly) drawn about the shape. And we have our atom symbol.

Step 25

On the Artists menu, draw a rounded rectangle with radius set at 1 px. Add rectangle for the mic stand and flat ellipse for the mic subsequently in separate layers and merge them all – its just that simple.

Step 26

And now for the tough part: Use the Pen Tool to map out the silhouette of a singer (head and shoulders). Click and drag each new Anchor Points to create curves and adjust these points afterwards to fine-tune the contours of the shape. A ‘Delete Anchor Points’ Tool can be used as well but sparingly that is, to delete unwanted anchor points for smoother curves,

The look of our ipod nano so far:

Step 27

Creating the top buttons of the Nano, draw a rectangle behind the “Base’ layer and make the following adjustments shown below for the Gradient Overlay and Inner Glow Layer style.

Step 28

Add two more buttons and just copy and paste the previous Layers styles of the first button to these buttons. And edits their Gradients by repositioning the Color Stops.

Step 29

For a shiny screen, draw a rounded square outline of the same size as the black bevel and make a selection from it. Fill the selection with white colour with the Paint Bucket Tool.

Step 30

With the Rectangular Marquee Tool, create a large selection and rotate it by transforming it (Ctrl+T, right-click and Free Transform selection).

Step 31

Clear by hitting the Delete key.

Step 32

Create a Layer Mask and with the Gradient Tool (black to white), draw a gradient from the bottom to the top. Also reduce the layer’s Opacity to 43%.

Step 33

We’ll now set out to create a reflection. Group both Bevel and Base layers and copy.

Step 34

Select the Group, ‘Main Copy’ move its contents below the Nano.Delete most part of the Nano copy.

Step 35

Add a Layer Mask and use the Gradient Tool to fade the Nano copy from bottom to top.

Step 36

Not forgetting, we add a clock, mini play button and a battery status icons at the top of the screen. And we have our spanking new ipod Nano!

The post Create an iPod Nano Illustration with Photoshop appeared first on Design Reviver.