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 CSS and HTML tutorials, vintage and retro design, great globe logos and much more.

Practical Tips From Top WordPress Pros

Recently I shared with you some advice from the WordPress community to beginners. But what about if starting out is already a dim and distant memory? What if you’re already so immersed in the world of WordPress that you dream of trac and bore your partner with talk of the latest thing you’ve achieved with custom post types?

Cool Globe Logo designs

Without further a due, we share to you 45 Cool Examples of Globe Logo Design that can help you sail to your vast imagination and maybe arrive at land of great ideas for your next project.

15 websites with vintage and retro design

Vintage and retro themes in web development are becoming extremely popular these days. However, this doesn’t suggest particularly complex elements in design. On the contrary a simple use of old black & white photos or some old fashioned music played in the background may do the trick. It will also make sense to play with a color palette and with its help add a retro feel to your design.

Awesome 3D Photoshop CS6 tutorials

Before the release of adobe Photoshop cs6, many designers have suffered from the 3d conception in the program, something that pushes adobe improve these functionalities in its latest version, they have made a handful of tweaks that will significantly improve your workflow and enhance your tool set. Theses new features include a way to generate bump map textures from flat artwork, smoother previewing of soft shadows and more. Fortunately, there are already a number of online tutorials that will help you to learn more about 3d features. Today, we will take you through some of the exciting Photoshop CS6 tutorials that illustrate how to use these brand new tools to create amazing 3D effects.

20 Free business HTML and CSS Templates

Business templates are commonly used for business/company related websites as they are quite decent, minimalistic and chic. The Free Business HTML/CSS Templates.

15 Great CSS Tutorials

15 of the best hand picked CSS tutorials for you to get your hands dirty.

AngelHack announces worldwide hackathon

AngelHack, the organiser of “largest hackathon startup competition”, has announced the project has “just got bigger”. The next AngelHack kicks off in a month’s time, with events on April 27 and 28, in both Los Angeles and London. Global events will continue until mid-June in destinations including Paris, Moscow, Sydney, Seoul, Guadalajara, Santiago and many other cities.

Getting started with Edge Animate

In this tutorial, we’ll be getting started with Adobe’s new animation tool, Adobe Edge Animate. Edge Animate harnesses the power of HTML5 animation, and allows the user to create dynamic, exciting web-based animations in a quick, easy and fun way, using a user-friendly timeline-based interface as opposed to blocks of daunting code.

5 simple tips to SEO optimize WordPress

WordPress themes are a terrific solution for clients with smaller budgets. They give these clients the ability to make ongoing changes to their site using the #1 CMS in the world. They give you, the developer, the ability to deliver a website that looks great and has a quality user experience at a budget price point. Everybody wins. But what if you could deliver even more value to these clients? You can by doing some simple SEO optimization of the theme you customize and develop for your client. Here are 5 simple steps you can take to optimize any WordPress theme template.

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

There is nothing more important for a designer than having the tools they need to create a great looking website. For those of you unfamiliar with Dribbble it really is a great community, and go-to place if you need inspiration for a new design. Today we have compiled a list of 20 great psd files found on Dribbble. From icons to UI elements and menus, we have some nice files here to give your library a boost.

Mini Clouds Set

Derailed Ui Set

Bella UI

Share Buttons

Ui Elements

Sticky Butterscotch UI Kit 

Sliding Tags

Communication Dropdown

Weather Pop-up

Light UI Kit (PSD)

Twitter UI

Quick Menu

Tooltips (PSD)

Upload Button (PSD)

Search Box

Toolbar (PSD)

Search UI

Dropdown Menu UI

Push Notification UI

Buttons, Lights & Shadows

The post 20 Beautiful and Free PSD files appeared first on Design Reviver - Web Design Blog.

Throughout the past two years web designers have become more and more aware of the importance of responsive web design, in other words making their sites viewable on different devices, as well as at different resolutions, in other words whether you are on an iPad Mini or a MacBook Pro with Retina Display the site must work just as well. Last week was the first release of the public preview for Adobe’s latest Edge tool, Edge Reflow.

For those unfamiliar with the newest addition to the Adobe family, Edge Reflow is a tool specifically built around helping designers create responsive designs.

In our post about Web Design trends you can’t ignore in 2013, responsive design was the number ONE design trend you really can’t ignore.

That was the whole purpose behind Adobe creating Edge Reflow, through the layout of the program, designers are able to create a mockup for various layouts, whether they want to optimize their design for mobile devices or desktop computers the possibilities are endless.

You need to understand however that Edge Reflow isn’t supposed to be the end-to-end design solution. It is important to know that the program will not work as a one step solution, instead it is for those who wish to see  what the design will look like at various sizes and on different devices.

Features of Edge Reflow:

• Flexible design approach

• Edge Web Font integration

• Visual media-query breakpoints

• Multiple background layers

• Multiple drop shadows

• Border styles and customization

• Fluid customizable grid system

• Previewing your design

What makes Edge Reflow great is that users can preview what their design will look like in a browser, furthermore the CSS is extractable for future developments, you can then copy that code into Dreamweaver and continue working on it from there.

As Adobe product manager, Jacob Surber, says the aim behind Reflow is:

“to help designers design within the constraints of the web to communicate their intent, but not to tell developers how to build the site.” He then adds that that what Reflow generates “is not production code.” Reflow is a design tool, and it bridges the gap between raster image editors like Photoshop and bare code. It lets you design your site on a flexible grid, utilizing break points with CSS media queries.

If you want to try Edge Reflow you need to be a Creative Cloud subscriber. While the Dreamweaver update does require a paid Creative Cloud subscription you can try Edge Reflow, Animate and Code for free.

The post Let’s take a look at Adobe Edge Reflow 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.

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 30 Stunning User Interface examples, how you can provide unique value to your clients, 9 pitfalls of of web hosting and how to avoid them, furthermore we take a look at how you can make your website more tablet friendly as well as great ways to use the website footer.

30 Stunning User Interface Examples

User interface is extremely important for any type of application because without an intuitive design, the user will probably try to find an alternative to that app. The success of web applications and websites depends in how effective the user interface design is. Designing a good user interface however is a very challenging task. According to Apple, a great application has the focus on content. Simply, it must be realistic and must take full advantage of device capabilities to enable enhanced interaction. A user interface that is unattractive, convoluted, or illogical can make even a great application seem like a chore to use, so when you design the UI, you must have in mind how your users think, act and work. In this article you can see 30 gorgeous examples of user interface design for various types of applications.

6 Easy Ways to Make Your Website Tablet Friendly

There are nearly 70 million tablet users in the U.S. alone, a figure that has doubled from the year before. This means that nearly 30% of the country’s Internet users are browsing on a tablet device. Tablet traffic to e-commerce sites grew by 348% from 2011 to 2012, overtaking smartphone traffic for the first time. With the tablet market as young as it is, its footprint is only going to expand. This trend sends a strong message: If you haven’t already, now is the time to prioritize your website’s design considerations for tablet functionality. Ignoring this could negatively impact your website’s overall conversion rate, return visits, sales and more.

21 Inspiring Examples of Illustrated Elements in Web Design

For our last web design inspiration list of 2012 we decided to gather examples of beautiful illustrated elements in web design. We believe that illustrated elements can give a nice touch and personality to a design. From subtle illustrated details to complete colorful sketched pages, the key is finding the right amount to use for each project. So today we have several different approaches on how to incorporate illustrated elements in a website. Enjoy!

The device-agnostic approach to responsive design

Techniques, technology and terminology change constantly in web design, and keeping up with them is crucial to your success in online design and development. Device-agnostic and responsive design are two of the current hot terms being bandied around in technology circles, and often in the same sentence. With the increasing use of a wide variety of internet-enabled mobile devices, web designers and developers are encouraged to keep work responsive; adapting content and design elements to the limitations of whichever device is being used. However, labelling responsive design as a technique using the device agnostic approach is a tricky business. What exactly is the device-agnostic approach, and is it even necessary to identify it as an approach to responsive design?

3 Ways Designers Can Provide Unique Value To Clients

If you’ve ever purchased organic food from a grocery store or farmer’s market, you know that it can be, well, pricey. Some people report as much as a 300% increase in their grocery bill when they buy organic versions of their regular groceries. And is it worth it? Staunch fans of organic living claim that it is.

38 Modern List Styles in Website Designs

I want to use this showcase as a peek into modern list styles and design trends. Web designers can be found all around the world who have been studying the creating the newest market trends. These designers are the molders and shapers of our future design community. It is exciting to see how these ideas take shape and form into larger archetypes over time.

9 Web Hosting Pitfalls and How to Avoid Them

If you’re ready to move off Blogge and onto a web hosting service, you’ve probably got a lot of other things on your plate as well. The world of web hosting can be complex and confusing, but we’re looking out for you.  We know you want a simple solution tailored to your needs, and with great support services. We all do. But great web hosting is really different for every client. We’ve done the research and found nine scenarios that are either red flags, or should be avoided altogether.

16 great examples of website footer design

When starting any website project, it’s natural to want to concentrate your design efforts on the homepage and the header. As a result, the footer often becomes an afterthought – relegated to a poorly designed dumping ground for copyright information, legal disclaimers and spammy SEO links. But it shouldn’t be this way.

Workless: A Clean & Classy HTML5, CSS3 Framework

Workless is a clean & classy HTML5, CSS3 framework that helps you to get your project up and running as fast as possible and helps prevent repetitive tasks. It standardizes CSS, improves usability and interaction, sets base typography to help vertical rhythm and readability and adds helper classes to style elements easily. You can either start with the base setup, or drop the files and assets into your current project and simply reference the CSS and Javascript files in your source. Once you’ve done this you can then begin adding your own application specific CSS.

Creating WordPress Themes That Sell – 5 Guidelines You Should Know

Considering the fact that WordPress is the most popular Content Management System out there and serves many users, it’s no wonder that developers feel encouraged and motivated to create themes for WordPress. After all, the gigantic size of the WordPress’ user base simply means that themes created for WordPress are likely to be used by many people, thereby giving developers good returns for their hard work.

The post Weekly News Roundup – 4 January 2013 appeared first on Design Reviver.

Every web designer knows that icons are an integral part of web design, and that having high quality icons can be the difference between a good site and a mediocre site. That’s why we know you will love the latest deal from DealPixel, 500 Clean Icons, a deal with 500 professional clean icons. The set is available for only $15. That is a 68% discount!

The deal was designed by PixGlyphs, and will remain on sale for the next 30 days so hurry up and get it while you can, The set comes with 500 professional icons in 7 different sizes, from 512×512 pixels down to 16×16 pixels. The icons are delivered in a variety of formats, including EPS, AI, CDR, JPEG, PDF, PNG, PSD, and CSHformats.

This is what is included in the set:

The post DealPixel offers 500 Clean Icons for $15 appeared first on Design Reviver.

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.