- Launched: January 25, 2010
- First tutorial published: How to Make a Vibrant Portfolio Web Design in Photoshop
- Content published: 90
- Contributors: 33
- Comments posted: 1,547
- Twitter followers: 4,900+
- RSS Subscribers: 4,400+
- Smiling Editors: 2
What We’ve Learned
The last 6 months have been truly rewarding for us. Every new post is an adventure. Every talented contributor we’ve had the pleasure to work with continually surprises us with his or her ideas and their helpfulness in sharing their knowledge with the community. Every new comment that our readers leave brings excitement to our days.
Having had the opportunity to work on Design Instruct these last 6 months is, at one and the same time, a truly eye-opening experience, as well as a very humbling one.
The Work Hasn’t Been Always Smooth, Communication is Key
My brother and I had to adapt to a way of working from disparate locations. Add to that fact that our contributors also come from every corner of civilization; from Italy, Romania, India, Malaysia, from the American Midwest to the green hills of Ireland.
Suffice it to say that one of the biggest lessons we learned is to always communicate no matter what happens. However that communication is achieved — whether it’s through the phone, through emails, through the comments section of Design Instruct — the key to solving every problem is to always communicate, and to communicate well.
The Talent Out There is Beyond Belief
One of the greatest pleasures that we get from the work we do at Design Instruct comes from being able to find truly talented people and having them share their creativity with the community.
What we learned in this process is that talented people can come from any corner of the planet. There is no geographical epicenter for amazing work. There are only great ideas — and great ideas can come from anywhere.
For instance, on Design Instruct, you’ll find Miguel Cardona’s ink and watercolor illustrations, Mohammad Jeprie’s ultra realistic Photoshop techniques, Tyler Denis’ awesome Photoshop and Illustrator tutorials, or Ciara Panacchia’s guide on print preparation — these are great people from different parts of the world and in different design/digital arts fields. We’re glad that we were able to find all our writers and share their work with the community.
It’s About Our Community. It’s About the Readers.
At the start, we had no idea what to expect with Design Instruct. Today, as we reach this 6-month milestone, it is blindingly clear that the readers are one of the most important aspects of the work we do.
Without you, the reader, there would be no Design Instruct and there would be no community. It is the readers that we work for.
What’s in Store for the Future
As I’ve mentioned, when we started this site, we had no clue where we wanted to go beyond our single basic idea (publish great content). To an extent, we’re still not entirely sure of the shape of things to come — which isn’t a bad thing because we want you to guide us.
The fact of the matter is, the direction of Design Instruct is mostly determined by our readers and our contributors. We make decisions by reading your comments and emails, talking to our writers, and looking at the stuff that you’ve voted as the most popular (based on the page views you give them).
We want to build one of the most active and one of the most robust design communities on the Web. It’s a lofty goal, to be sure, but with the help of the community and the amazingly talented people who contribute to our web publication, we believe that it’s entirely possible.
In the future, we will set up forums to give our readers the opportunity to open up discussions and achieve two-way communication with the community.
We will also be putting together new types of content and regular features. We can’t say much more than that, so you’ll have to stick around and find out what these new types of content are for yourself.
We’re looking at ways to improve the functionality of the website to make it easier to find things, improving the search feature, navigation, and including helpful metadata on each tutorial. We will implement a filtering system for our content so that you can quickly find the right resources that you need. By the end of the year, we will be upgrading our web servers and content distribution network so that your reading experience will be smoother and with fewer issues (such as images occasionally not displaying). We want to whittle down our Upcoming Features list and push out these site features so that you can much better enjoy your reading experience.
More to the point, we will continue to bring you nothing but the best highest quality and relevant information for all of your design needs. In addition, we want to try to publish content more frequently.
We hope to have you along for the ride.
The last 6 months has been a blast. We are truly grateful to have been given the opportunity to reach such a wonderful and diverse audience and to work with immensely talented people.
It brings us great joy that we are able to contribute to the design community and to help educate and inspire people. As we continue to work on Design Instruct, our purpose becomes clearer every day: We are here to be a place for inspiration, a place to learn, and a place to share knowledge.
Whatever else we are, those are the principles we will work with every day. Our only hope is that we are able to enrich your lives in increasingly positive ways. We want to keep inspiring you to do great work. Whether you’re a professional, a student, or an enthusiast, we’re here to keep those creative juices flowing.
Design Instruct team
P.S. Let us know what you think the future holds for Design Instruct in the comments. If you’ve been with us since day 1, let your presence and support be known!
- Paper leather texture by Ervin Bartis (Creative Commons Share Alike)
- Marble texture by Telzey’s (Free Textures Set)
When I started to explore texture use in my illustrations, I was mostly inspired by the credits in “Lemony Snicket’s A Series of Unfortunate Events“, with its unusual colors and texture layering, reminiscent of Tim Burton’s artistic visions—the most recent being "Alice in Wonderland".
Like my daughter, I am very much a touch/tactile person. When I see things through her eyes, she sees everything in texture—whether it is the touch of baking flour, or petting a cat, everything to her is about texture, touch and feel, so giving some thing greater dimension was important to me since she is my audience.
Another artistic style I like can be seen in Granny O’Grimm, an Irish animated short that was nominated for an Oscar this year. I love playing with color, but I chose to keep the tones of this piece more earthy and muted with hints of vibrancy.
In this tutorial, I will share with you how all of that translates into my compositions.
Step 1: Rough Composition
The first step for me is working out the composition; my tools of choic—pencil and paper.
You can see that I wanted to plot out the scene that I wanted to create, which gives me an idea of what direction and what resources I need to be looking for to incorporate in the piece.
Step 2: Step up your workspace
Set you canvas to 7.5 x 7.5 at 300dpi and in CYMK Color Mode. CYMK is my default color mode since so much of the work that I do is 4-color print work, but feel free to work in RGB if that is your preference.
The unit of measurement is in inches instead of pixels because the artwork is intended to be printed as opposed to being displayed on the web, and the standard unit of measurement for paper is in inches as opposed to pixels.
I sometimes use reference images to act as a guide in my canvas for my outlines so then I can transform, edit and angle them to the desired size.
Step 3: Draw the base shapes
Use the Pen Tool (P) to trace around shapes for your illustration. I found some reference images of snails that I liked.
If you are illustrating any subject using reference photos, the basic selection process is to find some that are large, highly-defined and preferably on a white background.
Here’s what the traced paths should look like. Adjust their fill color as desired.
Step 4: Adding the snail’s features
Now that the outline of the main object is done, you can begin working on the details such as the eyes, shell, body and texture, making sure to create distinct layers for each feature to make them easier to edit and tweak individually.
Create the features using the Pen Tool or shape tools, and using the appropriate color fills.
Step 5: Create the radial burst on the snail’s shell
To create the radial burst for the shell, first draw a wedge-like shape with the Pen Tool (P).
Press Ctrl/Cmd + T to activate the Free Transform command.
By default, the registration point of any shape that you modify with Free Transform is its center. For our wedge, we want to move that registration point to the center top anchor point (you will see why in just a second).
Simply drag the registration point from the center to the top (as indicated below).
Next, you want to make a duplicate of the shape and then transform it. So hold down Ctrl/Cmd + Alt/Option + Shift and then press T. You will notice that, since we relocated the registration point of our initial wedge, the shape will move around in a circle to complete the necessary burst, like below.
Duplicate the layer, rotate and change the color to complete the spiral.
Add a Hue adjustment layer and vector mask to adjust the color of the snail’s shell.
Also add an Inner Glow layer style to the Hue adjustment layer to give it some depth and shading.
Step 6: Texturing the illustration
To create textures, select the Brush Tool (B) with a rough and grainy brush tip. Create a green swatch palette.
On a new layer, brush onto the snail, changing greens to make the texture feel organic. Don’t be afraid to spill outside of the edges, you can always clean it up later with the Eraser Tool (E); what’s imporant is that the texture is organic.
Afterwards, change the blending mode of the layer to Overlay and erase any brush strokes with the Eraser Tool (E).
Step 7: Constructing the background
Here is where you will need to use the textures referenced in the resources listing of this tutorial.
For the ground and sky, we will use the paper leather texture while laying it over with color, keeping the blending mode of the textured layer to Normal with 70% transparency and adjusting the hue in a new layer so we can edit and adjust the color as much as we want.
Make the shadow by using a brush and add some noise to it.
Change blending mode of the "shadow" layer to Multiply and reduce the opacity to about 50%.
The snail’s slime trail is a rough curved image with a light vertical bar gradient in the center and with blending changes.
Step 8: Add the trees in the background
For the trees, you will need the Marble texture.
Create your outline of the trees using the Pen Tool. These don’t have to be perfect—in fact, the more rough they are, the better they are in terms of harmony in the composition.
Create a selection around the shapes that the layers make (Ctrl/Cmd + click on the layers).
Add a layer with the texture and then create a mask layer on it.
Change the blending mode of the new texture layer to Multiply and adjust transparency by tweaking the opacity of the layer.
Add a slight shadow with noise to the base of the tree.
Repeat this step and reduce the size of the trees behind to create distance/depth.
Step 9: Create a custom brush for leaves
For the leaves, we will create a brush and add layers of leaves to each group of trees.
With the new brush, draw the leaves of the trees with the Brush Tool (B).
Step 10: Add the grass into the scene
Making grass is a little simpler than the other elements. Create outlines of several strands of grass, group and duplicate until you reach the desired size and width. Try to transform the shapes of the grass strands manually so that they feel organic.
Add a layer noise effect onto the grass shape by added an Inner Glow layer style and changing the Blend Mode to Multiply and tweaking the Noise value.
Add a Hue adjustment layer if you want to adjust the color of your grass.
Afterwards, create a selection around the outline of the grass by Ctrl/Cmd + clicking on the layer.
Paste the leather paper texture into the selection (Edit > Paste Into or Shift + Ctrl/Cmd + V).
Change blending mode of texture on grass to Multiply to blend it into the grass layer.
Step 11: Finishing touches
Now that our scene is composed, let’s apply the final touches.
Add shadows to the snail’s body to give it some more dimension. I like to use the Brush Tool (B) and to manually apply shadows and highlights and then remove any excess I don’t want with the Eraser Tool (E).
Add more noise
On a new layer, create a radial gradient from the center and add some noise for texture, and then switch the layer’s blending mode Multiply.
To adjust the color of the entire background, I added a Hue adjustment layer until I got the saturation I wanted.
In this tutorial, I went over a way to illustrate a snail scene in Photoshop that embodies a lot of textures. Using textures in an illustration gives it a very organic and tactile look and feel. I hope that you were able to take away some tips and techniques by reading through this tutorial, as well as become inspired to explore the use of textures in your own illustration pieces.
Download Tutorial Source File
- textured_illustrations (ZIP, 150 MB)
French digital artist, Christophe Huet is truly a master of manipulation. His work is fascinating and his clients include Nike, Motorola and the Surfrider Foundation. If you go to his website, be prepared to spend quite a bit of time there.
Jill Greenberg is a somewhat controversial photographer and digital artist. Her photographs have appeared on the cover of Time, Newsweek and her artwork has appeared in the New Yorker and Harpers. Her most widely recognised work is a series of photographs called "End Times from 2006" that featured close-ups of children’s faces in various states of distress.
In 2008, she manipulated photographs of John McCain for her website. The photographs were taken in such a way as to depict McCain in a sinister light and were generally received with a mixture of disgust and ire from photographers.
Retouching Deluxe is a German studio specializing in photo-retouching and image manipulation. The three-member team has an impressive list of clients, which include Reebok, Swatch, Deutsche Bank and AOL.
London-based Clive Biley has been working in the retouching business since 1990. His work includes photo manipulation, 3D and CGI. Clients include Adidas, HSBC, Renault and More4 Television.
Jan Oliehoek, a Dutch digital artist, started his career in image manipulation as many photo manipulators have, by getting involved in contests on the Worth1000 website. His work is full of humour and surprises and frequently features animals in unusual scenarios.
C J Burton
C J Burton is a photographer and digital artist based in LA. Clients include Time magazine, Newsweek, Esquire and Subway.
Erik Johannson is a Swedish photographer and student. His work has become well recognised on the web in the past couple of years, thanks to the inventiveness and humour in his image manipulations.
Koen Demuynck is a Belgian photographer and image manipulator.
The embossing process is done by a letterpress—a printing machine with raised plates that is covered with ink and pressed onto paper. The letterpress methodology dates back to the 15th century. Press hard enough and it will produce a depression on the paper.
In this showcase, we highlight some great examples of impressed print designs for your inspiration, printed by some of the best letterpress shops.
Studio on Fire
Studio on Fire is a letterpress printing workspace and design agency in Minneapolis, Minnesota. They also run the design blog called Beast Pieces, where they feature posts about their letterpress work.
Live Current Vol.02 CD
Erik Brandt "Sometimes" CD
2010 Studio On Fire Letterpress Calendar
2009 SOF Calendar
Iron Beast Poster
200 Year Calendar
Augmented Reality Drink Coaster
Sublimio Unique Design Formula
2008 AIGA MN Design Camp System
Established in 1997, Boxcar Press is a leading letterpress based in Syracuse, New York. They’ve worked with companies such as Domino’s Pizza, Barnes & Nobles, Sony BMG, and AOL Time Warner. Their business revolves around a sustainable printing model, using materials that reduce the impact on the environment.
P22 Type Foundry
Boxcar Press open studio invitation
A modern letterpress shop’s identity
A historic train car rendezvous
lake effect holiday card
The Mandate Press
The Mandate Press is a modern letterpress shop based in Salt Lake City, Utah. They have a saying in their workshop, "Everything looks better letterpressed."
Amelia Lyon Photography
Cranky Pressman is the online letterpress shop of Graphic Touch Letterpress Company in Ohio. The print shop dates back to 1934. Cranky Pressman works with designers such as Mikey Burton, an illustrator and graphic designer who has produced work for clients such as The Sundance Channel, Wired Magazine, and MTV2.
Don’t Lose Heart
IJM Letterpress Identity C/U
Art Finger Close-up
Reddy Or Knot
Jackson Hill Photographer
Peculiar Pair Press
Peculiar Pair Press is the graphic design studio and letterpress printing shop of Mary Beth Fiorentino and Amy Hayson.
Jingle & Mingle
Bayer & Borlase
Your Wedding Day Magazine
Taste of Ink Studios
Taste of Ink Studios offers a wide range of design and printing services, but they are most known for their expertise in premium and specialty cards, including silk, die-cut and other unique print mediums and techniques.
lux fine jewelry
lethal dose 50
Bella Figura is an eco-friendly print shop in Syracuse, New York with a client list that includes Barnes & Noble, New York Fashion Week, and Sony BMG.
Here you can see the scene we will be making. You can see a bigger image by clicking on the image below.
- Candles against black wall by Asif Akbar (Royalty free)
- The Raven by salatrixx (Royalty free)
- Black Background, Gray, Smoking, Narcotic by photl.com
- mediterranean paint 1 by Peter Zelnik (Royalty free)
- brown paper texture 6 by Deb Tremper (Royalty free)
Step 1: Create the Photoshop document
Okay, here we go! Open a new file (Ctrl/Cmd + N) in Photoshop. Name it as you wish, I named mine "Raven’s Night". Set the width and height to 3508px. As Background Contents, choose Background Color if you have black as your background color (press D to reset your foreground and background color to white and black, respectively). If you haven’t, you can color it to black (#000000) later with the Paint Bucket Tool (G).
Step 2: Put the candles in the canvas
Open Candles against black wall in Photoshop.
In this stock image, press Ctrl/Cmd + A or go to Select > All to select the whole canvas.
Then press Ctrl/Cmd + C (or Edit > Copy). Go back to your main canvas (the one we named "Raven’s Night") and press Ctrl/Cmd + V to paste the candles image into it. Name this layer "candles".
Move this layer towards the bottom of the canvas using our Move Tool (V).
Step 3: Masking the "candles" layer
In the Layers Panel, press on the Add layer mask icon to add a layer mask to the candles layer. On this mask, we will erase some parts of the background with the Brush Tool (B) to fade it better with the black background.
With the layer mask selected in the Layers Panel, use a soft brush tip with black (#000000) as your foreground to mask unnecessary parts. By this, I mean the edges of this image to make it more faded into our black background.
Here are brush settings that I have used:
Tip: Later, you should reduce the brush Opacity and Master Diameter to make masking more precise. If you accidentally delete some parts accidentally, you can easily restore them using a white brush on the layer mask.
After masking, your image should look something like this:
The advantage of working with layer masks is that you can always tweak and improve the masking until you are satisfied with it, so you don’t need to be perfectly precise.
Step 4: Add the raven into the composition
Open The Raven stock photo in Photoshop. Use the Pen Tool (P) to cut it out from its background by tracing around it. (See the tutorial source file download for an already-cut-out raven.)
After you are done with cutting out the raven, you need to place it in the "Raven’s Night" canvas. We will use the same technique as we did for placing the candles photo. Press Ctrl/Cmd + A (Select > All) to select the whole canvas, press Ctrl/Cmd + C (Edit > Copy), switch to our main canvas, and then press Ctrl/Cmd + V to paste the raven into your working composition. Name this layer "raven".
No matter how precise you cut out the object from the stock photo, there will always be some tiny flaws. In the "raven" layer, you will probably see a white edge in some places around the raven. You can remove it by choosing Layer > Matting >Defringe. Set the Width to 3px.
Here you go, the raven’s edges look a bit better.
Now it is time to put the raven where it is supposed to be in the composition. Choose Edit > Free Transform or press Ctrl/Cmd + T which should create a transform box around the subject (if not, make sure that Show Transform Controls in the Options bar is checked).
We will place our raven on the leftmost candle. Right-click inside the transform box and choose Flip Horizontal from the list of transform commands to make the subject flip to the left.
Now scale the raven by holding Shift and selecting one of the corner transform controls of the transform box. Move this handle towards the center while holding Shift to scale the raven proportionally.
Then when you are done, move it to the place where it is supposed to be—on top of the left candle.
When you are satisfied by the size and position, press Enter to apply the transformation.
Step 5: Improving the raven with clipping mask layers
Your raven probably still has some light parts that shouldn’t be there—we can paint over them with black or a dark gray color to make them more obvious.
We will make this on a new layer. While holding Alt, press on the Create a new layer icon in the Layers Panel. Name this layer "improving raven" and check the Use Previous Layer to Create Clipping Mask option.
Select the Brush Tool (B). Use a soft brush as you did before, but this time, lower the Opacity option in the Options bar to approximately 50%.
Use black color and paint all places that have rough edges or that don’t look blended into the scene. This depends on how precise you cut the raven out from its background earlier. Here is how my raven looks with and without the "improving raven" clipping mask so that you can see how well this technique does in blending in a superimposed item such as our raven.
With the "improving raven" layer
Without the "improving raven" layer
I suppose difference is more than obvious, don’t you think?
Step 6: Connecting the raven with the candle
Now we can connect the raven with the candle so that it looks like she is stuck in the wax. While holding Alt, press on Create a new layer icon in the Layers Panel. Name this layer "wax", making sure that you select the Use Previous Layer to Create Clipping Mask option. This layer should be above the "improving raven" layer.
Select the Brush Tool (B) and use a soft brush tip with the Master Diameter set approximately at 15px and Opacity to about 40%. Note that you can (and should) always change these values during the process depending on where you are painting—these options affect the accuracy and harshness of your brush, so change it based on the area you are painting, as needed.
With the Brush Tool still as your active tool, press Alt to temporarily switch to the Eyedropper Tool (very nice and handy trick for when you are painting). Pick some color from the candle near the raven’s claws. Paint with this color on the "wax" layer.
You should pick up a few different colors during this process to achieve better results.
Step 7: Desaturating the raven
You can probably notice that the raven has some kind of blue cast. It would be better if it is black since ravens are usually black. We can do this by desaturating the raven. To start, select the "raven" layer. Afterwards, choose Image > Adjustments > Desaturate or just use the keyboard shortcut for this action (Ctrl/Cmd + Shift + U).
Here is our scene so far.
Step 8: Make the flame on the candle
We are done with the raven for now. Let’s bring some life to our scene by adding light to the candle. We will do that only with the center candle.
Make a new layer above the "raven" layer and its clipping mask layers. Name this layer "Flame".
Set a green color as your Foreground color.
Select the Brush Tool (B). Set your Opacity to 60% and Master Diameter to something big like 1400px.
Click just once in the center of your scene, above the center candle.
We are going to do this several times, reducing the brush size incrementally and changing the green color to a lighter shade.
Reduce the Master Diameter of the brush to 1,200px while keeping the opacity the same. Also, change your green foreground to a slightly lighter green.
Again, click just once in the center of the color spot you previously made.
Next, reduce the brush size to 1000px and another slightly lighter green color.
Again, click on the spot you previously made.
Reduce the brush size to 800px and choose this color:
Click once in the center of color spot you previously made.
Reduce the brush size to 600px and choose a lighter green (you probably get the picture of what we’re doing now).
Press once in the center of color spot you previously made.
Reduce the brush size to 400px, choose a lighter green, and click on the center of our glow.
Reduce the brush size to 250px, choose a lighter green, and click on the center of our glow.
Reduce the brush size to 200px, and this time, also reduce Opacity to 30%. Choose another green color and click on the center to apply the paint stroke.
Reduce brush size to 150px and select a very faint green color and click on the center.
Change brush size to 1000px and press once in the center of color spot you previously made with same color to lighten up the whole flame.
Step 9: Smudge the green flame
We can make the flame look a bit less like a circle with the Smudge Tool, which is one of the best tools that can do what we want. Select the Smudge Tool from the Tools Panel and set its Strength to 36%, Master Diameter to 250px, and Hardness at 0%.
First, we can smudge the bright center a bit towards the top with an upwards motion. Set your brush size to 250px and drag it from the center of flame upwards.
Now set the brush size to 600px and smudge upwards from an area above the flame highlight.
Now it is obvious that this flame is not so super smooth, so we should blur it using Filter > Blur > Gaussian Blur.
As you can notice, our flame is now much smoother after applying the filter.
Step 10: Work on the lighting on the raven
The green flame from the candle should cast its light to other objects around it. We will start with adding some lights on the raven. First, get on the "wax" layer. While holding Alt, press on the Create a new layer icon in Layers Panel. Name this layer "lighting" and check the Use Previous Layer to Create Clipping Mask option. Afterwards, set this new clipping mask layer’s blending mode to Color.
Pick the Brush Tool (B) and use a soft brush with approximately 20% Opacity. Select a green color as your foreground color.
Paint with this color on the raven on places that the candle’s green flame should cast a light onto it.
Now it would be nice to add some highlights to raven. While holding Alt, click on the Create a new layer icon in the Layers Panel. Name this layer "raven highlights" and select the Use Previous Layer to Create Clipping Mask option. Set this layer’s blend mode to Overlay.
Select white as your foreground color and afterwards use a soft brush with Opacity set to 22% and Master Diameter to 15px.
Paint the lightened area, mostly on the right side of the raven. Also, paint with a white color on the raven’s eye to lighten it up a bit and make it a bit more prominent.
After you are done with that, duplicate the layer to achieve even more lighting. You can also paint some areas on the left side with a black color to darken them a bit.
Step 11: Work on the overall shading of the scene
Now we should shade our image a bit to achieve a more dramatic effect. Make a new layer above the "flame" layer and name it "shading".
Select the Brush Tool (B) and set black (#000000) as your foreground color.
Use a big value for the brush diameter; I used approximately 1000px, but you should change this a few times during the process depending on the area you are painting on. Also, set the Opacity option to something low—around 20% is a good value.
Paint around the flame area to fade it better to our dark background.
Below, you can see the areas where I painted with black (marked in red).
Step 12: Fix the light on the candles
Light from the middle candle should also be cast on the other two candles. The biggest problem here is that the light is coming from the left on our original candles stock photo.
It should be that way on the right candle, but the left candle should be lightened on its right side. So let’s fix that!
In the previous step, we already darkened the candle on the left side, but now we should lighten it on the right side. To start, make a new layer under the "flame" layer and name it "candle lighting". Use the Brush Tool with a soft brush and with the Opacity set to approximately 20%.
Pick some light color from the candle with the Eyedropper Tool to set your foreground color and paint with it on the right side of the candle.
Tip: I suggest turning off the visibility of the "flame" and "shading" layers while doing this step so that you can pick good colors. I started with this off-white/light gray color, but I changed it a few times while painting.
Try to keep the right edge as sharp as possible. I suggest using small brush sizes. If it will look too blurry, you can erase it a bit with the Eraser Tool (E), setting the hardness to approximately 50% or even more.
Using a light color, paint on the right side of the middle candle a bit to remove the hard shadow it has.
Step 13: Create more green flame reflections on the candles
Now it is time to add green light reflections to the candles. First, try to think of where that light from the candle should fall on the other objects. Make a new layer above the "candle light" layer and name it "reflected light". Switch its blending mode to Color. Select the Brush Tool and use the same green color as we used in Step 10.
We will also be using the same brush settings: set Hardness to 0% and approximately 20% Opacity. Use some smaller brush sizes: I used between 20px to 150px depending on the size of the area I needed to paint.
Step 14: Lightening the subject
Now it is time to bring more attention to the focus of our image. We will do that by lightening it up a bit to achieve more contrast.
Make a new layer above the "shading" layer and name it "focus". Select the Brush Tool with 30% opacity and size of 600px.
Use a white color and paint one spot in the highlighted area of the flame. Now change the brush size to 2500px and set the opacity to 10%.
Paint one spot and try to have its center between the raven and candle flame. Duplicate this layer and set its blending mode to Overlay. Now you should have something like this:
Step 15: Lightening the candle borders
Now we should lighten the edges of the left and right candles a bit as we did with our raven.
Make a new layer above the "flame" layer and name it "light edges". Set the mode to Overlay.
Use a soft brush with a size of 4px and Opacity to 20%. Paint lines on the right edge of the left candle and on the left edge of right candle.
Tip: If you do not use a graphics tablet, it would be useful to hold Shift and click with the brush once on top of the candle and once again on bottom of the candle to make a straight line. You can also paint the middle candle a bit to give it more definition.
Step 16: Creating light streaks on the candle
Let’s spice up our cool photo manipulation scene. Light effects would give a new dimension to your work. To start making more light effects, make a new layer above the "focus" layer and name it "lines".
Set the foreground color to white (#ffffff) and pick the Line Tool (U) from the Tools Panel. I have used these settings:
Draw few vertical lines of different lengths while holding Shift to ensure that they are straight.
Choose Filter > Blur > Motion Blur and use these settings:
Now you need to transform your lines a bit. Press Ctrl/Cmd + T to activate the Free Transform command and start transforming the lines to make them varied.
Right-click on a line, and then pick Perspective from the list of transform commands.
While holding Shift, move the upper left transform control towards the left, and then move the lower left control towards the right. We are changing their angle so that it looks like they are radiating from the center of the green flame.
Move the lines upward so they start from the candle’s flame. If needed, you can use the Eraser Tool (E) to erase some unnecessary lines that go under the candle flame.
Now duplicate the layer with lines and go to Filter > Blur > Gaussian Blur with the Radius set to about 15.8px.
We should now blur the lines in some parts that are close to the candle flame to make the transition a bit softer and smoother. Select the Blur Tool from the Tools Panel and set its Hardness to 0% and Strength to 50%.
On the "lines" layer, blur parts closest to the candle with the Blur Tool.
Let’s preview our work:
Step 17: Add sparkles on the candle
We can add some sparkles to the flame to give it another interesting component. Make a new layer above the "lines copy" layer and name it something intuitive like "sparkles".
Select the Brush Tool and in the Brushes Panel (Windows > Brushes or hit F5), set your options to:
Paint with the brush a few times from the lightest area towards the top of the scene. Set this layer’s blending mode to Soft Light. Now you should have something like this on the light area:
Now open the Black Background, Gray, Smoking, Narcotic stock photo of smoke from the Resources listing or find some other smoke photo that you find suitable.
Select the entire canvas (Ctrl/Cmd + A) and then copy and paste it into our working file. Name this layer "smoke" and put it above "sparkles" layer.
Desaturate the layer by pressing Ctrl/Cmd + Shift + U. Set its mode to Screen. Press Ctrl/Cmd + L or choose Image > Adjustments > Levels.
Use these settings to make the smoke a bit more contrasted:
Select the Eraser Tool (E) and erase hard edges on the bottom of the "smoke" layer.
Press Ctrl/Cmd + T to activate the Free Transform command. Drag one of the corner handles while holding Shift to downsize the smoke a bit so it fits better into the light flame.
Erase some parts of the smoke to make it more interesting and to fade it better into the background.
You can also copy this smoke layer and transform it a bit, or add some other smoke imagery to make the scene more smoky.
I added a few more smoke images, set their mode to Screen, desaturated them, fixed contrast with Levels adjustments (Image > Adjustments > Levels or Ctrl/Cmd + L), transformed them and erased some parts. I encourage you to experiment and make your own smoke effects. Mine looks like this:
Step 18: Add a texture
Now that we have spiced up our candle a bit with lighting effects, let’s try to add a textured and aged look to our scene. Textures works nicely with dark images, they add an extra flavor to them.
I have listed suggested texture files in the Resources listing above, but I also encourage you to look around the Freebies section of Design Instruct.
We will start by adding textures on the edges of our work. Open mediterranean paint 1 in Photoshop and copy and paste it into your working file.
Place this texture above all layers and name it "texture" and then press Ctrl/Cmd + Shift + U to desaturate it.
Change its mode to Screen and Opacity to approximately 25%.
Press Ctrl/Cmd + T and drag one of the corner transform controls to scale up this layer. Upsizing an image will cause it to lose quality, but since this is a texture that does not need to be extra sharp, it is fine, and in fact, desired.
Add a layer mask to this layer. With the layer mask selected, choose the Gradient Tool (G) from the Tools Panel and use these settings:
Make sure black is your foreground color and then drag on the canvas a few times to erase the texture from the middle of the scene. You can also use the Eraser Tool (E) to improve your texture masking. Try to keep the texture only on the dark background and erase it from everything else.
Now we will add another texture. Open brown paper texture 6 in Photoshop. Copy and paste it to working file. Name it "texture2" and set the blending mode to Overlay.
Put this layer above the "texture" layer.
Use the Move Tool (V) to place this texture right at the middle of canvas. Further transformations aren’t necessary.
Add a layer mask, and with the layer mask active in the Layers Panel, press Ctrl/Cmd + Shift + I to invert mask to black to mask the whole texture.
Afterwards, select the Gradient Tool (G), use white (#ffffff) as your foreground color and drag once from the center to make it visible in areas around the candle flame.
Isn’t that cool? You can see how textures can bring life and an added interesting element to your work. Feel free to experiment with different textures and blending modes to achieve different results.
Step 19: Adding some colors to the scene
It seems like we are almost done (and we are). The only thing that is left to do is making some good colors for our dark scene. I don’t want to make the scene too colorful of a piece since it is supposed to be dark and mysterious, but I will add a bit of color to it to give it another appealing element.
In the Layers Panel, press on the Create new fill or layer adjustment icon. Be sure to make this adjustment layer above all of our existing layers.
From the list of adjustment layers, select Color Balance and use the following settings:
Now create a new layer above the Color Balance adjustment layer and name it "purple edges". Select a purple color like this one:
Paint with this color using a large, soft brush tip around the edges of your canvas to achieve something like this:
Set the blending mode of this layer to Hue. Duplicate this layer and set the blending mode to Overlay. Reduce the opacity to approximately 25%.
Now we should make the focus of our scene (the green flames) a bit more eye-catching. Make a new layer and name it "center glow". Set the mode to Overlay and its Opacity to 36%.
Then select a green color like this one:
Select the Brush Tool (B) with Opacity at 100%, Hardness 0% and brush size to something large like 2500px.
Click once in the middle of the canvas (above the flame) to apply the brush stroke.
Now change the foreground color to a yellow.
Use a brush size of about 1200px and click once above the flame to make it more yellow.
Voila! You are done, congratulations!
Thank you for following along this tutorial, I hope you have learned some new techniques! To sum up, we used some pretty basic Photoshop tools such as the Brush Tool (B) to create interesting lighting effects, including a technique for creating a glowing, green flame using varying brush sizes and Gaussian Blur.
I also shared with you my method for creating light streaks using the Line Tool, and some sparkles to add some unique effects into a scene. We covered in brief some best practices for cleaning up stock images so that they blend well with the scene. Additionally, you witnessed a method for applying a purple color tint to the entire piece simply by using a Color Balance adjustment layer and the use of the Brush Tool.
If this tutorial inspired you, please share it with us! Link to your work in the comments or put it in the Design Instruct Flickr group.
Download Tutorial Source Files
- eerie_looking_photomanipulation (ZIP, 26.00 MB)
Here is what we will design in this tutorial. Click on the preview image below to see the artwork in full scale.
Step 1: Create your document and background
Create a new Photoshop document at 800 x 600px with a white background.
Set your Foreground color to white (#ffffff) and background color to a light grey color (#e2e2e2).
Select the Gradient Tool (G) with a radial gradient and then drag the radial gradient from the bottom of the canvas upwards to about halfway up your canvas.
Step 2: Draw the LCD monitor’s bezel
Create a new layer above your background layer called "monitor".
Select the Rounded Rectangle Tool (U) with a Radius of 15px then drag out a rectangular path onto your canvas.
Once you’ve dragged out your path, select the Pen Tool (P) then right-click inside your rectangle and pick Fill Path. The color of your rectangle doesn’t matter, as we will be changing the rectangle’s appearance shortly.
Still with your Pen Tool (P), right-click once more inside your rectangle and select Delete Path.
We now need to make the top of the monitor’s bezel square. To do this, pick the Rectangular Marquee Tool (M) from the Tools Panel and make a selection around one of the top corners.
Once you have made the selection, select the Paint Bucket Tool (G) and fill the selection. You may need to fill the same place twice so that all pixels are successfully filled. Do this for the two top corners only.
Next, we need to separate the rounded corners at the bottom so that they are on a separate layer. Get the Rectangular Marquee Tool (M) and make a selection around the bottom half of your rectangle.
Once you’ve made the selection, cut (Ctrl/Cmd + X) and paste (Ctrl/Cmd + V) onto a new layer.
Drag the bottom rounded corners back to the original position so that they line up with the monitor’s bezel. Once lined back up, hide the layer in the Layers Panel. Don’t forget to label the new layer as "chrome bottom" so that we can keep our work organised.
Step 3: Add the monitor bezel layer styles
We’ll now stylize our bezel. Double-click your "monitor" layer to access the Layer Styles Panel and then add the following layer styles.
Gradient Overlay Layer Style
Stroke Layer Style
Step 4: Add the bottom chrome layer styles
Unhide your "chrome bottom" layer then add the following layer styles to give it a 3D look and feel.
Bevel and Emboss
Step 5: Create the monitor’s shine effects
Create a new layer labeled "shine1".
Afterwards, select the Polygonal Lasso Tool (L) then make a selection across the monitor.
Fill the selection with white (#ffffff) then set the layer’s Opacity to 3%.
We now need to remove the excess shine that exceeds past the monitor. To do this, click the little thumbnail image in your Layers Panel on the "monitor" layer whilst holding down the Ctrl/Cmd key on the keyboard. Make sure the "shine1" layer is highlighted, then go to Select > Inverse. After inverting the selection, hit the Delete key and the excess parts should now be removed.
Create a new layer labeled "shine2", then repeat the process—only this time make the selection slightly bigger and set the layer’s Opacity to 5%.
Step 6: Draw the black screen
Load a selection around your monitor layer by selecting your "monitor" layer and then going to Select > Load Selection.
Create a new layer above your two shine layers ("shine1" and "shine2"). Label your new layer "black screen", then go to Select > Modify > Contract and contract the selection by 30px.
Make sure the "black screen" layer is selected and then fill the selection with black (#000000).
Double-click your "black screen" layer and add a 1px stroke using the settings below.
Step 7: Make the monitor screen
Load a selection around your "black screen" layer by selecting the layer and then going to Select > Load Selection.
Create a new layer labeled "tv screen" then select the Gradient Tool (G) with a radial gradient. Set your Foreground color to a dark grey (#494c50) and Background color to a very dark grey (#070908). After that, drag the radial gradient from the top of the selection down to the bottom.
Keep the selection active, don’t deselect just yet.
Add some noise by going to Filter > Noise > Add Noise.
Deselect the selection by pressing Ctrl/Cmd + D and then give it an inner shadow using the settings below.
Step 8: Adding a screen shine
Let’s apply a reflection/shine on our monitor screen. Create a new layer above your "tv screen" layer then label your new layer "screen shine".
Select the Pen Tool (P) and create a curvy path that crosses the screen.
Fill the path with the color white (#ffffff) and set the layer’s Opacity to 1%.
We now need to remove the excess shine that exceeds past the screen. Do this by clicking the little thumbnail image of the "tv screen" layer in your Layers Panel whilst holding down the Ctrl/Cmd key on the keyboard—this should create an automatic selection around it.
Make sure the "screen shine" layer is highlighted in the Layers Panel, go to Select > Inverse, and then hit the Delete key and the excess should now be removed.
Step 9: Creating the webcam
To give our monitor an interesting detail, we will draw a webcam on the top center part of its bezel. Select the Elliptical Marquee Tool (M) and on a new layer labeled "webcam1", drag out a small circular selection in the top center border area of the monitor. Hold down the Shift key to make a perfect circle.
Fill the selection in with black (#000000) then add a drop shadow using the settings below.
Load a selection around your "webcam1" layer by selecting the layer then going to Select > Load selection.
Create a new layer labeled "webcam2".
Next, with the selection we just created still active, contract the selection by 3px by going to Select > Modify > Contract.
Fill the selection with any color then add a gradient overlay using the settings below.
Load a selection around your "webcam2" layer then contract the selection by 3px.
Create a new layer and label it "webcam3", then fill your selection with a grey color (#4e4e4e).
Step 10: Creating the chrome shine
Select the Elliptical Marquee Tool (M) then drag out an ellipse with the same height as your chrome bar at the bottom of your monitor.
Fill the selection on a new layer labeled "chrome shine" with white (#ffffff).
Deselect the selection by pressing Ctrl/Cmd + D, then blur the ellipse by going to Filter > Blur > Gaussian Blur.
Once you’ve blurred the ellipse, use the Free Transform command (Edit > Free Transform or by pressing Ctrl/Cmd + T) to pull out the left and right anchor points to spread the ellipse across the chrome bottom. Also, drag the bottom anchor point up to reduce the size of the shine.
Move the shine down a touch so that it lines up nicely with the chrome bottom.
Tip: To increase the shine intensity you can also add an outer glow to the ellipse.
Step 11: Creating the glowing LED
Most monitors have an LED light to indicate that it’s turned on; to make our LCD monitor as realistic as possible, we’ll add a glowing LED light at the bottom center of our monitor’s bezel.
To begin, create a new layer and label it "LED light".
Select the Rectangular Marquee Tool (M) and drag out a small 6x3px rectangle at the bottom of the monitor.
Now add an outer glow and color overlay to your "LED light" layer to finish off the effect.
Outer Glow Layer Style
Color Overlay Layer Style
Step 12: Design the monitor buttons
We will now give our monitor some controls so that its user can adjust their viewing settings—again for the purposes of making it as realistic as we can (details count).
Start by creating four new layers and label each layer as "button 1", "button 2", "button 3", "button 4" to keep our work tidy.
Using the Rectangular Marquee Tool (M), create the same 6x3px rectangle as we did for the LED light. Place two buttons on either side of the LED light spaced equally apart.
Tip: To keep the buttons aligned perfectly, experiment and utilise the Layer > Align commands in Photoshop.
On each of the button’s layers, add a drop shadow, inner shadow, and color overlay.
Drop Shadow Layer Style
Inner Shadow Layer Style
Color Overlay Layer Style
Step 13: Creating the monitor’s stand
Create a new layer underneath your monitor layer, label your new layer "stand top" then select the Elliptical Marquee Tool (M). Then drag out an ellipse underneath your monitor.
Fill the selection with any color (it doesn’t matter what color you pick because we will be using layer styles to adjust the color later).
We are now going to duplicate the ellipse a couple of times to build up the thickness of the monitor stand. To do this, highlight your "stand top" layer in your Layers Panel, hold down the Alt/Option key on the keyboard and press the Down Arrow key 3-5 times depending on how thick you want your stand to look. Holding down Alt/Option and pressing your arrow key duplicates and moves the layer.
Select all the duplicated layers and drag them underneath the original layer ("stand top").
Here’s how mine looks. I’ve purposely colored my duplicated layers in red to make it easier to see for the purpose of this tutorial.
Merge your duplicated layers by highlighting them in the Layers Panel, right-clicking and picking Merge Layers. Label your new single layer "stand bottom".
We’re now going to add a gradient overlay to our "stand top" layer.
Once you have added your gradient overlay to "stand top", add the following layer styles to your "stand bottom" layer.
Gradient Overlay Layer Style
Stroke Layer Style
Step 14: Make the stand’s neck reflection
Select the Rectangular Marquee Tool (M) and on a new layer labeled "stand neck", drag out a rectangle starting from underneath the monitor, down to the bottom of the stand. Fill the selection with black (#000000).
Add a layer mask to your "stand neck" layer by clicking the Add layer mask button at the bottom of the Layers Panel.
Drag a linear gradient from the bottom of the rectangle upwards with the Gradient Tool (G). The effect you are looking for is to have the bottom of the rectangle blend into the stand.
We are now going to adjust the stand neck’s perspective so that the base of the neck is wider than the top portion of it. Make sure your "stand neck" layer is selected then go to Edit > Transform > Perspective. Drag the left or right anchor point outwards just a little bit.
Step 15: Creating the stand’s highlights
Let’s give the stand some more details. Choose the Elliptical Marquee Tool (M) and make a new layer labeled "stand highlight". Next, drag out a thin ellipse somewhere in the middle bottom of your stand.
Fill your selection with white (#ffffff) then apply a Gaussian blur by going to Filter > Blur > Gaussian Blur.
Once you have applied the blur, use the Free Transform command (Ctrl/Cmd + T) to modify the shape of ellipse. You want to drag the top anchor point down to reduce the ellipse’s height—you are looking to make a 2 to 3px horizontal line that’s thicker in the center to be consistent with the monitor’s base.
Then, position the ellipse across the stand bottom using your Move Tool (V).
We are now going to match the highlight up with the base of our stand. Use the Warp transform command (Edit > Transform > Warp). In the Options bar, choose Arc for the Warp option value.
Adjust the Bend % in the Warp command’s Option bar to a value that matches the contours of the base; this will be trial and error on your part until you get value that is a good fit.
Step 16: Give the monitor stand a shine
Continuing on with the details of our graphic design, we will give the stand a reflective shine. Select the Elliptical Marquee Tool (M) and drag out a big ellipse that covers about 50% of the stand.
Create a new layer and label it "stand shine". Fill the selection with the color white (#ffffff) and then deselect the selection (Ctrl/Cmd + D).
We now need to remove the excess ellipse from the stand. Do this by selecting your "stand shine" layer but loading a selection around your "stand top" layer (by Ctrl/Cmd-clicking on its thumbnail).
Go to Select > Inverse then hit the Delete key. Finally, set the "stand shine" layer’s Opacity to 5%.
Step 17: Create a shadow at the base of the monitor
Using the Elliptical Marquee Tool (M), make a big selection underneath your monitor but crossing the stand; the selection should also be the same width of the monitor (roughly).
Fill the selection on a new layer labeled "shadow" and fill the selection using the color black (#000000). Set the layer’s Opacity to about 5%.
Finally, blur the ellipse using the Gaussian blur filter at about 3 to 5px Radius.
In this graphic design tutorial, I showed you a way of creating an LCD monitor using easy techniques such as using selection tools and shape tools like the Ellipse Tool. We used a couple of Free Transform commands to modify objects to get it shaped the way we need to. To color in our artwork, we just used layer styles (color overlay and gradient overlay).
I hope you enjoyed following along this tutorial, and I look forward to your thoughts, questions, and comments.
Download Tutorial Source Files
- lcd_monitor_design (ZIP, 1.03 MB)