Design a Unique Grungy Website Layout
Create a Futuristic Glowing Text Effect
Members Area Tutorial: Follow an Expert Photo Manipulator’s WorkflowHave every post delivered to your inbox and get access to hundreds of useful design freebies.
PSDFan Extra
Delay
This tutorial took me a day longer than I anticipated to write (you’ll see why from the number of steps), but I hope you enjoy it!
Final Image
As always, this is the final image that we’ll be creating:
Step 1
Open up a new document and go to view>show>grid. Then use your path tool to draw a path in the shape of half a wine bottle. Take your time with this step in order to get a really nice shape. Use a photo for reference if necessary.
Step 2
Create a new layer called ‘bottle shape’. Then go to your paths palette and click ‘load path as a selection’. Then fill your selection with black. I had to go in with the lasso tool and tidy up a copy of edges. Duplicate this layer and go to edit>transform>flip horizontal. Then move the duplicate to complete the other half of the bottle shape. Then merge the two layers together.
Step 3
Then go to layer blending options for this merged layer and apply a gradient overlay ranging from black to 110202 back to black. The bottle will still appear almost black, but the very dark red middle part of the gradient will give it a slight 3d appearance. The gradient overlay settings and result are shown below:
Step 4
Now select your rounded rectangle shape tool (radius 30px) and create a large white rounded rectangle running down the left side of your bottle. Then do the same on the right with a red rounded rectangle and also a red oval above this. Finally, repeat this using smaller rectangles in the neck of the bottle. Then for each layer go to layer>rasterize>layer. Then merge all of your highlight layers together.
Step 5
Go to filter>blur>gaussian blur and apply a blur of 14px. Then reduce this layer’s opacity to 40%.
Step 6
Now create a new layer called ‘wine label 1′. Use your rectangular marquee selection tool to create a selection across your bottle roughly the size of a wine bottle label. Then fill this selection with white.
Then apply a gradient overlay. You want to create a custom gradient that ranges from transparent in the center (allowing the white to show through), to very light gray as you get towards the edges, to a darker gray right at the edges. This creates the illusion of depth and gives the bottle a roundness. You can use the ‘location’ tool whilst making your gradient to specify where each of these shades go. I chose to position my medium gray – light gray – transparent – transparent – light gray – medium gray, at 0%, 10%, 25%, 75%, 90%, 100%. You can see all of these settings below as well as the result:
Step 7
Now create a new layer called ‘wine label 2′ and create a thin rectangular selection beneath your white label shape. Fill this with black, and then apply a gradient overlay ranging from black, to very dark gray, back to black.
Step 8
Now create a new layer called ‘wine label 3′. Create a 2px high rectangular selection above your black label and fill it with the gradient overlay shown below. Then duplicate this layer and move it below your black gradient.
Step 9
Now create a new layer called ‘wine label 4′ and create a dark blue rectangle below your current label shapes. Then apply a black-dark blue-black gradient overlay.
Step 10
Finally to finish off this part of the label copy one of the thin gold shape layers and move this below your dark blue label. Then finally apply a light gray – white – light gray gradient to a 1px line beneath this bottom bold line, and set this layer’s opacity to around 65%.
Step 11
Select your text tool and drag a text box that covers the size of your label shapes. Then align your text centrally. Type out various bits of text to cover your labels. I’ve written the various fonts, text sizes and spacings to the right of the bottle for your reference.
Step 12
Grab an appropriate photo to use for the top of your wine label and then paste it onto a new layer beneath your text layer. I chose a lovely photo of some vine grapes (http://www.sxc.hu/photo/1064352). Then go to image>adjustments>desaturate to grayscale the image. Finally cut around the top of the image, following the contours of the grapes/leaves, and delete this selection.
Step 13
Now cut away any parts of your photo that overlap the sides of the bottle. Go to image>adjustments>brightness/contrast and increase the brightness to +90 and the contrast to +50.
Use a large, soft eraser brush to erase away the bottom of your photo layer so that it blends smoothly into the white label beneath it. Now move this layer to be just above the ‘wine label 1′ layer, and merge down. This should mean that your gray-transparent-gray gradient on the ‘wine label 1′ layer now affects your photo also.
Step 14
Now type out some golden text above your wine label. Go to edit>transform>rotate to rotate your text very slightly anti clockwise. Then create a new layer and create a swoosh underline effect beneath your text, using your path tool. Then apply a gradient overlay to each layer, the settings of which are shown below. To apply the same gradient overlay to both layers be sure to right click on the gradient overlay in your layers palette and click ‘copy layer style’. Then right click on your second layer and click ‘paste layer style’.
Step 15
Now create a new layer called ‘wine bottle top’ and create a rectangular selection over the neck of the bottle. Be sure to make your selection 1px wider either side of your bottle neck, as we want to give the impression that the bottle neck coating is going around the bottle, and is not actually part of it. Then apply the gradient overlay settings shown below:
Step 16
Now select the top few pixels of this new layer and go to edit>transform>perspective. Then use the perspective tool to drag in the top corners of your selection.
Step 17
Now create a new layer called ‘gradient line’. Make a thin selection just under the area that you have distorted using the perspective tool. Apply a gradient ranging from transparent to 2C281D. This should give a subtle shadow to your bottle neck.
Step 18
Create a new layer called ‘highlight’. Select the top part of your label (above your ‘gradient line’ shape) using the lasso tool. Then fill this selection with white. Finally, set this layer to ‘overlay’ and reduce it’s opacity to 40%.
Step 19
Now use your marquee selection tool to select the very top of your ‘wine bottle top’ layer. Copy/paste this onto a new layer called ‘wine bottle top 2′, and then go to edit>transform>flip vertical. Fit this onto the top of your label so far, and then copy the layer style (the gradient overlay) of your ‘wine bottle top’ layer, and then paste this style onto your new duplicate layer.
Then create a new layer called shadows. You should still have your dark-transparent gradient selected, so use your lasso tool and gradient tool to apply further shadows to your bottle neck, as well as a highlight on the right side.
Step 20
Now duplicate your ‘wine bottle top 2′ layer and move this to be your top layer (call it ‘wine bottle top 3′. Then go to edit>transform>flip vertical and fit it on top of your current gold label areas. Then apply a 1px drop shadow, using the settings shown below. Finally select over this area using your lasso tool and create a new layer called ‘lighten’. Fill this with white and then set the blend mode to ‘overlay’ and reduce the opacity to 40%.
Step 21
Now create a new document (3px by 12px). Create a new layer and fill the far right pixel (3rd of 3) with black, then the 2nd middle pixel with white, and leave the left pixel empty. Then hide your original white background, leaving just the layer with these two lines visible. Then go to edit>define pattern and save your pattern as ‘wine stripes’.
Now return to your original document and create a new top layer called ‘wine stripes’. Create a selection over your ‘wine bottle top 3′ shape using your rectangular marquee tool and fill it with black. Then go to your layers palette and reduce the ‘fill’ of this layer to 0% (this is located under layer opacity). This means that you won’t see the black fill, but Photoshop still recognizes the data on that layer. Then go to blending options for this layer and apply a pattern overlay, using the ‘wine stripes’ pattern that we created a moment ago. The settings of the pattern overlay are shown below, but I set the blend mode to ‘overlay’ to allow the pattern to follow the shadows/highlights of the gold area underneath it.
Step 22
Now create a new top layer called ‘wine bottle top 4′. Create a selection above your patterned area that is about double it’s height. Then fill this with a gold color. Then copy the layer styles of one of your other ‘wine bottle top’ layers and paste this layer style onto your new layer. This should apply the same gradient overlay effect.
Step 23
Now create a new layer and use your shape tool to draw out a rounded rectangle (radius 6px), color: F7EDD3 over your ‘wine bottle top 4′ area. Then go to edit>transform>rotate and rotate it a little anticlockwise. Then go to blending options for the layer and apply the drop shadow, inner shadow and gradient overlay effects shown below:
Finally duplicate this layer and move the duplicate just above the original.
Step 24
Now create a new top layer called ‘bottle top’. Use your shape tool to create a rounded rectangle (radius 6px), color: F7EDD3. This shape should be slightly wider than the rounded rectangles that we created a moment ago and should overlap the top one of the two. Then rasterize this shape and use your marquee selection tool to cut off the very bottom 2px of it, creating a straight bottom edge, not a rounded one.
Step 25
Now copy the layer styles of ‘winer bottle top 3′ (the layer that we laid the pattern layer over the top of). Copy the layer styles back onto your ‘bottle top’ layer. This should give it a gradient overlay and 1px drop shadow.
Step 26
You should still have your dark-transparent gradient selected, so create a new layer called ‘bottle top shadows’ and then use your marquee tool and a linear gradient to apply a few lines of shadow over your bottle top. I reduced this shadow layer’s opacity to around 40% as the shadows initially looked a bit harsh.
Step 27
Just to finish off the bottle neck I see a few areas that aren’t looking quite right, and can’t be solved with simple gradients. Firstly I take a small, soft, white paintbrush to the center of my ‘bottle top’ shape (on a new layer of course)’. This gives the bottle top some nice highlights. Then I reduce the opacity of my highlights layer to 40% and my shadows layer to 20%.
Step 28
Now obviously areas of my original bottle shape are sticking out above my gold bottle top layers, so I simply use my marquee selection tool to delete the top of my bottle shape. After doing this let’s see where we are. Looks like we’ve created one pretty cool looking bottle of wine!
Step 29
Now hide your original white background layer, leaving only the layer’s comprising your bottle. Then go to layer>merge visible, leaving your bottle drawing on one single layer. Then duplicate this layer, and move it behind your original. Go to edit>transform>scale and reduce it’s size to be around 95% of the size of the original. Move it so that it is to the left of your original bottle. Duplicate this layer and move it to the right of your original (but still behind it). Use your documents grid option to make sure that you’ve made these two new bottles symmetrical.
For the sake of the .psd file I’ve kept all original bottle layers in tact.
Step 30
Now to create a nice background. Hide your bottle layers, and create a new bottom layer called ‘gray background’. Then fill your document with a radial gradient ranging from medium to medium/dark gray.
Step 31
Now create a new layer called ‘clouds’. Go to filter>render>clouds, and then set your layer blend mode to ‘overlay’ and reduce it’s opacity to 30%.
Step 32
Now make your bottle layers visible again, and hide your background layers (including your original white background). Merge all visible layers (to merge the 3 bottle together) and then duplicate this merged layer. Go to edit>transform>flip vertical, and then position this new layer directly below the 3 main original bottles. Then go to edit>transform>distort and stretch out the bottom corners of your reflected bottles, just to give them a little perspective. Finally, change this layer’s blend mode to ‘overlay’ and reduce it’s opacity to 30%.
And We’re Done!
I hope that you enjoyed this tutorial, and as always would love to hear your thoughts on it. You can see the finished result again below:
Download Source File for this Tutorial
About the Author:
Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.
69 Comments:
Related Posts
Your Design Work, But More Awesome:
Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.
Fantastic tutorial (and image) Tom!
one tiny thing bugs me… i think the middle bottle should be pulled down slightly, for perspective.
absolutely love the red glow on the right side.
is a box of cigars next?
Thanks Beets, it was really fun to write, if not a little stressful
. I see your point about the perspective, that’s gonna bug me now! Thanks for commenting anyway, and you know where to go if you want to suggest a tutorial hehe 
I’m prob thinking of doing a photo manipulation tut next, but I found this first illustration one pretty cool.
this is another wonderful one Tom
Thanks Twopo
Wow! This is awesome!
Thanks kailoon
I’m really glad you enjoyed it.
Everyone: Feel free to nudge this site towards social bookmarking websites if you like the tut
Hey Tom, this is a nice one; good result and a useful thing to learn. One tip though, you should try using the spherize filter(horizontal only) on the label, it makes the bottle look more cylindrical. Like it though:)
Really great tutorial! You keeping putting out some really great stuff.
- John
http://www.designbump.com
some really good techniques der m8…. I totally love it…
Ross: Thanks for the tip, I should have thought of that.
John/Crazyhunk: Thanks a lot guys, appreciate the kind words.
two words. you rock.keep it up tom. i learn another technique on your tutorial.
Ronald
Dude you are truely a photoshop MASTER! Keep up with the tuts as im inspired by your work =)
Oh yeah i forgot to mention, to make it look more realistic you could of added the 7.5% vol. Also i dont want to sound cheeky…but this whole website looks abit like PSD TUTS? The layout any way, Just my oppinion.
NaldzGraphics: Thanks man, I really appreciate the kind words as always
Shaw: Thanks for commenting, I appreciate the support. What do you mean by the 7.5% vol exactly? Also I agree that the website looks a little like PSDTUTS, but I assure you that wasn’t intention. I hope that the content here hopefully lets the site stand out anyway.
If it’s a wine bottle, surely it must have a vol percentage on? The 7.5% was an example of wine strength lol Looking forward to your next tutorial!
Ah gotcha! I thought you were referring to some photoshop technique haha. 7.5% seems a little low for wine. Anyway, I should be posting the next tutorial tomorrow so I hope you’ll check back
Tom, great tutorial, I really appreciate all the time and hard work you put into these tutorials. Keep up the great work!
I like the details on the bottle top. Nice!
Thanks guys
That’s one hectic tutorial! nice work.
well done, but the final effect looks kinda flat. especially labels
Thanks guys. Sorry it seems flat to you Duo, I’d love any suggestions on how to improve it though
.
Very nice mate, I also like the detail on the top of the bottle makes it look so much more realistic, It can be hectic writing tutorials lol, and I like how you are pulling new and interesting ideas from the top of your head and producing really professional tutorials, I sometimes find it hard to think of ideas but they come eventually lol…Keep it up mate love the website
That look great, it is amazing how something which seems so simple can take a lot of time. Well thought out.
Steve, thanks for commenting. It’s great to see so many new faces these days! I agree that it’s hard to come up with new ideas, but at the same time inspiration can be all around you. Anyway thanks for the support – I just checked out your website and it looks awesome. I’ll definitely be checking back.
Avangelist: Thanks also
It definitely did take some time, but hopefully the end result is worth it.
Regarding the flatness, since the bottle curves backwards, whatever is on the labels actually seems narrower towards the vertical edges, and eventually everything effectively becomes a single line when the label turns perpendicular to the viewer. Now you basically have a label set flat in front of the bottle. The same goes for the cap, the ridges should not look uniform but become tighter towards the edges.
Otherwise, great stuff!
Great post, I have to email this over to my friend. She is a graphic design major. This is perfect for her =)
[...] Create a Realistic Wine Bottle Illustration from Scratch (PSDfan) [...]
Two things… One, for the first comment. Why would you pull the bottle down for perspective? The leading bottle should always be larger if it’s in the foreground.
Second, with all the #D features of CS3 (and 4!) you can wrap and light bottles and what not without doing all this.
I’m going to use this for sure! Great tutorial
First one of yours I have followed. I didn’t have any troubles at all (except for all the layers! I always end up with a jumble of them)
Thanks for the kind comments everyone!
Greg: I appreciate that there may be easier ways of lighting an object in later versions of Photoshop, but many people (including myself) are using a slightly earlier version, and I didn’t want to exclude them.
IT’S WONDERFUL.. NAGMAYAT
[...] Create a Realistic Bottle of Wine From Scratch: [...]
i just loved it..its really realistic..
Cheers guys!
In general it looks quiet good. The bottle cover especially, but if you look closely you can see that there’s no depth of field. The image looks flat. You can see that the three bottles are in the same level but the two bottles the one in the right and the one in the left are smaller. In a real image the first bottle would have some shadows which I can’t see in this design.
Good point Blakaj, lightings definitely crucial to creating a realistic image.
#1 rule of type, NEVER stretch or squeeze it. It looks childish, unprofessional, and like you made a mistake in resizing the image.
i hope u will post some tutorial on glass related projects for us to learn the tranparency technique… thanks a lot for this one
very nice. I don’t have PSD but was able to translate over to another program. excellently written even for a beginner to follow.
ciao
It’s a hard work, i’m going to try. Thanks for the tutorials
Superb! Just love them
I wish u all the luck
Ur doing a gr8 job !
Great ! Hat’s off 2 ur effort of making such drawing & then explaining it to us.
Superb. Keep it up. & Thanks.
Thanks, I’m glad you liked the tutorial!
great mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
I think this looks like a great tutorial, however I am not very familiar with photoshop, and I am having some trouble with the 3rd step. I don’t understand how you set the gradient to ‘black to black’110202. This is probably something very simple, but all I can seem to do is make it all black. Anyone know what I’m talking about? Thanks!
Wonderful tut! the wine bottles are very realistic and the whole thing really came together, though as mentioned earlier about the labels being flat, you could select the bottle with the magic wand tool then in the layers palette select all of the labels then filter>distort>spherize, a tip i picked up someplace else, it makes the edges appear to wrap around the object
Thanks for commenting Phil, that’s a good tip for the labels. I’ll try and remember it
man that was wow that so genius it such an inpiration
WOW! that is AMAZING! just one thing, how big screen do u make in the start? like ????px x ????px
i need to know!
sorry, but what colors are the gold gradient?
i think it was hard to know!
But still, its amazing!
instantshift recommended this tuts, take a look, really useful post to learn it
Awesome Tutorial.
Amazing detail. Thanks for the great tutorial!!
HI Tom,
Its such a wonderful Tutorial.!!!!! not Only beginner but also professional..
Its give a real Look of WIne bottle ..specially Redish shine On the bottle…
just little bug me In Font setting that you had did …. font is straight not on round shape as per bottle
http://baileyana.com/trade/wineBottleSyrahGrandFirepeakCuvee.JPG
check this one.. and otherway its fantastic work … !!!
Great work .. Keep it up sir..
That’s a great observation! The curved text really adds a lot I think. I’ll bear that in mind for future drawing tutorials.
Good work, but perspective problem. Label paper should not be flat.
well said
Very cool, I have to say great Tuts like this give me tons of ideas what to add to my own work… Thanks for sharing, great job..
HI
Thanks for the great tutorial!!
Thank you for getting the time to put in writing about this dilemma. I honestly appreciate it. I’ll publish a link of this submit in my website.
Hi there! This is my first visit to your blog! We are a team of volunteers and starting a new initiative in a community in the same niche. Your blog provided us valuable information to work on. You have done a extraordinary job!
Very cool effect. It’s cool to see traditional tools used along with digital effects. Works nicely together.
Great Tom, I like it very much ^__^
I agree with others about the perspective bug but I love the gold effect of the bottles top. To contribute about the perspective issue I’d have added a small roundness to the bottle baseline.
Anyway I like it, thank you!
Thanks Ester
. My favorite part was the gold detail at the top of the button. I definitely want to try another drawing tutorial soon.
My gosh! It’s almost fooling!!
Very Nice Tutorial…
Marvelous……
Thanx…..
Are you interested in creating a whiskey bottle similar to what you did here? Send me email if interested.. this is great work..
very nice tutorial………javscolar………
thanks