Think Vitamin Com

News Flash
Business Design Dev Events Interviews Learn Marketing Mobile Opinion TVM TVR Web Apps Web Design
Work Smarter Archives
Blog: Sign Up to our Newsletter

132
Enter your e-mail address below to receive regular updates on web
design, web development, web business as well as news on upcoming
21 August 2009 events and special offers.
NEW Subscribe today and receive 2 FREE Web Designer Toolkits
5 Advanced Photoshop featuring video tutorials on CSS3 (18 videos) by @bbodien and jQuery
(8 videos) by @rem.
Techniques for Web
Designers Email Address: Subscribe
BY MARKO PRLJIĆ
Subscribe to the Think Vitamin articles RSS feed
If we look at web design today, it’s anything but simple. Sometimes you
need that extra Photoshop knowledge in order to achieve the look we need.
In this step-by-step tutorial, I’m going to show you how to create five killer
effects for your site.
When I was choosing examples for this article I visited some design
galleries and roundup posts and took screenshots of design details that are
used (sometimes overused) in web design. I don’t encourage you to follow
trends but rather develop your own style. Nevertheless, it is always useful
to polish your Photoshop skills a bit more. Let’s get rockin’!
Editor’s Note: Andy Clarke will be teaching an interesting session called

“How to Design in the Browser” and Elliot Jay Stocks will be showing you
how to design the “The Perfect Portfolio” at The Future of Web Design
Tour. Think Vitamin Membership: Learn web design, HTML5, jQuery, CSS3,
Ruby on Rails, UX, JavaScript, PHP and more
#1 Awesome Buttons
Now what is a site without a great “Call to action” button? The design style
and colors will depend on your overall site style and importance of each
button. Here is one example of a simple but effective button that we’ll be
trying to recreate (taken from transmissionapps.com). Audio clip: Adobe Flash Player (version 9 or above) is
required to play this audio clip. Download the latest
converted by Web2PDFConvert.com
version here. You also need to have JavaScript enabled in
your browser.
Join host Keir Whitaker, Ryan Carson and Mike Kus for Think
Vitamin Radio, a bi-weekly chat about web design, development
and entrepreneurship. Listen to previous shows.
Think Vitamin Radio is kindly hosted by Buzzsprout
Recent Articles
11 Days till FOWA London by Ryan Carson
Step 1 Think Vitamin Radio: Episode #13 by Keir Whitaker
FOWA Las Vegas: Twitter, GitHub, Facebook, Kevin Rose,
Open New Document, set canvas to 470px wide and 350px high. Create a Jason Calacanis, Gary Vaynerchuk, Tara Hunt, Mozilla
new layer and draw in this shape with Rounded Rectangle Tool with radius +more by Ryan Carson
set to 80px.
Around the Web: Negative Space, Startups Mapped, 8 Hour
Day by Chrissie Brodigan
Introducing Stweet Fightr by Ryan Carson
Around the Web: Procssor, Diaspora’s 200k, Hipster Dinos
by Chrissie Brodigan
Around the Web: Interaction, Alex Charchar, Ps & Qs by
Chrissie Brodigan
Building User Loyalty by Alex Hunter
Popular Articles
Around the Web: Interaction, Alex Charchar, Ps & Qs
Ruby on Rails ActiveRecord: Part 1 [Video Tutorial]
Step 2
Building User Loyalty
Right after that we will add some layer filters to make this button Around the Web: Trader Joe's, Trent Walton, & Quite
immediately awesome. Drop Shadow – Color: Black, Opacity:65%, Strong
Distance: 2px, Size:2px, the rest leave by default. UX Focus [Video Tutorial]
News Twitter
Subscribe
Win one of ten iPads Article Subscribers
from LightCMS. Just
tweet to enter.
Step 3 Ads Via The Deck
News Subscribers
Gradient Overlay. Just copy these hex codes for gradient colors and place
color buckets in approximately same position as you can see in the image.
Subscribe by Email
You can receive Think
Vitamin updates via
email. Just pop your
email address in the box
below and click the
arrows.
Subscribe by RSS
You can also receive
new Think Vitamin
posts via your RSS feed
reader
Step 4
Inner Shadow will make this button stand out even more. Notice that this is
just a subtle effect. Inner Shadow – Color: Black, Opacity: 15%, Distance:
0px, Size: 5px;
Step 5
Finally add some Stroke. You will notice that this is a Gradient Stroke with
same colors as our buttons Gradient Overlay. The only difference here is
that gradient direction is set -90, which is the opposite of buttons Gradient
Overlay. With this little trick we made a nice light effect to our button and
made it stand out a bit more.
Step 6
Done with effects, time for some shine! Create a new layer above others.
Step 7
Cmnd (Ctrl) + Click on Button shape layer. We have made a selection out of
it.
Step 8
Choose Marquee Tool. Hold down the Alt key and Subtract the half from
selection.
Step 9
Choose Black to White Gradient Tool, set the layer mode to Screen and pull
upwards from bottom of selection to about 30px outside the selection.
There you have it! A nice shiny button.
Step 10
Add some text like I did here. Draw in a circle and position it like you see it
in the picture. Add a Gradient Overlay with same values like shown in the
screenshot. Finally give it a 2px white Inside stroke.
Step 11
Choose Shape Tool. From presets choose an Arrow. Rotate it.
Step 12
Like the image says, position the arrow in bottom direction.
Step 13
Now choose Direct Selection Tool and select the shape. Next, select two
points from upper part of the arrow and move them with Arrow Keys few
pixels to the right. Do the same with the right top side of the arrow, just shift
it to the left. This way our top part will become a bit thiner. With the same
tool adjust the bottom part (triangle).
Step 14
This is how it should look like. You can also see the layer structure.
#2 Navigation Menus
The most important part of a website: the navigation. I’ve chosen the
example that uses some transparency and fade out effect (taken from
legacylocker.com).
Step 1
Open a New Document, same dimensions from previous example. Create a

New Layer and fill it with Gradient Overlay using the color hex values you
can see in the image.
Step 2
For the purpose of this example I added few clouds :)
Step 3
Draw in a Rectangle, paint it with #6bb9ec and set Opacity to 65%.
Step 4
Add a Quick Mask to this layer. Choose 200px radius Soft Brush, set the
color to Black and mask the ends of this rectangle, like you see it in the
image.
Step 5
Draw in another Rectangle, but much higher. Put it under the small
rectangle. Use the same color and Opacity. Again add a Quick Mask to this
layer.
Step 6
Choose 600px Soft Brush and carefully mask bottom of the rectangle os
that top line stays visible across the document.
Step 7
Now we can play a bit with the small Rectangle by adding some light and
shadows. Cmnd (Ctrl) + Click small Rectangle to make a selection out of it.
Go to Select>Modify>Contract and enter 1px. Create a New layer and set
Mode to Overlay. Choose 200px Soft Brush, color white and click few times
the top part of the rectangle just like you see in the image.
Step 8
Do the same with bottom part just change the Brush color to Black.
Step 9
Here you can see how this looks like. It’s really a subtle effect of light and
shadow which you can use wherever you want.
Step 10
With Line Tool draw in a line just the same width as small rectangle. For
color choose #8dd1fe.
Step 11
Mask the ends of the line just like we did in Step 4. Copy this line and shift it
to the bottom of the small rectangle.
Step 12
Finally I added some Navigation items and that’s it!
#3 Typography Inset
Even though we’re used to seeing this technique now, it’s still a good skill to
add to your toolbox. Please use it only if you have to :) The example was
taken from forabeautifulweb.com.
Step 1
Same New Document filled with #aa8e5c.
Step 2
I added some floral brushes just to recreate the same background from the
example :)
Step 3
Choose Type Tool, set font to Times New Roman. Choose color #591e0d
and type something.
Step 4
Add Inner Shadow filter and use settings like shown in the image.
Step 5
Add 2px Outside Stroke with color set to #bc9f6c.
Step 6
Done! What, that’s it? Yes, that’s it! Simple and effective.
#4 Faded Shadow
With a little bit of Blur and Quick Mask we can create shadows that fade out
in any direction we want to. With this effect you can make boxes look like
they pop out of the background. This example is from mint.com.
Step 1
First thing first, the background. As usual by now, within New Document
same dimensions like previous ones.
Step 2
Draw in a white Rectangle.
Step 3
Create a New Layer and place it under the white rectangle layer. Cmnd
(Ctrl) + Click white rectangle shape. Fill the empty layer with Black.
Step 4
Go to Filter>Blur>Gaussian Blur and enter Radius: 12px.
Step 5
Add a Quick Mask to this layer. Select a 300px Soft Brush Tool and
carefully mask all
Step 6
Now this was pretty easy, don’t you think? Now you can play around with
this technique and who knows what awesome results you’ll get.
#5 Depth and 3D Space
More and more interesting 3D elements are being used in web design lately.
Here you can see how with just few extra layers, you can create an illusion
of 3D space. This example is from mosaiko.com.br.
Step 1
New Document filled with Black.
Step 2
With Rectangle Toll draw in rectangle and fill it with #21262a.
Step 3
With same tool selected draw in another, this time smaller rectangle and fill
it with #191b1d. These two rectangles will create our space on canvas. It
will look like a wall is passing through it.
Step 4
Cmnd (Ctrl) + Click bigger rectangle shape to get a selection. Create a New
layer. Choose 300px Soft Brush, color Black and click few times in top
center of the selection.
Step 5
Do the same with smaller rectangle but this time click on bottom center part
of the rectangle.
Step 6
Now, do the same for the background layer itself just use White as Brush
color.
Step 7
Draw in a 85×20 px rectangle, fill it with #555759.
Step 8
Add following effects. Drop Shadow – Color: Black, Opacity: 25%, Angle:
90, Distance: 1px, Size:4px. Inner Shadow – Color: White, Opacity: 7%,
Angle: -90, Distance: 1px, Size: 2px. Gradient Overlay, use values provided
in the image.
Step 9
Choose Pen Tool and draw in a shape like you see in the image. Fill it with
#555759.
Step 10
With a little use of Quick Mask and some Brushing we will create the illusion
of 3D space. First add a Quick Mask to the layer and with 100 px Soft Brush
mask the sides of the stripe.
Step 11
Next, select the whole stripe and choose 100px Soft Brush again. Create
New Layer, set color to white and click few times at the beginning of the
path but only with the top of the brush just like shown in the image.
Step 12
I added some navigation links, copied few more stripes, modified the
perspective a bit and there we have it.
I hope you enjoyed it and hopefully learned something new. Watch out for
Part 2 where we will be covering more interesting Photoshop techniques.
Enjoy this article?
If you liked this article, feel free to re-tweet it to let others know.
Thanks, we appreciate it :)
This post was written by
Marko Prljić
Marko is a web designer professional from the beautiful Croatia. In
his career he created designs for some respected international
clients. He likes to write, speak and share his knowledge about
web design whenever he can. When not designing websites he
spends time with his kids or thinking about The Next Big Thing.
You can find him at his temporary home called POMP and
twitter.com/markoprljic
Related Articles
Advanced CSS3 Box Shadow Techniques

John Resig on Advanced Javascript to Improve your Web App
WordPress 3.0 for Web Designers
We love .net Magazine
We're big fans of .net so they've hooked us up with a rad deal: Save 45
percent on your subscription.
132 Comments
Dave Wilkinson
# August 21, 2009 - 10:29 am
I do a lot of PSD to WordPress work and these are definitely some of

the more common design elements being used at the moment. Nice
round-up!
Dreyer
# August 21, 2009 - 10:37 am
A handful of quite common but immensly useful/re-usable tips.
Marko
# August 21, 2009 - 11:07 am
Thanks guys. Watch out this Blog for more Killer Photoshop
Techniques next week. Definitely worth it :)
Dave Sparks
# August 21, 2009 - 11:24 am
Cheers Marko, some stuff there that’s certainly worth using – nice to
hear we’ll be getting some more to play with.
Sean Smyth
# August 21, 2009 - 11:26 am
Fantastic tips and techniques. Stumbled and Retweeted :)
SteHan Botha
# August 21, 2009 - 11:31 am
Thanks a lot Marko. You know your stuff! Rock on.
A.
# August 21, 2009 - 12:42 pm
@Editor:
should really pay more attention to typo´s and missing punctuation,
leave this space/blog above the rest as it used to be.
Ryan Carson
# August 21, 2009 - 1:14 pm
Sorry, I must’ve missed them. I’ll re-check. Thanks.
GR
# August 21, 2009 - 8:12 pm
The alt text for every image in the article is

abysmally poor.
Ryan Carson
# August 21, 2009 - 10:42 pm
You’re right – that’s my fault. We’ll watch that next

time.
cedric
# August 21, 2009 - 12:43 pm
fabbbb, really it was very nice, i like that
5-advanced-photoshop-
techniques-for-web-designers
(carsonified.com) « linkThat
# August 21, 2009 - 12:51 pm
[...] http://carsonified.com/blog/design/5-advanced-photoshop-
techniques-for-web-designers/ Tags: Photoshop, Tutorials, Website
[...]
kelvinwebdesigner
# August 21, 2009 - 1:06 pm
Like it! The way you teach it is so easy and straight to the point.
Simple but importants techniques. I learned a lot.
Continua – Keep it up
phuket
# August 21, 2009 - 1:11 pm
I ever took a photoshop course but do not remember this.Thanks for

the techniques.
ภูเก็ต
vik
# August 21, 2009 - 1:21 pm
WOW! Very good tutorial, thanks
furiousBlog – in my diatribe »
Blog Archive » crazygonuts
# August 21, 2009 - 1:37 pm
[...] 5 Advanced Photoshop Techniques for Web Designers [...]
5 Advanced Photoshop
Techniques for Web Designers |
Choose Daily
# August 21, 2009 - 1:38 pm
frank
# August 21, 2009 - 2:27 pm
wow, in my opinion one of the coolest posts of the year. simple yet
invaluable techniques
ilz
# August 21, 2009 - 3:11 pm
Good stuff! I need to try some 3D effects!
*this HUGE comment box is sick! haha..
Tuto 2.0 – 5 Técnicas avanzadas

de Photoshop para diseñadores
web | PHOTOSHOPEA
# August 21, 2009 - 3:23 pm
[...] tuto, webs Los señores de Think Vitamin, a parte de tener un

portafolio muy creativo, nos traen 5 tutoriales con técnicas
avanzadas de Photoshop, para lograr resultados profesionales en el
diseño web, 5 técnicas que no deberias dejar de verlas. [[link]] [...]
Corey Rollins
# August 21, 2009 - 4:49 pm
The 3D depth suggestions were particularly helpful. Great simple tips!
Brade
# August 21, 2009 - 5:02 pm
Eeeeexcellent….
Essam
# August 21, 2009 - 5:19 pm
Awesome, and thanks a lot.

The 3D tut helped me so.
Travis Holliday
# August 21, 2009 - 5:56 pm
Excellent round up of quick photoshop tips. Thanks, Marko!
Mes favoris du 21-08-09

# August 21, 2009 - 5:57 pm
[...] Carsonified » 5 Advanced Photoshop Techniques for Web

Designers – [...]
Techniques for Web Designers «
ErnieDavis.me
# August 21, 2009 - 6:15 pm
techniques-for-web-designers/ [...]
LISTDUB» Carsonified » 5
Advanced Photoshop
Techniques for Web Designers
# August 21, 2009 - 6:58 pm

Designers. Categories: MISC Tags: photoshop, techniques Comments
(0) Trackbacks (0) Leave a comment [...]
Marko
# August 21, 2009 - 7:34 pm
Thank you all for great comments. Will be posting more great PS stuff
next week so stay tuned :)
Aaron
# August 21, 2009 - 8:08 pm
Why don’t you give any credit to the designers/agencies who’s work
you’re using as an example? A simple link to “Original” would
probably suffice, but some mention of their mad skills would be nice.
In one example (http://forabeautifulweb.com/) you can’t even see
the full name of his site.
Marko
# August 21, 2009 - 8:16 pm
Good point there Aaron. I will post all links in comments

area shortly.
Micah Slavens
# August 21, 2009 - 8:25 pm
very good point. there have been a number of

rather upset designers tweeting today.
Micah Slavens
# August 21, 2009 - 8:23 pm
good little collection of tricks. this is the kind of thing that every
beginner designer is hoping to add to their arsenal.
Kyle Weems
# August 21, 2009 - 8:48 pm
I have a problem with the way the examples are done. You make it
seem as each was your original work, when clearly you’re
copy/pasting the work of other designers and treating it as your own,
without due credit. Poor form.
Marko
# August 21, 2009 - 8:53 pm
Sorry Kyle, but if you read the article carefully you will
notice that it is more then obvious that I used some
example sites here.
Kyle Weems
# August 21, 2009 - 9:50 pm
Perhaps rather than adding credit after the fact,

and making off-hand references to their
workshops, it’d be best to at the very least attribute
each site’s screenshots to the designer. I don’t
believe that will repair relations with those
offended, but it makes it immediately more clear
who you’re being inspired by.
For example, if I wasn’t familiar with Andy Clarke’s
“For a Beautiful Web”, I wouldn’t know that it was
his sight you were using as an example. You’ve also
only given two of the designers any mention thus
far. It comes across as a PR patch, and perhaps a
poorly done one at that.
I’m sure you had no ill intent, but perhaps once any
complaints came your way a full crediting of each
source would at the very least help clear the air.
Kyle Weems
# August 21, 2009 - 9:52 pm
I missed your latest comment, where you sourced

your material. As a result, please disregard my last
paragraph of my last comment. Perhaps your
attribution would work better if it was more visible
at the top of the article?
Marko
# August 21, 2009 - 9:28 pm
Example sites I used for this article:
1. Transmissionapps
2. Legacy Locker
3. For a beautiful Web
4. Mint
5. Mosaiko
Marko
# August 21, 2009 - 9:32 pm
I truly apologize for leaving out credits to sites I used as an

example. Normally, I always credit anyone mentioned. It
was a rough week for me, and this somehow slipped
through unnoticed. Sorry again and thanks for
understanding.
Shikeb Ali
# August 23, 2009 - 9:16 am
Thanks for showing us the originals.
davlinlabs
# August 21, 2009 - 10:13 pm
This is an awesome list of effects. Much appreciated.
CrustyGeek: Miscellany » links

for 2009-08-21
# August 21, 2009 - 11:03 pm

Designers (tags: photoshop webdesign) This entry was written by
CrustyGeek and posted on August 21, 2009 at 11:03 pm and filed
under Journal. Bookmark the permalink. Follow any comments here
with the RSS feed for this post. Post a comment or leave a trackback:
Trackback URL. « links for 2009-08-20 [...]
Erik Dungan
# August 21, 2009 - 11:42 pm
Great article, but I don’t think your method for #3 is quite right. The
highlights don’t seem to be close to the original site you reference.
Personally, I call it a “letterpress effect” and do it by duplicating the

text layer, changing the color to white, moving it behind, and
dropping it down 1 pixel. If it’s light text, change the duped layer to
black and move up 1 pixel. Adjust opacity accordingly.
Good stuff overall … nice work.
Marko
# August 22, 2009 - 6:18 am
Yes Erik, it can be done in few different ways. Personally I

add a Drop Shadow 1px, Distance: 1px, Size:0px. I avoid
having one extra layer. But what you suggested is also a
way of doing it. Thanks.
Carsonified » 5 Advanced
Photoshop Techniques for Web
Designers | Squico
# August 22, 2009 - 5:40 am
[...] In: Design inspiration 22 Aug 2009 Go to Source [...]
[PHOTOSHOP] 5 Advanced
Designers – ウェブデザイナーのため
のフォトショップテクニック - mBlog
# August 22, 2009 - 8:02 am
Daily Links for Saturday, August

22th, 2009
# August 22, 2009 - 11:44 am

Designers [...]
Tim Read
# August 22, 2009 - 12:43 pm
Thanks for those tips. Nice and simple – but its good for newcomers
to get straightforward directions.
duncan
# August 22, 2009 - 5:36 pm
with regards to the 3d technique, i would recommend using a single
vanishing point to add to the illusion of depth.
Marko
# August 22, 2009 - 7:46 pm
Yup, also a possibility. Thanks for the tip.
sebastienb
# August 22, 2009 - 6:17 pm
Awesome tutorials !
Design Newz
# August 22, 2009 - 9:03 pm
Alex
# August 22, 2009 - 9:31 pm
Amazing! Thanks!
Will be checking you blog a lot more :)
Marko
# August 23, 2009 - 6:10 am
Thanks Alex.
Most Interesting Ideas

# August 23, 2009 - 6:27 am
Great lessons. Thanks!
Techdoom Reports
# August 23, 2009 - 11:42 am
[...] Read more… If you enjoyed this post, make sure to subscribe to
my rss feed. [...]
Colin
# August 23, 2009 - 2:35 pm
Thank you so much for this useful tutorial, the tips could be used for
badges and quite alot of other stuffs.
5 Photoshoptechniken für
Webdesigner : SpeakersCorner
# August 23, 2009 - 3:01 pm
[...] Carsonified: » 5 Advanced Photoshop Techniques for Web

Designers. [...]
Dave Peele
# August 23, 2009 - 4:57 pm
Great article! Lots of useful techniques! Thanks for the props in using
Rockbeatspaper’s design on Legacy Locker as an example!
http://rockbeatspaper.com/work/legacy-locker Check our case
study and browse our site.
Look forward to reading more of your excellent posts in the future!
links for 2009-08-21 - magnum

blog
# August 23, 2009 - 11:03 pm

Designers (tags: photoshop design tutorial webdesign resources ui
buttons tutorials) [...]
Web Designers - Creare
# August 24, 2009 - 7:54 am
I think all of us Web Designers on occasion are looking to finer tune

our Photoshop skills, these tutorials are a brilliant resource for that.
Are there any other good resources out there for advanced photoshop
tutorials?
Summer
# August 24, 2009 - 9:56 am
Great article! I’m looking forward to trying out the button technique!
Marko Randjelovic
# August 24, 2009 - 1:57 pm
Very nice! :D
24-Aug-2009 |
WebDesignExpert.Me
# August 24, 2009 - 2:27 pm
[...] 5 advanced photoshop techniques for web designers. Buttons,

navigation menus, etc. Each with steps and screenshots. Link. [...]
Weekly Digest for August 24th »

Alex Jones
# August 24, 2009 - 3:05 pm
Photoshop tips for web designers

# August 24, 2009 - 9:46 pm
[...] tips to save time and make us more efficient in Photoshop. This
article on Think Vitamin has 5 Advanced Photoshop Techniques for
Web Designers and is well worth a [...]
adventures of a blogjunkie »
del.icio.us bookmarks for August
25th
# August 25, 2009 - 4:03 am

Designers [...]
castercad
# August 25, 2009 - 8:15 am
awesome that’s great idea for editing photoshop… Thanks for nice tips
…
Union Room
# August 25, 2009 - 10:14 am
Brilliant post, would love to see more of this kind of info from you
guys!
Tuto
# August 25, 2009 - 12:26 pm
Oh yeah, your tips are terrible !
Web Design Updates
# August 25, 2009 - 2:27 pm
links for 2009-08-25 « Giri’s
Blogmarks
# August 25, 2009 - 6:04 pm

Designers (tags: photoshop tutorials ui layout webdesign buttons
resources design) [...]
Maggie
# August 26, 2009 - 6:47 am
Thanks a lot, will use a couple of these techniques for my next design
;)
Designers « Brian G. Davis ›
Marketing Pro/Designer
# August 26, 2009 - 3:03 pm
[...] 5 Advanced Photoshop Techniques for Web Designers August 26,

2009 | Rhetoric | 0 Comments via [...]
Carsonified » Advanced
Designers – Part 2
# August 28, 2009 - 6:46 am
[...] my second article about about advanced Photoshop techniques

for web designers. In case you missed my previous article, we have
already covered buttons, navigation, shadows and a few other useful
techniques. In this [...]
Bitstomper
# August 28, 2009 - 7:08 am
Excellent! Thanks for the effort. Great set of tools for any designer
(web or graphic).
improve your eyesight
# August 28, 2009 - 7:09 am
Any tips on other useful tutorials are welcome.
elegant business card designs |

WebDesignExpert.Me
# August 28, 2009 - 10:19 am
[...] 5 advanced photoshop techniques for web designers. buttons,

navigation menus, typography insets, etc. Link. [...]
Designers « Alicia Wilkerson
# August 28, 2009 - 1:41 pm

Designers. [...]
Screenalicio.us – Mosaiko at
Morten Skogly
# August 28, 2009 - 9:30 pm
[...] Learn how do do it in Photoshop on Carsonified.com [...]
Kenali Dan Kunjungi Objek

Wisata Di Pandeglang
# August 28, 2009 - 11:09 pm
thanks for info
Kenali Dan Kunjungi Objek

Wisata Di Pandeglang
# August 28, 2009 - 11:09 pm
so informatif
Unique Jewelry - Body Jewelry -
Diamond Jewelry - Peacock Ring
# August 28, 2009 - 11:11 pm
nice to shared
Advanced Photoshop
Techniques for Web Designers –
Part 2 - Programming Blog
# August 28, 2009 - 11:55 pm
[...] my second article about about advanced Photoshop techniques

for web designers. In case you missed my previous article, we have
already covered buttons, navigation, shadows and a few other useful
techniques. In this [...]
BlueHatDesign» Blog Archive »

Advanced Photoshop
Techniques for Web Designers
# August 29, 2009 - 7:09 pm
[...] blog, ThinkVitamin.com recently published a great 2-part series

called 5 Advanced Photoshop Techniques for Web Designers by
Marko Prljić. This post covers some simple but invaluable techniques
for creating buttons, [...]
Web Design – Design web

elements with Photoshop |
Michael Doyle | Blog
# August 30, 2009 - 1:12 am
Abhijeet
# August 30, 2009 - 8:42 pm
awasome dude thanks for very usful tips
¡Hei pwantso! » 20090830PS
# August 30, 2009 - 9:00 pm
HDesigns-Plus
# August 30, 2009 - 11:16 pm
This One was really great, thanks Ryan.
Kick-Ass Squeeze – August 2009

# September 1, 2009 - 1:52 pm
[...] 5 Advanced Photoshop Techniques for Web Designers – “When I

was choosing examples for this article I visited some design galleries
and roundup posts and took screenshots of design details that are
used (sometimes overused) in web design. I don’t encourage you to
follow trends but rather develop your own style. Nevertheless, it is
always useful to polish your Photoshop skills a bit more. Let’s get
rockin’!” [...]
Transmissionapps.com download
button in AI « Gautch
# September 1, 2009 - 10:02 pm
[...] in AI Styles, Freebie!, Illustrator So Carrsonified.com posted “5

Advanced Photoshop Techniques for Web Designers” and in the 1st
tip they show you how to make some buttons in Photoshop. Upon
seeing the [...]
gautch
# September 1, 2009 - 10:03 pm
I did the #1 Awesome Buttons in illustrator.

Free download too.
http://gautch.wordpress.com/2009/09/01/transmissionapps-com-
download-button-in-ai/
Photoshop Tutorial Round Up |
Photoshop Tutorial Round Up |
Matt Sarah
# September 2, 2009 - 12:28 pm
[...] a Retro Pop Art Advanced Techniques Business Layout Tutorial

Mastering Paths in Photoshop 800+ photoshop tutorials selected by
best web [...]
This Week’s Favourites –

September 4th 2009
# September 4, 2009 - 7:01 am
[...] knowledge of Photoshop is crucial for creating high quality

website designs. Think Vitamin have this collection of tutorials
explaining how to create the most popular of interface [...]
Darren
# September 4, 2009 - 7:42 am
Hey there, not sure if you’re taking requests but I’d love to see a from
PSD to HTML on the 3D layout shown in this posting.
Link bucket: More on this whole

Internet thing | Jay Small | Small
Initiatives
# September 4, 2009 - 12:16 pm
[...] Photoshop for Web designers, Part 1 and Part 2: Watch as these
widgets start showing up [...]
graphicbeacon
# September 5, 2009 - 2:35 pm
I always saw these styles and never knew how it was done. Thank you
so much so this. Will be implementing these soon :)
Alex
# September 5, 2009 - 11:47 pm
Awesome post, great read. thanx! Also, great looking site!
od3n
# September 6, 2009 - 6:46 pm
awesome post!
15 полезни статии от блог

пространството #2 » Мартин
Маринов – блог & портфолио
# September 7, 2009 - 11:35 am
[...] 5 Advanced Photoshop Techniques for Web Designers от [...]
Alex
# September 7, 2009 - 12:39 pm
whoa, that is sweet. Im gonna go try a few of these..
Designer Silverlight » Blog

Archive » WPF, Silverlight and
Design Links for 09/08/09
# September 8, 2009 - 6:45 pm

Designers [...]
Sam Logan
# September 9, 2009 - 9:22 am
Great article, I especially benefitted from the faded shadow tutorial.
lol4lyfe
# September 9, 2009 - 7:50 pm
5 Advanced Techniques on Being a Modern “Web Designer” (a.k.a.,
“Do a couple of web sites in a trend-driven style, and call yourself in
expert in only five steps…”)
Step 1. Do a design. Get a snippet of it used in a post, whereupon the

author never even hints at the source material being their own work.
Step 2. Author spends lots of time creating a helpful tutorial for
people to enjoy.
Step 3. Whine and tweet about not getting sourced amongst your
equally whiney friends on social media outlets.
Step 4. Cry some more, and then go post on the author’s blog about it.
Step 5. Profit. Because, not only did you just get site traffic, you also
made yourself look like an insecure whiney dodo.
carlnunes
# September 10, 2009 - 8:22 pm
Thanks for sharing Marko.
I’ll have these in a PSD, for later use, in no time!
Honest articles that reveal design secrets, like this one, always make
the design industry cry a little. It’s fear driven Tweets and comments
that show the true insecure nature of these person(s).
3,000+ Photoshop Tutorials,

Plugins, Brushes, Extensions,
Tips, Tricks, and Secrets |
Tweeaks Design
# September 13, 2009 - 1:37 pm

Designers [...]
Photo2Graphic » Blog Archive »

5 Photoshop technika
webdesignereknek
# September 14, 2009 - 12:44 pm
[...] tutorialokat ITT érheted [...]
Logo Inspiration
# September 14, 2009 - 2:03 pm
holy cr*p, that is an amazing collection of tuts!

Thanks.
abhi
# September 14, 2009 - 2:13 pm
pretty nice theme thank alot !!
Designers : Detlef Hoge |
Webdesigner
# September 14, 2009 - 3:55 pm
[...] 14, 2009 via [...]
Franz
# September 17, 2009 - 2:51 pm
nice tutorials!
Anne
# September 18, 2009 - 3:24 pm
Does anyone proofread these before you post them? In the second
example “#3dsdsd” is not a hex color code. And in the first example,
in the first gradient, “#173760″ is not the pale gray that you’re
showing.
You’ve got some nice work, but your blog would benefit from having
someone proofread for obvious errors like these.
This Week’s Favourites –

September 4th 2009 | design
monster
# September 25, 2009 - 9:00 am
[...] knowledge of Photoshop is crucial for creating high quality

website designs. Think Vitamin have this collection of tutorials
explaining how to create the most popular of interface [...]
10 Wonderful Letterpress Type
Tutorials
# September 26, 2009 - 11:20 am
[...] 6. Typography Inset-Advanced Photoshop Techniques for Web

Designers [...]

Tutorials « BeginnerPC : Tips ,
Tricks & Tutorials
# September 26, 2009 - 3:56 pm

Designers [...]
web design hertford

# September 26, 2009 - 7:59 pm
Photoshop is a must to use and a very fantastic tool for web designing.
Thanks for your kind and valuable suggestions.

Tutorials - Programming Blog
# October 1, 2009 - 3:09 pm

Designers [...]
Drew
# October 2, 2009 - 8:30 pm
Thanks for these. The simple clean button was the best.
.bless
tha collector
# October 15, 2009 - 12:22 pm
Waaw! you’re soo cool… thanks for the share!
I’ll try m’
Keep In Touch!
tha collector.
Designers | Photoshop Tutorials
# October 16, 2009 - 6:27 am
[...] Link: Carsonified » 5 Advanced Photoshop Techniques for Web

Designers [...]
Unggoy
# October 26, 2009 - 9:59 am
Nice tutorial.. but your hex values are pretty much a mess. (#3dsdsd
on tutorial no.2? And #173760 from Step 3, tutorial no.1 is not gray,
but blue)
Tips Photoshop
# December 20, 2009 - 5:06 pm
very nice and cool.. thanks :)
Tips Photoshop
# December 24, 2009 - 6:05 pm
very nice thank’s :)
ivomynttinen
# December 29, 2009 - 10:46 pm
Ok, some nice Tips, but really, there is nothing advanced.
PS Illus Tutorial and Icon «
mengedit itu mengenyangkan
# January 4, 2010 - 4:48 am
Daily Links for Saturday, August

22th, 2009 | LaptopHeaven's
Blog
# January 28, 2010 - 2:12 pm

Designers [...]
Recursos y tutoriales de
Photoshop para diseñadores
web
# February 1, 2010 - 3:29 am
[...] 66 y 90 Tutoriales de Photoshop para diseñar plantillas de sitios

web – 5 técnicas sorprendentes para profesionales del diseño en
Photoshop – Más de 300 lugares para convertirse en un experto de
Photoshop – 760 tutoriales de Photoshop [...]
shane
# February 5, 2010 - 4:23 pm
The depth & 3d space mention is something I’ve never thought of

before well done!
Will be using this soon :)
Más de 1.000 tutoriales de

Photoshop para diseñadores
web — Indómita
# February 6, 2010 - 6:02 pm
[...] 66 y 90 Tutoriales de Photoshop para diseñar plantillas de sitios

web – 5 técnicas sorprendentes para profesionales del diseño en
Photoshop – Más de 300 lugares para convertirse en un experto de
Photoshop – 760 tutoriales de Photoshop [...]
Love Design Multimedia » Blog
Archive » Top 15 Must See
Photoshop Tips & Tricks (2010)
# March 22, 2010 - 11:22 pm
[...] Article Link [...]
Maziar
# April 28, 2010 - 12:22 pm
WOW. really cool.

but would you tell me how can I encode PSD to HTML or XHTML?
Ash
# May 6, 2010 - 10:56 pm
Step 2 of #1 Awesome Buttons – You changed the layer style to

normal instead of default multiply and didnt mention it. Just thought
you might want to update it. Very good article… off to read the second
one now :-)
Jennifer R
# June 20, 2010 - 6:19 am
It’s awesome, i love the tutorial about Depth and 3D Space :)
Have your say:

Your name *
Your email*
Your website
Your comment
Submit Your Comment
Address: Contact: In partnership with

19c Charles Street, T: +44 1225 324 980
Bath BA1 1HX. E: hello@carsonified.com
United Kingdom
Registered in England.
Company No.
5057 020

Think Vitamin Com

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Think Vitamin Com

Transféré par

Droits d'auteur :

Formats disponibles

News Flash

Work Smarter Archives

Blog: Sign Up to our Newsletter

Editor’s Note: Andy Clarke will be teaching an interesting session called

Think Vitamin Radio is kindly hosted by Buzzsprout

Choose Shape Tool. From presets choose an Arrow. Rotate it.

Like the image says, position the arrow in bottom direction.

Open a New Document, same dimensions from previous example. Create a

For the purpose of this example I added few clouds :)

Draw in a Rectangle, paint it with #6bb9ec and set Opacity to 65%.

Finally I added some Navigation items and that’s it!

Same New Document filled with #aa8e5c.

Add 2px Outside Stroke with color set to #bc9f6c.

Draw in a white Rectangle.

Go to Filter>Blur>Gaussian Blur and enter Radius: 12px.

New Document filled with Black.

With Rectangle Toll draw in rectangle and fill it with #21262a.

Draw in a 85×20 px rectangle, fill it with #555759.

Enjoy this article?

Advanced CSS3 Box Shadow Techniques

We love .net Magazine

I do a lot of PSD to WordPress work and these are definitely some of

A handful of quite common but immensly useful/re-usable tips.

Fantastic tips and techniques. Stumbled and Retweeted :)

Thanks a lot Marko. You know your stuff! Rock on.

Sorry, I must’ve missed them. I’ll re-check. Thanks.

The alt text for every image in the article is

You’re right – that’s my fault. We’ll watch that next

fabbbb, really it was very nice, i like that

I ever took a photoshop course but do not remember this.Thanks for

WOW! Very good tutorial, thanks

[...] 5 Advanced Photoshop Techniques for Web Designers [...]

[...] 5 Advanced Photoshop Techniques for Web Designers [...]

Good stuff! I need to try some 3D effects!

*this HUGE comment box is sick! haha..

Tuto 2.0 – 5 Técnicas avanzadas

[...] tuto, webs Los señores de Think Vitamin, a parte de tener un

The 3D depth suggestions were particularly helpful. Great simple tips!

Awesome, and thanks a lot.

Excellent round up of quick photoshop tips. Thanks, Marko!

Mes favoris du 21-08-09

[...] Carsonified » 5 Advanced Photoshop Techniques for Web

[...] Carsonified » 5 Advanced Photoshop Techniques for Web

Good point there Aaron. I will post all links in comments

very good point. there have been a number of

Perhaps rather than adding credit after the fact,

I missed your latest comment, where you sourced

Example sites I used for this article:

I truly apologize for leaving out credits to sites I used as an

Thanks for showing us the originals.

This is an awesome list of effects. Much appreciated.

CrustyGeek: Miscellany » links

[...] Carsonified » 5 Advanced Photoshop Techniques for Web

Personally, I call it a “letterpress effect” and do it by duplicating the

Good stuff overall … nice work.

Yes Erik, it can be done in few different ways. Personally I

[...] In: Design inspiration 22 Aug 2009 Go to Source [...]

[...] 5 Advanced Photoshop Techniques for Web Designers [...]

Daily Links for Saturday, August

[...] Carsonified » 5 Advanced Photoshop Techniques for Web

Yup, also a possibility. Thanks for the tip.

[...] 5 Advanced Photoshop Techniques for Web Designers [...]

Will be checking you blog a lot more :)