Step 1

In new document, create a new layer, call it “camera1”. Use Rounded Rectangle Tool (set Radius: 20px) to draw a shape like (1a) and fill it any color (1b). Then open Blending Options and setting (1c).

Step 2

Create new layer on top, call it “camera2”. While holding “Ctrl” down click on “camera1” to obtain its selection. Go to menu Select > Modify > Contract, set Contract By: 7px. Then fill it any color.

Step 3

Press Ctrl + T, right click on the image and choose Perspective. Then while holding “Alt” down change “camera2” like (3a).

Use Rectangular Marquee Tool to make the like (3b) and press Delete (3c). Then open Blending Options and use settings described in (3d).

Step 4

Press Ctrl + J to duplicate “camera2”, rename new layer “camera3”. Delete its Blending Options and reduce Fill to 0%. Then open Blending Options and use setting described in (4a).

Step 5

Use Rectangle Marquee Tool to delete the following below.

Step 6

Press Ctrl + J to duplicate “camera3”, rename new layer “camera3 noise”. Reduce its Fill to 100% and delete its Blending Option. While holding “Ctrl” down click on “camera3” to obtain its selection. Go to menu Filter > Noise > Add Noise, set like (6a). Then go to menu Filter > Blur > Blur. Change the layer Blending Mode to Multiply and reduce Opacity to 7% (6b).

Step 7

Create new layer on top of “camera1”, call it “camera right”. Move it left like (7a). Repeat step 2. Then make the selection like (7b) and press Delete.

Press Ctrl + T, right click on the image and choose Perspective. While holding “Alt” down change “camera2” like (7c). Then open Blending Options and use settings described in (7d).

Step 8

Press Ctrl + J to duplicate “camera right”, rename new layer “camera right shadow”. Move it under “camera right” in Layer tab (8a). Delete its Blending Options and delete like (8b). Then open its Blending Options and use setting described in (8c).

Step 9

Add “wood texture” and change its Blending Mode to Multiply.

Step 10

The right earpiece. Create new layer on top of “wood texture”, call it “right bottom”. Use Rounded Rectangle Tool (set Radius: 20px) to draw like (10a) and fill it any color (10b). Then while holding “Ctrl” down click on “wood texture” to obtain its selection. Press Ctrl + Shift + I to reverse this selection and press Delete (10c). Open Blending Options and use settings described in (10d).

Step 11

Press Ctrl + J to duplicate “right bottom”, rename new layer “right bottom noise” and delete its Blending Options. While holding “Ctrl” down click on “right bottom noise” to obtain its selection. Go to menu Filter > Noise > Add Noise, set like (6a). Then go to menu Filter > Blur > Blur. Change the layer Blending Mode to Multiply and reduce Opacity to 20%.

Step 12

Add more light and shadow for the camera.

Step 13

Create new layer on top, call it “zoom1”. Use Elliptical Marquee Tool to draw the circle like (13a) and fill it any color. Then open Blending Options and setting (13b).

Step 14

Create new layer on top, call it “zoom2” and draw the circle like (14a). Then open Blending Options and use settings described in (14b).

Step 15

Create new layer on top, call it “zoom3” and draw the circle like (15a). Then open Blending Options and use settings described in (15b).

Step 16

Create new layer on top, call it “zoom4” and draw the circle like (16a). Then open Blending Options and use settings described in (16b).

Step 17

Create new layer on top, call it “zoom5” and draw the circle like (17a). Then open Blending Options and use settings described in (17b).

Step 18

Create new layer on top, call it “rounded zoom”. Use Rounded Rectangle Tool (set Radius: 20px) to draw like (18a). Then open Blending Options and use settings described in (18b).

Step 19

Make “zoom light1” and “zoom light2” to the following below.

Step 20

Add text to the zoom.

Step 21

Create new document on top, call it “flash1”. Use Rounded Rectangle Tool (set Radius: 5px) to draw to the following below.

Step 22

Create new layer on top of “flash1”, call it “flash2”. While holding “Ctrl” down click on “flash1” to obtain its selection. Go to menu Select > Modify > Contract, set Contract By: 5px and fill any color for “flash2”. Then open Blending Options and use the below settings.

Step 23

Press Ctrl + J to duplicate “flash2”, rename new layer “flash3” and reset its Blending Options like below.

Step 24

Add some black dots.

Step 25

Create new layer on top; call it “black bar”. Use Rounded Rectangle Tool (set Radius: 4px) to draw like below.

Step 26

Press Ctrl + J to duplicate “black bar”, rename new layer “light bar”. Delete its Blending Options and fill white color. Then use Rectangular Marquee Tool to delete like below.

Step 27

Create new layer on top, call it “button”. Use Rounded Rectangle Tool (set Radius: 5px) to draw like below.

Step 28

Add 2 small lines.

Step 29

Create new layer under “camera1”, call it “camera shadow”. Use Eliptical Marquee Tool to make the selection like (29a), fill it black color (29b). Then go to menu Filter > Blur > Gaussian Blur and set like (29c).

Final Image

Creating electronic devices in Photoshop can be a tedious process. Your results will depend on the amount of time you dedicate to the project and the amount of detail that you decide to include. With practice you should be able to replicate just about any type of device on your own.

Mother Nature Is Crying

This incredible piece of digital artwork uses various manipulative skills to produce a realistic yet natural look of what it may look like if "Mother Nature" were to cry.

Grafreal

A fantasy HDR wallpaper using various nature-inspired elements. The idea behind the series is to place natural elements such as rock and greenery into an abandoned place, such as a building.

Stay Green, Go Red

‘Stay Green, Go Red" is part of a new marketing campaign that encourages people to recycle old images and create new ideas – as well as this piece, the campaign consisted of a poster, a desktop wallpaper download (with an alternate black and white version that uses less energy) and a print advertisement.

Waste Not, Want Not

An incredibly powerful piece with lots of emotion. A piece produced as a companion to a similar piece by the same artist ‘Stay Green, Go Red" (as seen above) – something that was visually and metaphorically the opposite.

Creatio Ex Nihilo

This is just an absolutely stunning piece of artwork combining hundreds of skills to manipulate and merge so many different elements of the universe we live in. I especially love the area where the man merges into the rock.

Punishment

The artist of this piece is clearly a fan of minimalism and simplicity. With the background being so simple, and not using too many elements compared to others in this article, the work comes together well, especially because of the very close attention that has been paid to detail, such as the single pixel lines found all over the piece.

Club Fury’s Flyer

Another minimalistic piece, this time being used as a flyer to advertise Club Fury’s fifth birthday. The manipulation has been produced so well it’s hard to tell the different elements apart.

Just Another Ordinary Day

This abstract piece is the second part in the series "Life In The Subconcious Mind" (you can see more by clicking the artwork). The three-dimensional objects were rendered in Cinema 4D and composed in Photoshop.

Cosentino – ECO

All of these pieces (be sure to click through to see more in the same campaign) were created for one of Cosentino’s brands called "ECO", an eco-friendly company who produce high-quality kitchen worktops from recycled materials.

Contra Band

Another highly edited piece of work, and a fantastic one at that. The model is cleverly manipulated to look like a garden statue, making use of strong, colorful vectors and shapes to bring the piece together.

More Green

A piece that is made up almost entirely of green leaves, providing plenty of green as the title of the project suggests. The awesome three-dimensional typography combined with the realistic shadow and turf make this a truly enlightening piece that’s sure to brighten up your day!

Global Warming PSA – Time

An inspirational yet saddening piece of artwork showing us what we are doing to the planet’s natural habitat to feed our everyday lifestyle, such as purchasing gas to drive our cars – we really are running out of time.

Riders On The Storm

This piece is part of a series called "Cubic", a personal experimental series of the artist. The main focus of the project is to use cubic shapes and structures and to place them in a non-cubic environment, such as the planet’s natural habitat and land.

Changing Actions

This piece was a free wallpaper that we distributed on Psdtuts that illustrates various environments blended together and serves to remind us that it’s time to start Changing our Actions to avoid continued climate change and environmental issues.

The World Of Tomorrow

Although originally a photograph, the piece has been highly edited in Photoshop, classifying it as a piece of artwork as well as an awesome piece of photography. The piece shows just what we are doing to the natural environment.

Copenhagen Climate Summit

A wonderful and highly illustrated piece completed as part of a personal project by the artist. The poster suggests how it is time for us humans to change our act to help protect the planet from climate change.

Help Stop Global Warming

Although global warming is a serious matter, this piece presents it in a comical way to help people join in with the fight to help stop electrical pollution and its devastating effects on the world, such as climate change.

Awareness

An inspiring yet saddening piece of artwork, again as part of a campaign to raise the awareness of global warming and its effects.

Evolution

As a part of a global warming campaign, this poster cleverly illustrates what our next evolution of animals could be like – in this case, a swimming parrot.

Mother’s Cry

A poster-style piece of artwork to raise the awareness of global warming, used in an exhibition at Donseo University in Korea.

Destroying What We Made

This heavy grunge and straight-to-the-point piece of work is quite violent, yet illustrates its point perfectly by using tools and weapons to literally attack the planet we live on.

Levi Van Veluw, Landscapes

Photo-editing is Photoshop’s primary use (at least it use to be) and this is a perfect example of what it is capable of. This piece is originally an animated video, the image you see above is a piece of artwork taken from the video. The effects are incredibly realistic, and a little freaky!

The Tree

As the first part of the series "Trust NTR Series", this beautiful limited-color scheme and abstract piece encourages us to love nature because it will never fail us. The use of diagonal lines and vector shapes pulls this piece together to make it as strong as possible.

Loading a Beautiful Life

A personal piece of work by the artist. The fact the whole piece has been made to look like it has been produced in an old scrapbook or moleskine pad only makes it stronger. Thin lines throughout the manipulation are used to draw your eyes into certain areas, such as the base of the tree and animals.

Nature

This piece, for me, combines water (sea) with the life above ground (trees). The use of grunge texture and ink splatters make it a very inspirational piece of work and a pleasure to look at.

The Judge Series

"The Judge Series" is a dark-art project about corruption and human nature. The piece you see above is the final image in the series – it is definitely worth checking out the others by clicking through to the piece, as the series is losely based on a storyline.

Cartiere Calendar

This very strange manipulated photographic piece of artwork is actually a person in a rather strange position. At first I saw an elephant, but upon further studying I realized it was not! The piece is part of a calendar series that is worth checking out.

Blue Crystal

"Blue Crystal" is actually a company with an idea of a swimming world of ice off shore of Dubai. It is actually a model of a building, but has such strong and bold features it can quite easily be mistaken for a piece of artwork. Incredible!

Day Spa ZEN

This highly illustrative and gorgeous piece of artwork was created for company called "Day Spa ZEN" as a primary image to be used on their website. You can see it live in action.

Brooke Burke

The use of colors and the perfect balance between them is one the strongest points of this nature-themed commercial piece for Brooke Burke. The use of simple shapes and three-dimensional natural objects such as the flowers and grapes work tremendously well with each other.

Eleven Sins

"Eleven Sins" is yet another piece that combines vector shapes with various different styles of art, such as photography and photo-manipulation. The outcome is vivid with a strong color contrast, but works very well for this particular image.

Naturally Create

This surreal piece is made up from various styles and techniques, and the result is absolutely stunning. Wow!

Discovery Channel – Life

"Life" is an extraordinary television series, so it’s no surprise to see an excellent poster advertising it. The large typography and lighting effects in the poster alone are pretty special, but combined with the huge selection of the planet’s coolest animals, it is a very exceptional design!

Fugitive Soul

"Fugitive Soul" is a piece of personal work by the artist. Its simple and limited composition work perfectly well with the black smoke, making it a pleasure to look at.

Earth Intruder

This is another piece which is nature themed purely because of clouds. The lighting effects coming from the man are very powerful and look very realistic, especially with those fiery orange and red colors!

Note for Mac Users

Hotkeys containing “Ctrl” can simply be replaced by the “Command” button on a Mac version of Photoshop.

Step 1

It’s important to establish a good foundation to our concept, so lets lay out some perspective lines with the Brush Tool (B) on a (roughly) widescreen canvas. The canvas size is not important at the moment because we’re just roughing out a composition – sizes can be modified on the go. It’s often a good idea to draw line art on a New Layer (Ctrl+Shift+N) so we can separate the line art to everything else, such as the background. To keep things neat we can rename the layers by double-clicking the layer’s text in the Layers palette.

Step 2

The perspective seems to swallow everything to the right – not very effective for showing off a nice, tall interior. Let’s re-draw the perspective lines to give the floor fuller squares. This will give the illusion of a more top-down view, allowing us to convey deeper and more spacious architecture.

Step 3

Currently the image’s perspective is two-point. Adding a third, vertical perspective will give a composition a more dynamic feel and push for a vertigo look. Using multiple layers or painting everything on a single layer both have their own perks – experiment and see what works for you!

Step 4

To make it easier to see our sketch we can knock the line art’s opacity down in the layers palette. However, in the case of the example below where everything is merged into a single layer, we can use the Paint Bucket Tool (G) to fill in a neutral color on a New Layer (Ctrl+Shift+N) and pull the opacity back a little to see the line art underneath. Now we can begin sketching out our ideas on a new layer. If you need more room to paint, adjust the canvas size on the fly using the Crop Tool (C).

Step 5

As the piece already has a nice walkway as the main attraction, we need some sort of foreground element to set the distance and give the viewer some familiar grounding to be watching the walkway from. The canvas is also flipped using the Image > Rotate Canvas > Flip Canvas Horizontal command. Flipping the canvas lets us see any mistakes that we may have been previously too zoned in to see. Now have a nice coffee break… Unless you’re hardcore, otherwise please proceed.

Step 6

Other elements such as the background are to be added, keeping the forms rough. We should ideally get in all the large and important forms to see what works on a general level, finer details can come after. By not disrupting the tall architecture on the left, we’ll utilize the height of the environment to give the structure a regal look. To accentuate the throne or chair on the isolated structure to the left, we’ll put in some circular architecture to make a statement with the shapes. This is a clever way to extract elements of the composition using simple design language. By repeating shapes such as the inlets and balconies on the right, we can help portray the scale of things when they repeat into the distance.

Step 7

If you’re happy with the line art, use the Image Size (Ctrl+Alt+I) window to bump up the pixels. I change mine with print in mind, so around 4000 width is ideal. Now we can start coloring within the lines. If the line art is on a separate layer, it makes coloring much easier since we can color under the line art layer neatly. A great way to color gradients behind elements as shown in the example below is to paint on a New Layer (Ctrl+Shift+N), then create another new layer above that and Alt-click in between them (shown below). This allows us to paint on the top layer while preserving the transparency of the layer underneath it. That was a bad explanation… which is even more reason to let loose and experiment yourself!

Step 8

The green area below shows part of the painting that we’ll make darker due to it catching less light. Notice that the closer the environment is, the darker and more saturated it appears; this is because of the atmospheric fog that builds up over greater distances – an incredibly useful technique to illustrate epic distances. Let’s not forget to flip the canvas horizontally now and again, even when roughing out our colors.

Step 9

Adding a red carpet or design on the path is another great way to show distance of elements. Here we can use the red carpet to bridge the side platform and main walkway structure. Now is the perfect time to lay down the main colors and light sources. Remember to work the entire painting and not get bogged down in detailing. Concentrating on one small area to perfection will disconnect us from the rest of the painting and rendering the entire painting to perfection will likely take far too much time for it to be worth it. We just need to establish the composition using color, lighting and space to a readable level and it should make for a successful piece. Working the entire painting will also keep the piece together and will be presentable to the client at earlier stages should they need it unexpectedly. As we did repetition in step 6, repeating the carpet in the distance helps sell the scale and suggest how far back it is.

Step 10

Now to define some of the elements a bit better – we can give the illusion of lights from a further space to achieve this. Harder brushes generally give more texture and life to a painting, but using a soft brush for volumetric lights such as the example below is very effective.

Step 11

A square brush will give us some much needed visual repetition for the stairs, so we’ll Right-click on the canvas to bring up the Brush palette, then Left-click the triangle on the right to bring up additional options and choose Square Brushes. These are default brushes that come bundled with the software package so it’s a much better idea to explore your own or look online for royalty-free, custom brushes. You can learn about creating custom brushes in great depth at Photoshop’s Brush Tool – Basic Guide by Alvaro Guzman.

Step 12

Play about with the spacing in the Brushes (F5) window until the thumbnail stroke below is what we’re looking for – something that is somewhat reminiscent of a staircase edge. In the example below, the square has been flattened slightly by the highlighted point and adjusted using Left-click. Experiment with the other parameters to see what suits you.

We can save the brush to use later by Right-clicking the canvas, Left-clicking the triangle and choosing New Brush Preset. Name the brush and it’ll be on the brush palette to use another time.

Step 13

Clean up anything standing out to keep the order of elements clear. We’ll highlight some edges too, just to bump up the definition to clearer values.

Step 14

Working around other areas of the painting – the green rim-light we did in Step 10 worked quite well, so let’s try that effect along the underside of the platform, too. We don’t need to make any lights too bright just yet – the extreme contrast values are very powerful, so let’s save them for later. By staying in the mid-range for a bit longer, we have more space to play around with the lighting of the composition without anything set heavily in stone. Notice the Navigator window is also up (Window > Navigator), this gives us the thumbnail view of the painting so we know what it looks like in the bigger picture while working zoomed in.

Step 15

If we paint a particular element on a new layer such as the green fog below, it gives us the flexibility to make changes to the layer using the Hue/Saturation (Ctrl+U) tool. Checking the Colorize option will allow us to give brighter grayscale values some color simply by lowering the Lightness parameter.

Step 16

Similarly to the treatment on Step 8, let’s darken the wall a bit to illustrate the absence of light. The green in the example is just to show where it is painted. Some gold has also been thrown in to compliment the red tones for a regal look to match the tall, elegant pillars. We could simply float anything we want to, but using pillars will ground the architecture in a believable way, giving the viewer something to acquaint themselves with if this were in the real world.

Step 17

The general composition uses a lot of cooler tones, so we can give the main walkway some warmth to stand out, suggesting to a natural light source. Test out some layer modes and colour combinations to see the effects and how they suit your own composition. In the example below the layer mode is changed to Overlay and the opacity is lowered so it isn’t too visible. If the effect isn’t strong enough, there’s always the option to brighten things up when polishing our piece up near the end.

Step 18

Let’s re-inforce the edges some more and put in some secondary light sources.

Step 19

To introduce some sci-fi elements, new lines drawn on a new layer can be controlled by choosing the Move Tool (V) and dragging individual corners of the Transform Box by Ctrl+Left-clicking. Alternatively, we can use the Free Transform Tool (Ctrl+T). Having control of the corners allow us to apply the lines how we like into the perspective we want.

Step 20

Looks OK! Let’s try adding the same effect to the side platform, too.

Step 21

The platform looks quite bland and dim-lit. We could try lighting the place up with some civilian lights using the brush at a softer setting. Right-click on the canvas while using the Brush Tool (B) to adjust softness on the fly.

Step 22

At this point in the example, my computer blacked out from a power cut… But it doesn’t matter the work was saved! Remember to save with Ctrl+S or File > Save. This point was also when I noticed that the perspective was slightly off – it’s never too late to make changes! (Unless there’s no time left) Drawing new perspective lines on a separate layer makes it easier to remove when we’re done with them.

Step 23

Now we’ll paint in the floor correctly. By hand-painting and working on one layer as opposed to using a plate of tools will probably double your drawing practice at least, so it’s important not to get too caught up trying to use the latest features for these things – those tools will only barely nudge your foundational abilities so far when conceptualizing designs. That being said, you can use the Polygonal Lasso Tool (L) to make straight-edged selections using Left-click

Step 24

As the eye is lead along the walkway, it needs some sort of visual reward as opposed to a plain floor and dead end. We’ll experiment a bit by throwing in some more levels of architecture – simple pedestals for now to test the creative waters.

Step 25

If we observe older open architecture that has had its fair share of rust, wind and debris, it’s usually not in spectacular shape. If we keep everything clean using selection tools and perfect fills the painting will look very digital, so roughing up edges or surfaces will give the painting some more authenticity and believability.

Step 26

Adding statues and setting their poses up for weapons could very much suggest some backstory. By drawing it on a pedestal, it’s almost part of a reward for guiding our viewers down what would otherwise be quite a boring floor (with a nice red carpet). We’re also setting the colors up to be in the gold or bronze ranges to match up with the banners around the set.

Step 27

To make the highlights on the statues ‘pop’, we can brush some lighter values on a separate layer set to Overlay. It’s very hard to predict what your layer will look like without changing it to Overlay first and experimenting with it. Don’t forget to zoom out/horizontally flip the canvas and check how it looks as a whole composition, not just as detailed sections.

Step 28

Now to add a weapon to suggest story elements, a tail to guide the viewer directionally and some arrows in it to make it look cuddly. Let your creativity loose! Let’s throw in some more red carpet just for good measure.

Step 29

We’ll draw the stairs back in using the brush we made in step 12. Suggesting the edge of the stairs is probably the fastest way to draw stairs without needing to be accurate. The measurement accuracy of the stairs isn’t important – only that we can sell the idea of stairs there and that their colour/lighting helps to achieve this.

Step 30

Let’s draw some lines where the viewer would see less light; this will reinforce the form of the stairs.

Step 31

This is a great chance to add some atmospheric fog over the further distances such as the circled areas in the example below. The walkway spotlight has also been emphasized more by painting darker values around it. Finally the figure to the left was almost black, washing out other dark values throughout the painting – simply knocking it back a little pulls the composition’s share of values together a bit more. We’ve also placed some human-sized figures around the set so the eye can relate to the scale of things.

Step 32

We can make a color adjustment now by changing the layer mode to Color and brushing any color over the layer underneath – in this case, blue. In doing so, all the values underneath that will be influenced towards the blue range, where 100% blue values will change all the values beneath it to the blue range.

Step 33

Finally let’s give the image a border to frame it presentably. First make sure our background color is what we want our border to be, then open up the Canvas Size (Ctrl+Alt+C) window. Use a value of 50px for both the Width and Height parameters (choose Pixels on the drop-down menu) and make sure the Relative option is checked. If left unchecked, it will actually change the canvas to 50px by 50px as opposed to add an additional 50px around the existing canvas size. If the Canvas extension color is set to Background (default) then choosing OK will give our image a 50px by 50px border.

Step 34

… Time is up, sign your piece!

Conclusion

In the case of more time, you can keep on adding gritty details and story elements to the composition to give the piece more realism and believability that it would be a viable set in real life. However, to reflect the amount of time spent on this, the concept should suffice for a presentable ground to work from in a fast production environment. If you’ve captured the concept of the interior space you’re trying to convey, the client can take the piece off of your hands at any time. Working over the whole painting simply gives you the ability to add details once the concept is “captured”. There’s no special tools in the latest software trends to draw a presentable piece – all you need is time. Experiment and practice your fundamental knowledge of composition, lighting and color with every piece, I hope you learned something useful from reading this wall of text!

About The Designers

Brothers Tim and Bram Vanhaeren are two extraordinary designers, each with unique styles that come together into one cohesive whole when they work together. Be sure to check out their portfolio Into1. If that is not enough there is also their Behance Portfolio. We’ve also interviewed Tim and Bram on Psdtuts+ as well.

About Their Blog WallpaperArt

Bram and Tim are also running the Wallpaper Art Blog. WallpaperArt is not just another random wallpaper library. Their goal is to select the most exclusive, the most special, the most incredible wallpapers you can possibly find online and at the same time bring the artist and the user closer together.

Their aim is to inform the readers about the latest wallpaper trends and information about the artists behind the beautiful artwork. By providing interviews with the designers and a look behind the art, they bring the wallpaper scene to a new level.

Wallpaper Art is also running their first contest. Create a wallpaper and win some fantastic prizes! Find more information here.

Exclusive Wallpaper – “A Trip”

This wallpaper shows my trip to outer space.

This wallpaper shows my trip to outer space. Programs I’ve used are Adobe Photoshop and Illustrator. I really like to draw abstract patterns in illustrator and they’re perfect to fill up my work and add some fun touches to it.

With Photoshop I cut and paste stuff, touch everything up and brush around. I experiment all the time with works like this. And the great part of it, most of my experimental works leads to new job opportunities, so go crazy and find new techniques or effects you like. You will see they come very handy in the future. For this work I was inspired by some Japanese background music from a war movie actually. I never listened to this music before, but it helped me with this work a lot.

Download this Free Wallpaper

Get your downloads now!

• 1024×768
• 1280×800
• 1280×1024
• 1440×900
• 1680×1050
• 1920×1200
• iPhone

Exclusive Wallpaper – “Tuts+”

Recently I’ve been experimenting with typography (I love to work with typography).

Recently I’ve been experimenting with typography (I love to work with typography). Drawing my doodles and patterns, and because I’ve received so much positive feedback, I thought I should use it for a wallpaper. I used Adobe Illustrator to illustrate my doodles and patterns for this typographic artwork and Photoshop for my background.

Download this Free Wallpaper

Get your downloads now!

• 1024×768
• 1280×800
• 1280×1024
• 1440×900
• 1680×1050
• 1920×1200
• iPhone

Special Thanks to Tim and Bram

One again I’d like to thank Tim and Bram for participating in this project and for giving the readers some amazing high quality wallpapers. Everyone be sure to visit their portfolio Into1 and blog WallpaperArt.

Also stay tuned for some more exclusive high quality wallpaper projects in the near future!

1.  Morphix

This site mixes a creative blog layout with nice illustration to create a blog design that is very untypical, but very memorable.

2.  PSD to WP

Here is a one page site that uses a powerful background image to build its sites personality and brand off of.

3.  Dedoce

This underwater scene has a bit of a grunge feel to it that helps keep it from looking like another vector illustrated website.

4.  Chirp

Designed entirely with the hand drawn style in mind, Chirp has an artistic style that is very much its own.

5.  Olive Crush

These guys use a simple illustration and textures to help add some personality to the site design.

6.  Ready Made Designs

A nice color scheme and illustrations make this website very easy on the eyes.

7.  Bird Boxx

A large illustration on this website easily translates that sites name to help make it more memorable.

8.  Cool Brush Design

This sit sports a very detailed graphic of a castle and ocean scene that works with Flash.

9.  Katherine Designs

Who doesn’t love a site with robots?  This site sports a pastel color scheme and lots of little robot illustrations.

10.  Arbel Designs

A very cool one page portfolio site.  Click around on the navigation here to see all of  the various levels of the design.

11. Synch Media

A combination of unique colors, layout, and illustration make this website very unique and different.

12.  The Pixel

Simple animation, outstanding artwork, and clever layout; this website has it all.

13.  Andy Adventure

One would expect that animated games would have a bold and artistic website.  While this isn’t the most clever design, it is certainly big and bold.

14.  Los Colores Olvidados

If Tim Burton were a web designer,  I would think that his website would look a little something like this.

15.  Store Envy

Here is a site that mixes very modern user interface style with some bright and colorful illustration work.

16.  Digital Impact Outdoors

The illustration in this website design does an excellent job at conveying the overall message of the website and adding to its value.

17.  Vindem Teren

I’m not really sure what this site does, but based on the illustration it looks to be some sort of real estate based site.  Goes to show you that images can speak volumes.

18.  Branded 07

This site is full of outstanding illustration.  Be sure to check out the footer area on this one.

19.  Pralinen Schachtel

I like that the illustration on this site has made sure to create some depth to the picture.  This is something many vector illustrations lack.

20.  Indofolio

This is a must see side scrolling site.  Aside from the amazing artwork, it also has a nice transition from page to page to helps added to the feel of the site.

21.  Camellie

Creating a clever and artistic website is easy when you have as much talent as Camellie does.  If only we were all this talented.

22.  Bet Your Followers

I don’t really get the point of this website, but it shows very creative use of some excellent stock illustration work.

23.  Attack of the Web

This is one of those websites that just make you wonder where they got the idea from.  This is a clever and funny one page layout.

24.  Blossoms Village

While not the greatest looking website on this list, it just goes to show that some bold illustration work can go a long way in making your design look even better.

25.  Outlaw Design Blog

It is all about the little details in this site.  The gun in holster on the menu, random bullet holes, and other touches help make this site a bit different.

26.  Abduction Lamp

This site even comes in 3D!  Well, not really, but it’s still a clever aspect of the design.

27.  Bimbi Sicuramente

I have no idea what this site is about, but I like that the vector illustration is full of texture and offers a bit of depth to it.

28.  GREPIT

This site offers a very slick and clever looking diagram type illustration to convey what it is they do.

29.  Kidd 81

Here is another site with a style that stands out from the crowd and one that the designer has used to brand them self very well.

30.  Atomic Cartoons

This is just an amazing website and probably my favorite on this list.  You MUST check this site out and click around a bit.

31.  Somos La Peralimonera

I always like it when illustrated sites like this have multiple layers to them.  Adding outer space or underground layers is a cool idea.

32.  HD Live 09

Any time you can add some real hand drawn work to a design you are sure to create something very different from anything else out there.

33.  Piipe Online

A nice use of bold colors, creative layout and interesting use of patterns make this site fun to look at.

34.  Blogsville

A basic website with a simple illustration to help conceptualize the conference name.

35.  Tech Adventure DC

Again, any time you can add some hand drawn elements into your design you are sure to create something outstanding.

36.  Open Atrium

Here we get a nice mixture of typical clean web design mixed in with some bright and bold illustration work.

37.  Black Moon Development

Bring in a more traditional illustration look offers a unique style in today’s web design.

38.  Moshi Monster

As one would epect, this online kids game is full of animation, cute little monsters, and plenty of bright colors.

39.  Carreras Con Futuro

This site might be “drawn” and “painted” with Photoshop brushes, but it still has that hand drawn style to it.  Great for those of you who don’t have the traditional artistic skill set.

40.  Toris Eye

This is a very cool site that you have to see to really appreciate.  It offers simple motion, creative ideas, nice colors and oh so much more.

This Premium Tutorial is Filled with Creative Tips

Retro design is enjoying a huge modern day revival – and it’s big business. Retro graphics are appearing everywhere, from T-shirts to print and web design. It seems the best way to get ahead these days is to go retro – so in this tutorial we’ll draw a heavy dose of inspiration from the 70s and create a funky poster with tons of retro appeal.

As far as techniques go, we will show you how to give present day images the vintage work over. We will use Illustrator to create cool type from scratch using paths and custom brushes. This is a comprehensive tutorial that weighs in at nearly one hundred steps.

Final Image Preview

Take a look at the final image we will be creating.

Professional and Detailed Instructions Inside

Premium members can Log in and Download! Otherwise, Join Now! Below are some sample images from this tutorial.

Psd Premium Membership

As you know, we run a premium membership system here that costs $9 a month (or $22 for 3 months!) which gives members access to the Source files for tutorials as well as periodic extra tutorials, like this one! You’ll also get access to Net Premium and Vector Premium, too. If you’re a Premium member, you can log in and download the tutorial. If you’re not a member, you can of course join today!

Also, don’t forget to subscribe to the Psdtuts+ RSS Feed to stay up to date with the latest Photoshop tutorials and articles.

Step 1

Using Illustrator we create a rectangle with the size shown. With the Rectangle tool we click on the work area and a window will appear that will allow us to determinate the exact sizes for the object. I recommend to set Illustrator preferences using pixels as measure unit.

Step 2

We place a guide as a reference for horizontal alignment. Using the Plus Pen tool (to add anchor points to an existing vector) we add one extra anchor point in the upper side of the rectangle.

Step 3

Now we select this new anchor point and take it higher than the line and we separate the lower anchor point from each other to obtain an object with this approximated shape.

Step 4

With the anchor point handles we use the upper point as an axis for a soft curve.

Step 5

Now we have to get two more objects that will integrate a three point object. We rotate this vector using its central bottom part as rotation axis. To start we select the Rotation tool and click on the bottom part. Then we will see the cursor change into a little black arrow.

Step 6

Pressing Alt key (that it is used to duplicate –you will see the black arrow together with a white arrow), we drag the object. We use the Information window to rotate the duplicated object a certain amount of degrees. Considering this is a three point object, we must divide 360° for this number (3), so our duplicated vector must rotate 120°. Drag it until you see this approximated number in the Info window.

Step 7

Pressing Ctrl+D (Windows) we automatically duplicate what we have done. So this vector will be duplicated again at 120°.

Step 8

We unite these objects into one. In the Pathfinder window we unite the vectors: click the Unite option and click the Expand button to convert the group into one solid object.

Step 9

Now we round the corners of this object. Go to Effect > Stylize > Round Corners.

Step 10

Set a 10 pixel Radius and preview the result by checking the Preview option box. The Radius depends on the curves amplitude you have drawn in the main object. With the Preview option you will realize if the Radius softens correctly the corners: if the amount of pixels is excessive the object will look distorted and not softly rounded.

Step 11

Now let’s separate the appearance (the created effect) from the original vector. Go to Object > Expand Appearance and obtain the final vector.

Step 12

This is the result of our work with vectors in Illustrator. It is a complex object to be done manually and this is why we use some techniques to achieve a symmetrical and ergonomic vector.

Step 13

As our button will have an inner insertion –some kind of assembled object in the frontal part- we will repeat the previous steps but this time with a much smaller and shorter object.

Step 14

Following exactly the same steps from Step 1 to Step 12, we create this new object. The rest of the vectors can be created manually or in an automatic way without so much complexity.

Step 15

We create just one half of a new object and then we reflect it to make it symmetrical. Please follow carefully the steps you see on this graphic.

Step 16

Using the Reflect tool we duplicate the object keeping the Shift+Alt keys pressed.

Step 17

Now we unite both halves using the Pathfinder tool. You can erase the remaining anchor points of this union with the Minus Pen tool.

Step 18

We use the same duplication method described before, rotating the object 120° to obtain also 3 identical objects and evenly distributed.

Step 19

Finally we create a simple circle, a vector that will be used as LEDs that will light up the button in its hover state. We will finalize the editing in Photoshop to add shaped layers masking techniques.

Step 20

Now we select all the vectors and pressing Ctrl+C (Windows) we copy them into the system clipboard.

Step 21

We close Illustrator and we open Photoshop. We create a .PSD of 1024×768 pixels and this initial configuration.

Step 22

We paint the initial layer in black. Then we apply a layer style to create a background gradient.

Step 23

Using dark grey and black colors, we create a Radial gradient and take it to its maximum scale (130-150%). Please remember that in this layer style window you can drag the gradient to take its center to the place in the screen that you wish.

Step 24

Now we paste the vectors as Shape Layers. Ctrl+V or Edit > Paste.

Step 25

We have the vectors in one Shape Layer and we must separate them in different layers. Let’s duplicate as much layers as parts we have got -4 in this case- and eliminate the unnecessary objects on each of them leaving the shape we are interested in.

Step 26

The order of the layers is the one you see in the picture and do not forget to name every layer to organize better your work. Some layers will be added to these ones that will be created completely in Photoshop. We will add layers styles to our main button.

Step 27

Making a double click on the layer at the main button window, we open the Edit window of this layer styles. On “Blending Options: Default” we take the opacity of this layer to zero in order to see only our layer effects. We start by adding a circular gradient using the same background colors #333333 (dark gray) and #000000 (black). Make sure this gradient is soft from the center to the edge, increasing its size up to 120%.

Step 28

With an inner shadow and unclicking the Use Global Light option (that we will ALWAYS use at 90°) we invert this shadow, dragging the angle editor of the shadow to -90°. This will help us to reinforce the bottom area shadows. .

Step 29

We have concluded the first part of the button editing process. We now have ready the frontal part of it that has an opaque surface that we will later add gloss and pseudo 3D extrusions.

Step 30

Now we create a chromed stroke around the button. We add a 3 pixel Stroke with Gradient type fill. We add some more details to this gradient inside the stroke. We reproduce a chromed metal reflective surface where we use the resource of reflecting the horizon and the sky of an outdoor stage.

Step 31

We apply the Reflected style to the gradient to enlarge the amount of chromed reflections. By turning the angle of the gradient we place the lighter areas where we wish to. In this case the maximum brightness should be seen in the upper area of the stroke.

Step 32

Now we make the chromed surface more complex by adding more lights and shadows details to the metal. With Bevel & Emboss and the Gloss Contour you see in this picture we add more little details to the surface.

Step 33

With Inner Glow we add an inner beveled edge to the button as if it was 3D, trying to make sharper the merge with the object’s background.

Step 34

Now we need a selection to paint some details manually over the button. The first step is to use the shape layer of the button and obtain a selection that will be used as a mask for it to be painted. Go to Paths window and select the button layer to create a selection with the same shape.

Step 35

Now we contract the size of this selection by going to Select > Modify > Contract. We reduce 10 pixels the selection from its original size.

Step 36

Now we soften the selection. Go to Select > Modify > Feather or Alt+Ctrl+D (Windows). We apply 1 pixel feather and press OK.

Step 37

We hide the selection using Ctrl+H to visualize better what we will do. With the Brush tool, using a 35 pixel brush and a 10% Flow, we paint inside a new layer some light reflections over the button, using white color. As the light of our scene comes from above, we will apply more brightness to the upper area of the button and we will enhance with little light spots some dark areas in the bottom part of the object.

Step 38

Still holding our selection (which will become visible again with Ctrl+H) we reduce it some pixels to erase a little of the work we have done with the brush and achieve a more sophisticated effect. This time we contract 3 pixels the selection.

Step 39

We hide this selection again by using Ctrl+H and pressing the Delete key we erase some parts of our previous brush traces. This allowed us to paint manually and then polish our work creating a beveled edge area that reinforces the 3D aspect of the button and giving a plastic texture to its surface.

Step 40

We ended the button structure. Now we must create an insertion on its center. The first step is to bring the shape layer opacity to zero (0%).

Step 41

Let’s create a new Inner Shadow in the inverted angle just like we did before for the main button. Make sure to add the values you see in this picture.

Step 42

Now a little Stroke will represent a bevel between both objects.

Step 43

The following step is a Drop Shadow used as a lighted surface by the Blend Mode Screen and the white color. The size of this light must be 2 pixels to make it very sharp, as if it was a beveled edge that receives some light from above.

Step 44

Finally with an Inner Glow we recreate the beveled edge of the inner button. This makes the observer interpret this object as a little beveled edged panel that is meshed inside the main button.

Step 45

We are done with the main button. Actually it is not a button placed on a background: through some additional effects it will be seen as an inset of the background surface, that has a metallic stroke around and that contains a button inside that can be pressed down.

Step 46

Now we create the Power icon of the button. Download this free font: http://www.dafont.com/guifx-v2-transports.font . You will be able to create this object by using the “q” key and this font in 48 points.

Step 47

In this picture you see how we can add an external beveled edge to the icon, using a 3 pixel stroke of the same color than the button surface and then applying the Stroke Emboss effect with these values.

Step 48

The Stroke Emboss effect as an option to create a beveled edge will allow us to create the beveled effect of the icon on the background.

Step 49

Finally we add a metallic texture to the icon using a gradient as you can see in this picture.

Step 50

Now we create 3 leds that will light up the button when we place the mouse over it. The first step is to give the Shape Layer the color #06B9FB, doing double click on it to edit its color.

Step 51

Using the Shape Layer of the main button we create a selection.

Step 52

We expand the size of this selection by going to Select > Modify > Expand.

Step 53

We set an 8 pixels expand and we press OK.

Step 54

We invert this selection by using Select > Inverse.

Step 55

With this inverted selection we create a mask to obtain the final shape and size of the leds around the button.

Step 56

With a Stroke with same color of button surface (use color picker to get it) we create a small bevel around these lights. This will allow us to give the idea of an inserted object on the background surface.

Step 57

With Bevel and Emboss we give an upper shadow and a bottom light to our Stroke (as if the light from above would impact on these beveled edges).

Step 58

With an inverted Inner Shadow and Multiply we create an acrylic reflection over the upper area of these leds.

Step 59

We finalize the edition of these objects with a Drop Shadow that allow us to give the idea that these details in the button design change the background surface, pressing it down and creating shadowed areas around them.

Step 60

This is how our button looks like by now, but there are still some effects missing.

Step 61

We will duplicate the layer of the previous LEDs and paint this new Shape Layer in white. We start to create the light up led effect with Outer Glow and these values.

Step 62

We add the lighting of the area near the leds using Drop Shadow on Screen Blend mode.

Step 63

The Rollover state of the button it’s done. Now, by using a selection with 20 pixels Feather inside the new layer we make the background to have a convex appearance behind the button as if the background would come out from its center creating a soft 3D ball that will react to the above light.

Step 64

We paint this selection in white, previously softened with a 20 pixels feather. You can use the Paint tool or the keyboard shortcut Alt+Backspace that paints the layer with the color you are using as Foreground.

Step 65

We set the opacity of this sphere on zero (0%) in the Layer Styles edition window.

Step 66

Now with a gradient at 50% transparency and Blend Overlay (using white and black colors that are set by default in the gradients editor) we reach this spherical sensation on the button background.

Step 67

Now we are finished with the button and all its details. We just need to create some beveled edges on the background using the symmetrical vectors created in Illustrator.

Step 68

As always we take the opacity to zero.

Step 69

With a Stroke and these values we create the bas-relief of these bevels in the background.

Step 70

With white Drop Shadow and Blend Screen, we create the lighted up area of these beveled edges.

Step 71

Finally we hide a part of these beveled edges with a 20 pixels softened mask. The idea is that these would merge softly with the background and disappear towards the corners.

Conclusion

It was a long ride but the results were worth it. The final touch is a little lens flare over the upper bright area of the chromed edge. Always save a .PSD file with these resources that provide a realistic and photographic effect to reflective objects. You can view the final image below or view a larger version here.

Here is a link to the written version of the tutorial How to Create a Realistic Fountain Pen and the video version is below.

This post showcases a great selection of print design projects that make good use of textures; making the work more visually appealing. The showcase is followed by a small selection of useful links and resources.

Textures in Business Cards

Although there are thousands of textured business cards out there, it’s not very often you’re actually given one. Most business cards are very simple, which is usually suitable for the company they are representing, although there are a lot of simple cards being used to represent companies that could do so much more with their corporate image, such as landscaping and construction agencies. Below is a selection of great textured business cards.

Chuck Tingley

The use of texture in this card is incredible. A little bit of grunge mixed with paint and splatter marks is (usually) never a bad thing, and the composition of this card shows how to do it perfectly.

Artams

Redbox Media

Redbox Media use a subtle grunge texture in the red of their business card to make it just that little more appealing. The digital texture of the lined paper and coffee stains, combined with the ‘hand-drawn’ style typography make this card very unique.

Magouya

Marko Manojlovic

Well, it’s quite obvious what the texture is used for in Marko Manojlovic’s card. Although very simple, it’s interesting and definitely appeals more than a standard plain card!

Matus Macej

Colokial

Colokial use texture in their business card to give it a worn-out and stained “tropical” look. It works very well with the color scheme of the logo and that little touch of Spot UV makes it so unique!

SeedVibe

Hypno Liberate

The texture used in Hypno Liberate’s card adds a lovely vintage look to the design, matching the corporate brand of the company well.

DigitalMedia

Textures in Printed Advertisements

In my opinion, textures are used to their greatest advantage in print advertisements such as billboard posters and postcards. Taking a look at the selection of superb designs below; you can clearly see the huge difference adding a little bit of texture can make.

Jones Soda Ad

Got 2 Be

This fantastic advertisement for a hair product is incredibly clever and is made up (almost) entirely of hair texture. The addition of someones face in the bottom center of the poster makes it a little comical, too.

Zippo Hero

Smoke Shave

This great poster to encourage people to stop smoking has a great three-dimensional look to it which was created using textures. In fact, without the textures in this poster, there’d be nothing left!

Pepsi Max

Pepsi Max

These clever Pepsi Max posters (see other one above) show a depressed lonely calorie, advertising that Pepsi Max is a one calorie per can soft drink. The use of textures make the illustrations much more interesting to look at, and just gives them that extra “Oooomph”!

Musou Music Publishing

Hugo

OXY

Midwest Trader

The use of an old stained piece of paper in this poster makes it individual and much more interesting. The way it works so well and merges in with the model and birds is superb!

Days Of The New Show

Textures in Poster Design

A lot of the creative posters below actually rely on textures – without the texture in the images, some of the designs would be fairly simple and quite boring to look at. The following collection shows that texture really can bring your work to a completely new level!

First Date With Alice

“First Date With Alice” has an excellent yet simple composition and a beautiful, bright color scheme. The texture makes the poster a lot more interesting, adding different shades of color to the main shapes in the center of the poster.

All We Need To Know

The Creative Mind

This poster makes use of subtle texture to just a little more depth in the background of the piece.

Magic Tree

Saint Design

Giant Mutant Centipede

Like in the Pepsi Max advertisement posters showcased earlier in this post, this poster uses textures to add new life to the otherwise flat vector illustrations. The extra noise gives it a that little extra detailing it needs to keep you looking at the poster for a longer period of time.

Type and Grid

Squares

Light grungy textures are using in the posters “Squares” to give it an interesting background and to add a little extra noise to the model and other various shapes used in the composition. Without it, the overall feel of the poster would be completely different.

Chinawhite Dancer

A Part Of Me

First of all, I have to say “wow!" What a great poster! The vibrant colors mixed with the grungy textures and superb lighting effects make this a stunning one, definitely worthy of going on the office wall!

Typography

Global Warming

Future Imperfect

Retro Vector

This Abduzeedo poster uses texture to add a retro look to the otherwise plain background. A slightly grungier texture has been used to make those clean-cut abstract shapes fly into a completely different dimension!

Some People Refuse 2 B Default

Sour

Axygene

Last but not least, this great poster titled “Axygene” uses plenty of different textures to bring the poster to life, as well as using a grungy eraser brush to remove areas of the right-angled corners.

Links & Resources

• Freebie Roundup: 12 Places To Download Free Textures
  A round-up of 12 superb places to download free, high-resolution textures.
• 200+ Textures, Brushes, and Fonts: Ultimate Grunge Roundup
  A huge compilation of grunge resources such as textures, brushes, and fonts.
• 300+ Vintage Style Textures and Photoshop Brushes
  A collection of over 300 vintage style textures and brushes to use in your designs.
• 50+ textures for Your Design Appetite
  A lovely collection of high-resolution and free textures to use in your everyday work.
• The Big Collection Of Free Design Textures
  What seems like a never-ending list of free textures that you can download and use in all of your own designs.
• Textures in Modern Web Design
  A showcase of 50+ incredible uses of texture in fresh and modern web design.
• Dirty Design: Create a Grungy Thriller Book Cover
  Create your own grungy book cover using plenty of textures and techniques.
• How to Make a Highly Textured Site Layout in Photoshop
  In this tutorial, learn to create a textured site layout by layering multiple images.
• Create a Leather-Textured, Realistic Briefcase Icon
  Learn to crete a realistic leather briefcase entirely from scratch using layer styles and textures.

Tutorial Assets

In order to save time, you can download all of the following images before you get started.

• Empty room thanks to medialab
• A sitting guy thanks to kristtina
• Stool
• Crow 1 thanks to Lip Kee
• Crow 2 thanks to MShades
• Pile of Books
• Open book
• More books
• Paper sheet
• CD case
• Paper texture

Step 1 – Setting up the document

This time we will create a photo manipulation inspired from the classic poem of Edgar Allan Poe, "The Raven". This should not be interpreted as a graphical representation of the poem, just a twisted adaptation depicting the loneliness of the man who lost his beloved Lenore. Imagine this as an audio book project, or a rock band album cover.

Start creating the document; a standard CD cover is 4.75 x 4.75 inches. So create a document in these dimensions. If you want to actually print this you should work on a resolution of 300+ pixels per inch, but this time I’m setting the document to 200 dpi because of the photo sizes.

Once you have your image resolution set, show your rulers (Command + R) and add some guides to the document’s borders. Since this will be a print design you should add a margin for security, so go to Image > Canvas size and change the dimension to 4.85 x 4.85 inches Anchor: Center.

Step 2 – The Room

The entire poem takes place in the narrator’s room, open the "Empty Room" image in Photoshop and save it with a descriptive name like "Room.psd". This image is wide and our design should be a perfect square. We will need to stretch it without distorting it. Is pretty simple actually, first draw a Guide trying to delimit a square on the left side, then using the Rectangular Marquee Selection Tool (M) select the right side of the image, copy it and paste it matching the right side of the segment with the guide. Then using the Free Transform Control (V) and hold the Command (Ctrl) key to distort the pasted area and match the room’s horizontal wall lines.

Step 3 – Join

In order to make the reduction as polished as possible, adjust the levels of "Layer 2" as shown in the image below. I did it in 2 rounds but you can try to get it done in only one. Then, add a Layer Mask > Hide All and fill the mask with a Horizontal Gradient (White – Black). This step will make the reduction work almost perfectly.

Step 4 – Add the room into the main document

In the "Room.psd" file using the Rectangular Marquee Tool (M) select the right side of the image and hit Command (Ctrl) + Shift + C to copy all the layers of the selection (this is to avoid the step of flattening the image and helps you to keep this part of the job editable for further changes just in case). Then paste it into the main document in a new layer named "Room."

Step 5 – Add the guy

Now it is time to add one of the main characters, the guy. For this, grab the sitting guy image and open it in Photoshop, then using any technique select the guy’s shape (I’m using the Polygonal Lasso Tool). Copy the selection and paste it into the main document. Then go to Edit > Transform > Flip Horizontal to make it match the lighting of the scene. This is really important because all too often you’ll not have enough money to actually take your own shots and you’ll need to use stock and choosing just the right picture isn’t easy. Use the Free Transform Tool to reduce the guy’s size. Name the layer "Guy".

Step 6 – Overall shadow

Since I don’t want a 100% photo realistic scene, but a dramatic one; we will add several levels of shadows, the first one is the room’s shadow. Create a new layer named "Room Shadow"; using a big soft Brush (Color: #151610, Size: 300px Opacity and Flow 50%) paint all the right side of the scene, then change the Blending Mode to Multiply and its Opacity to 75%.

Step 7 – Adding more objects: a stool

Open the stool image, select its shape and paste it into the main document; name that layer "Chair". Once again you must flip it horizontally in order to match the lights.

Step 8 – Burn and desaturate

Grab the Burn tool, select "Guy" and burn all its right side to increase the shadows’ intensity. Then grab the default Sponge tool and desaturate the brighter areas. Do the same with "Chair" layer.

Step 9 – Here comes the raven

Open the " Crow1" image from the assets and select its shape using any technique (I did it with the Polygonal Lasso Tool), copy it and paste it into a layer named "Raven". Flip it Horizontally and resize it a little bit, make the crow bigger than the guy. Place it next to the room’s door.

Next add a Layer mask to the "Raven" layer using the Rectangular Marquee Tool. Do this by drawing a rectangle over the door’s shape and by filling the area with black. This way we will create the illusion of a raven entering the door without actually being destructive to the image.

Step 10 – Some books

Open the "Pile of Books" file, select the shape and paste it into a new layer named "Books", resize it and place it just over the "Chair" layer, then burn its right side as well.

Step 11 – Combine crows

Our crow is pretty nice, but it is not quite right. To fix this, we will need to manipulate it a bit by giving it a new head. Open the "Crow 2" image from the assets and select only its head. Paste it, flip it, and resize it into a new layer named "Head" above the "Crow layer" then using the same technique showed in step 3 of this tutorial, merge the head with the body; but instead of using a gradient, use a black Brush. If necessary, delete some areas of the "Crow" layer’s head.

Step 12 – More books

Since the bird wings makes the air blow we’ll add a book opened because of the breeze. Open the "Open Book" image from the assets, extract only the top open book and paste it into a new layer in the main document named "Open Book". Finally add as many more books as you want. Always remember to Burn the right side of them.

Step 13 – Shadows

Duplicate the "Raven" layer using the Free Transform tool to distort it; making it wider. Then in the Hue / Saturation (Command (Ctrl) + U) bring down the Lightness value to -100. Go to Filter > Blur > Gaussian Blur, radius 8px to blur the shadow and bring down the layer’s Opacity to 50%.

Step 14 – More shadows

We will apply this technique on almost every object in the scene, is pretty easy. Create a layer behind the related object, in this case "Raven" Layer and name it "Raven Shadow" (we did it in the previous step) then using a big soft dark Brush (#110C06) paint a shadow there. Next create a new layer named "Front Shadow" and paint shadows over the related object, in this case the raven. Then using a big and soft Eraser (E) Opacity and Flow 50% delete some areas of the front shadow where you think there should be more light. Try grouping the shadow layers and the main object into a folder in order to keep the layers organized.

Step 15 – Shadows and more shadows

Repeat the previous shadow technique but this time with the "Open Book" layer. If you want you can use the Smudge Tool on the shadow layer to merge it better with the background.

Step 16 – Guy’s shadow

Just like with the "Raven" layer on Step 14, duplicate the "Guy" layer, bring down its Lightness and Opacity and then paint both the front and back shadows as well just be sure to take special care of the shadow below his sneakers.

Step 17 – Chair and books’ shadows

Using the same technique paint the shadows of the "Chair" layer and the extra books on the floor, once again, don’t try to create a photo realistic outcome but a dramatic one, so feel free to add as many shadows as you desire but always try not to make the image too dark.

Step 18 – Room’s shadows

Using a larger dark Brush (#110C06) paint all around the room’s borders into a new layer named "Front shadows" somewhere above the "Room" layer. Finally bring down its opacity to 50%.

Step 19 – Words on the wall

This guy is really obsessed with his lost love Lenore, how can you depict a feeling like that into a mute image? That’s pretty hard isn’t it? That’s why I decided to add the word "Lenore" painted several times on the wall. For this, create a new document (any size is ok) with a neutral gray background (#A0A0A0) and using some hand drawn fonts (you can find several free fonts in dafont.com) write the word "Lenore" everywhere. Then hit Command (Ctrl) + A to select all and Command (Ctrl) + Shift + C to copy a flatten version of the image.

Step 20 – Use the vanishing point filter to paste the words on the walls and ceiling.

Create a new layer named "Wall words" above "Room" layers or "Room" folder. Then go to Filter > Vanishing Point. On the vanishing point window draw the necessary planes to put the words on the wall. If you’re not familiar with the vanishing point filter maybe you should read the following tuts first: Using the Vanishing Point Filter to Mock up a Business Card or Create an Impressive Mock-up of a Grunge Box.

Once you’ve created the planes, paste the clipboard there, drag it and resize it until looks good. This isn’t an easy process so feel free to try as many times as you need before moving forward.

Once you’ve placed the text appropriately, change the "Wall words" layer’s blending mode to Overlay.

Tip: Windows 7 and the Vanishing Point filter don’t work well together, for some reason Windows’ Aero has a conflict with the Vanishing Point engine, so if you’re working with W7 and your system suddenly crash while using this filter try changing the desktop appearance to "Windows 7 Basic".

Step 21 – Delete the extra words

Using the Polygonal Lasso Tool select the areas without walls (door and window) with the "Wall words" layer selected, then delete the selection. Then change its Opacity to 50%.

Step 22 – Raven’s motion blur

Since our crow is flying, we will need to add a motion effect, that’s pretty easy. Duplicate the "Raven" layer and place it above the original. Go to Filter > Blur > Motion Blur, set Angle: 0º and Distance 20px and hit OK, then with the Eraser Tool or using a layer mask delete some portions of the blur layer as shown the images below.

Step 23 – Some pieces of flying paper

Grab the piece of paper from the assets, extract it from the white background and paste it into a new layer above all the others in our main document. Using the Warp Tool (Edit > Transform > Warp) distort the piece of paper as shown in the image below. Repeat this step as many times as you want with different pieces of flying paper. Put all them into a folder.

Step 24 – Add shadows to the flying papers

Merge the Flying paper folder and desaturate the resulting layer. Using the Burn tool to darken some shadows over the paper itself. Then using our same old technique of shadowing, add two shadow Layers, one on the front and other on the back, paint some shadows using a dark brush. Finally you can repeat Step 22nd’s process in order to add a Motion Blur effect.

Put all the layers into a folder named "Art".

Step 25 – Add the title

Using the "Trajan" typeface, add the cover art’s title, put all the title Layers into a folder and name it "Title", then Option (Right) click on the layer miniature and select Convert to Smart Object. Then click on the Smart Object and go to 3D > New 3D Postcard From Layer, then the "Title" smart object will turn into a 3D layer with all the text still editable. This way no matter how many changes you do on the perspective, rotation and depth, you can still change the text at any time.

Add a Bevel and Emboss and a Gradient Overlay effect to the 3D layer just as shown in the bottom of the image below. Don’t worry too much about the light position and the shadow right now; we will work it on the next step.

Step 26 – Transform the 3D postcard

Using the 3D transform tool Rotate, Move and Drag the layer to make it match the wall’s perspective. Once you’ve placed the layer appropriately, add the Drop Shadow Style setting the Light angle to 30% and a big distance between shadow and text (32px in this example).

Step 27 – Edit the text

Often, clients change their minds in the middle of the project, that is why it is really important to keep your layers editable all the time. In this example we will be going to add some missing words to the title: the author name. For this you’ll need to dig trough the nested documents into the objects, first double click over the Diffuse Texture on the 3D layer ("Title" texture), a new file named "Title.psd", in this new document you will find the Smart Object layer, double click on it and finally you will see the text layers in a document named "Title2.psd", there you can expand the canvas’ size and add the third line of text. To commit the changes you should Save each document backwards, first "Text2.psd" and then "Text.psd" then you’ll see your 3D layer updated on the main document.

Step 28 – Add some grunge noise

As a grungy detail, we will add some noise to the composite. Hit D on your keyboard to load the default colors, create a new layer named "Noise" above the "Text" object and go to Filter > Render Clouds. Next go to Filter > Noise > Add Noise (set the values shown below). Finally change layer’s Blending Mode to Overlay and Opacity to 35%.

Step 29 – Adjusting the Levels

At this point you will know if the design is too dark or too light, that is why we will need to add a Levels adjustment layer to lighten the image. Now Select All (Command (Ctrl) + A) and Command (Ctrl) + Shift + C to flatten and copy the design.

The Mock-Up

Step 30 – CD Case

Sometimes clients want to see a real life example of their product. It is really hard to send a printed version of a cover art file especially if your clients are far away from you but you can send them a picture. This time we will mock up our cover art in a CD case. Open the "CD case" image in a new document named "mockup.psd" and crate a new layer above the flattened layer. Select the new layer and go to Filter > Vanishing Point, there, paint a plane matching the case shape and paste the clipboard there.

Step 31 – polish the mockup

Since the Cover art is behind the CD’s plastic case, we will need to delete some areas of the cover art layer. For this add a Layer mask to it and using the Polygonal lasso tool, select the tiny notches of the plastic cover, then fill the selection with black on the Layer Mask. You can bring down the covert art’s opacity to actually see the notches.

Then, using the Polygonal Lasso tool, once again, select a semi-circle of the notch, where the paper will be clearly visible, and fill it with black or gray.

Step 32 – The plastic

We will use a Gradient Overlay on the artwork layer to create the ’shiny plastic’ effect, this is pretty simple, just add several black-white transitions on the effect, and change its Blend Mode to Screen and its Opacity to below 20%. In addition, I’m adding an Inner Shadow to improve the depth perception.

Step 33 – Final touches

As some final touches I’m adding the "Paper Texture" layer from the assets into a new layer behind "CD" layer. Changing "CD" layer’s Blend Mode to Multiply works perfect in this case. Then just play with the texture layer, I added a dark (#36312D) Solid Color layer behind the texture; plus I increased the texture’s dark levels by adding a Layer Mask filled with a White – Black Radial Gradient; creating a dark vignette this way.

Final Image

Please take a look at the final version of our cover art.