1 Create From Scratch in Photoshop

If you have a tablet, you can simply draw the sketch by using the brush tool.

Don’t Have a Tablet?

If you don’t have a tablet, you can create the artwork in Adobe Illustrator and then imitate a hand drawing effect in Photoshop.

First draw a vector illustration. Then import it in Photoshop. Use a grungy brush and gently erase select parts of the image. Use the Blur tool to create the smug effect.

2 Scan It

The easiest way — scan the drawing and set the layer blending mode to Multiply.

Invert Color

If you want to have a white color stroke instead of black — go to menu Image > Adjustments > Invert (or press shortcut Cmd+i) and then select Screen blending mode.

Step It Up: Create Color Gradients

What if you want more than just a black or white stroke (ie. colors gradients)? Then you will have to extract the drawing from the white background. A simple way to do this is by using alpha channel.

• Copy (Cmd+C) the drawing.
• In the Channels palette, create a new channel. Then paste the drawing in the new channel.
• Invert (Cmd+i) the channel layer.

Go back to the Layers palette, create a new layer. Go to menu Select > Load Selection. In the Load Selection prompt box, select Channel: “Alpha 1″ (which is the name of the alpha channel I created earlier).

Shortcut Tip: the shortcut for loading a channel selection is Cmd + Opt + any number key (ie. 1, 2, 3). Learn more Photoshop shortcuts.

Fill Selection

With the channel selection loaded, you can fill it with any color.

Using It In The Design

For the purpose of this tutorial, I’m going to show you how to incorporate your hand drawing on a female model (the photo was purchased from iStock).

1. First, cut out the model.

2. Fill the background with some sort of light glowing gradients.

3. Paste the drawing on top of the model. Lock the layer transparency. Play around with the color gradients.

4. Duplicate the drawing in the background to add more details to the image.

• Preview double quotes
• Download HTML file

1. HTML source code

Start with a blockquote and some text.

<blockquote>Hello, I am a double quote...</blockquote>

2. Specify blockquote

Specify blockquote element as follow:

blockquote {
  font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif;
  width: 400px;
  background: url(images/close-quote.gif) no-repeat right bottom;
  padding-left: 18px;
  text-indent: -18px;
}

The CSS code above will display the close-quote.gif graphic background at bottom right corner. The padding-left and text-indent will create a hanging indent of -18px. It will look like this:

3. First letter of blockquote

Now add 18px left padding to the first-letter of blockquote. This will make the text align together. Then display the open-quote.gif at top left corner. Note I made the first letter in different font styles just to look nice.

blockquote:first-letter {
  background: url(images/open-quote.gif) no-repeat left top;
  padding-left: 18px;
  font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}

Pullquote style

If you want to make a pullquote, simply specify the blockquote float left or right. View my pullquote sample.

• View Demos
• Download Demo ZIP

Benefits

• This is pure CSS trick, no Javascript or Flash. It works on most browsers including IE6 (PNG hack required).
• It is perfect for designing headings. You don’t have to render each heading with Photoshop. This will save you time and bandwidth.
• You can use on any web fonts and the font size remains scalable.

How does this work?

The trick is very simple. Basically we are just adding a 1px gradient PNG (with alpha transparency) over the text.

The HTML markups

<h1><span></span>CSS Gradient Text</h1>

The CSS

The key point here is: h1 { position: relative } and h1 span { position: absolute }

h1 {
  font: bold 330%/100% "Lucida Grande";
  position: relative;
  color: #464646;
}
h1 span {
  background: url(gradient.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}

That’s it! You are done. Click here to view my demo page.

Make it work on IE6

Since IE6 doesn’t render PNG-24 properly, the following hack is required in order to display the transparent PNG (add anywhere in between the <head> tag):

<!--[if lt IE 7]>

<style>
h1 span {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>

<![endif]-->

This is why we hate IE 6!

jQuery prepend version (for semantic lovers)

If you don’t want to have the empty <span> tag in the heading, you can use Javascript to prepend the <span> tag. Here is a sample using jQuery prepend method:

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

  //prepend span tag to H1
  $("h1").prepend("<span></span>");

});
</script>

More samples

Want to make Web 2.0 glossy text?

Literally, you can apply this trick on any solid background color (as long your gradient color is the same as your background color).

Pattern / Texture

You can also apply this trick with a tile background image. Look, here is an example of zebra pattern. So, be creative!

Limitations and more…

• This trick is only suitable for solid background color elements. Your gradient color (PNG image) must be the same color as your background color.
• IE PNG hack is required if you want it to work on IE 6.
• If your gradient image is taller than the heading, the text will not be selectable.

1. Size

Larger font size indicate higher priority because it draws reader’s attention, therefore this method is commonly applied on headings.

On the other hand, you can de-emphasize by using smaller font size.

2. Typeface / Classification

Contrast can be achieved by mixing different typeface classifications. However, due to limited web safe fonts, there are only two main classifications commonly used: serif and sans-serif.

Generally, to create a contrast between the headings and the body text, we use serif font for the headings and sans-serif font for the body, or vice versa.

If you want to go beyond the web safe fonts, there are two more options:

1. CSS image replacement, that is to use CSS to hide the text and replace with a background image.
   [css + bg image = static graphic img]
2. sIFR (Flash replacement), that is to use Javascript and Flash technology to replace the text with the embedded font.
   [Javascript+Flash = any font dynamically]

Note: CSS image replacement or sIFR is not practical for long paragraph, so they are normally used for headings.

3. Color

Color contrast is a common way to distinguish between navigation, headings, link, and body text.

You can use faded color to indicate something that is disabled or not available.

Sometime you don’t need to make something bigger to get more attention, you can create emphasis by using brighter color, such as red.

You can also use color to distinguish individual word within a group of text.

When small font size combined with lighter tone color, the importance of the text is further de-emphasized.

4. Cases

When the same typeface is used for the headings and body text, contrast can be established by changing the case. Uppercase tends to get more attention than lowercase, therefore it is more suitable for headings. The CSS property to transform text to uppercase is text-transform: uppercase.

Tips: avoid using uppercase in the body text or in long sentence because it will reduce readability.

5. Style and Decoration

One of the common mistakes made by most editors (particularly the Microsoft Word users), is the tendency to use the underline decoration to emphasize certain text. This is a big mistake in web typography. Readers will misinterpret the underlined text as a link because the browser underlines the link by default. So, do not underline any text that is not a link when posting on the web.

Instead, you can use italic font style.

6. Weight

Making certain text heavier weight (bold) can also create emphasis.

Another common mistake is that people tend to bold the entire line of text. By doing so, the emphasis/contrast of the text is lost.

7. Space

Space plays the most important part in maintaining flow of your design. Good use of space will tell the reader where to start, when to pause, where it ends, and what to do next.

There are various ways to create space:

• Block break (padding or margin) is the space in between the block elements.
• Paragraph break (padding or margin) is the space created after the <p> element.
• Tracking (letter-spacing) is the space in between the characters.
• Leading (line-height) is the space in between the lines.
• Indentation (padding or margin) is commonly used for blockquote and list elements.

Conclusion

Let’s put all these methods together in practice.

External Links:

• The Elements of Typographic Style Applied on the Web
• An introduction to font families
• Web Style Guide: Typography
• A List Apart
• Elegant Web Typography by Jeff Croft (PDF)
• Five steps to better typography by Mark Boulton
• Typographic Contrast and the web

• View Demo Gallery
• Download Demo ZIP

What Are The Benefits Of This CSS Trick?

• Saves Time — You don’t have to manually create the decorative template in Photoshop and export the individual image.
• Keeps Original Source Images — So you don’t have to worry about changing the design theme in the future.
• Very Flexible — You can have a completely different look and feel by just editing the CSS.
• It Works on Any Site — This CSS trick works on any type of site, with any image size.
• Cross-Browser CompatIble — It has passed the test on most browsers (Firefox, Safari, Opera, and even the “buggy IE6“).

Basic Concept (see demo)

You need to insert an extra <span> tag within the <div> tag, with which we’ll apply a background image to create the overlaying effect. If you don’t like to have an empty span tag, you can append the span tag by Javascript (I’ll show you how later in this tutorial). Here is how it works:

Then in the CSS, the key point you have to remember is: specify the div element to position:relative and the span element to position:absolute. You can position the span element anywhere you want by using the top and left property.

IE PNG Hack

To make the transparent PNG image work on IE6, I use this wonderful iepngfix.htc hack. Download a copy of iepngfix.htc and insert the following code in between the <head> tag:

<!--[if lt IE 7]>
<style type="text/css">

  .photo span { behavior: url(iepngfix.htc); }

</style>
<![endif]-->

Look and Feel

To change the look and feel, simply edit the CSS specifications of the span element. Click the image below to see the demos I have. To show you how flexible it is, I’ve created 15 different styles (notice the HTML markup is same).

The jQuery Solution (see demo)

I know some of you (particularly the web accessibility fans) don’t like to have an empty span tag in the markup. Well, I’ve solved this issue by using jQuery to append the span tag to the source code. Insert the following code in between the <head> tag:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  //prepend span tag
  $(".photo a").prepend("<span></span>");

});
</script>

#1. Simple Gallery (see demo)

Let’s take the technique from the previous step and apply it to create a photo gallery.

#1b. Mini Icons (see demo)

This example shows you how to position different icons on top of each photo (note: an extra CSS class name is required in the span tag).

#2. Photo With Text (see demo)

This example shows you how to create a gallery with linking text (em tag).

#2b. Popup Text (see demo)

#3. Mini Paper Clip (see demo)

#4. Cork Board Gallery (see demo, IE6 version)

sIFR Version (Flash Text Replacement) (see sIFR demo)

This example uses sIFR to replace the em text with a handwritten font (notes: in this demo, the span tag is appended by jQuery)

#4b. Cork Board With Masking Tape (see demo, IE6 version)

#5. Art Gallery – Black Frame (see demo)

#5b. Art Gallery – Gold Frame (see demo)

#6. Grungy Watercolor (see demo)

sIFR Version (see sIFR demo)

#7. Glossy Style (see demo)

#8. Wood Panel Gallery (see demo)

Finally, this example demonstrates how you can apply the background image to all elements to create a wood panel gallery: ul, li, and em.

Final Remarks

As you can see, this CSS trick is very flexible. So, be creative! Feel free to incorporate the graphic images and CSS styles in this tutorial to create your own.

• View Demo CSS menu
• Download Demo ZIP

Overview

Here are the required graphics to assembe the menu (you can download from the zip).

1. Main background

Open the Photoshop file. Turn off the menu text Layer Group and save the main background as menu-bg.jpg.

2. Button graphics

Turn off the background Layer Group and leave only the menu text layers visible. Make a rectangle selection cover the “home” item, go to menu Edit > Copy Merged (Cmd + Shift + C).

Create a new file and take note of the file dimension (w x h), in my case the “home” graphic is 144 x 58px. Paste the “home” graphic in the new file. Go to menu Image > Canvas Size, adjust the image height x 2 (58 + 58 = 116px). Duplicate the home graphic layer and align it to the bottom. Erase the highlight strokes in the upper layer.

Here is how the hover effect will work. We will set the link button to 144 x 58px, when mouseover, we will shift the background image from top to bottom.

Repeat this step for the other buttons. You should have the follow graphics:

3. HTML source

When you are done with the graphics, let’s start coding. Start with an un-ordered list <ul>.

• note there is an id=”menu” assigned to the<ul> tag
• an unique class name assigned to each link <a>
• an empty <span> tag (the purpose of this is to make the mouseover effect)

<ul id="menu">
  <li><a href="#" class="home">Home <span></span></a></li>
  <li><a href="#" class="about">About <span></span></a></li>
  <li><a href="#" class="rss">RSS <span></span></a></li>
</ul>

#menu

Reset the menu to no padding, no margin, and no list-style. Specify the width and height same dimension as the menu-bg.jpg. Then attach the menu background image. The key point to remember here is set the position property to relative.

#menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 774px;
  height: 210px;
  background: url(images/menu-bg.jpg) no-repeat;
  position: relative;
}

#menu span

Specify the span element to display:none (so they will be invisible by default). Specify position:absolute, so we can place the mouseover GIF image on exact position.

#menu span {
  display: none;
  position: absolute;
}

#menu a

The key point here is the text-indent property. We specify the text-indent property with a negative value (-900%), so the text will be hidden.

#menu a {
  display: block;
  text-indent: -900%;
  position: absolute;
  outline: none;
}

#menu a:hover

When mouseover the link, we want to shift the background image from top to bottom.

#menu a:hover {
  background-position: left bottom;
}

#menu a:hover span

When mouseover the link, we want the span element to display:block.

#menu a:hover span {
  display: block;
}

#menu .home

Specify the width, height, and background image. Since we already specified all <a> element postition:absolute in previous step, now just say where the .home button should be by specifying the left and top property.

#menu .home {
  width: 144px;
  height: 58px;
  background: url(images/home.gif) no-repeat;
  left: 96px;
  top: 73px;
}

#menu .home span

Here we are specifying the width, height, background, and position of the span element of .home (mouseover GIF image)

#menu .home span {
  width: 86px;
  height: 14px;
  background: url(images/home-over.gif) no-repeat;
  left: 28px;
  top: -20px;
}

#menu .about

Copy the .home rules and rename them to .about. Now just change the width, height, background, left, and top property.

#menu .about {
  width: 131px;
  height: 51px;
  background: url(images/about.gif) no-repeat;
  left: 338px;
  top: 97px;
}
#menu .about span {
  width: 40px;
  height: 12px;
  background: url(images/about-over.gif) no-repeat;
  left: 44px;
  top: 54px;
}

#menu .rss

Repeat this step for .rss

#menu .rss {
  width: 112px;
  height: 47px;
  background: url(images/rss.gif) no-repeat;
  left: 588px;
  top: 94px;
}
#menu .rss span {
  width: 92px;
  height: 20px;
  background: url(images/rss-over.gif) no-repeat;
  left: 26px;
  top: -20px;
}

All in one:

#menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 774px;
  height: 210px;
  background: url(images/menu-bg.jpg) no-repeat;
  position: relative;
}
#menu span {
  display: none;
  position: absolute;
}
#menu a {
  display: block;
  text-indent: -900%;
  position: absolute;
  outline: none;
}
#menu a:hover {
  background-position: left bottom;
}
#menu a:hover span {
  display: block;
}

#menu .home {
  width: 144px;
  height: 58px;
  background: url(images/home.gif) no-repeat;
  left: 96px;
  top: 73px;
}
#menu .home span {
  width: 86px;
  height: 14px;
  background: url(images/home-over.gif) no-repeat;
  left: 28px;
  top: -20px;
}

#menu .about {
  width: 131px;
  height: 51px;
  background: url(images/about.gif) no-repeat;
  left: 338px;
  top: 97px;
}
#menu .about span {
  width: 40px;
  height: 12px;
  background: url(images/about-over.gif) no-repeat;
  left: 44px;
  top: 54px;
}

#menu .rss {
  width: 112px;
  height: 47px;
  background: url(images/rss.gif) no-repeat;
  left: 588px;
  top: 94px;
}
#menu .rss span {
  width: 92px;
  height: 20px;
  background: url(images/rss-over.gif) no-repeat;
  left: 26px;
  top: -20px;
}

Done

That’s it. You can preview my CSS menu.

Note: there is an IE6 bug where the <span> hover effect doesn’t display properly. To fix that, you can use Javascript to specify the <span> to display block on mouseover.

• View Demo Expandable Box
• Download Demo ZIP

Abstract

If you have been using  the Firefox 3 beta much, you might notice that it handles this automatically. Increasing the size in Firefox 3 doesn’t just increase the font size, it increases everything in size, which actually feel really natural and nice. But despite it’s growing market share, we can’t count on Firefox for the resizing needs of our users.

I am going to attempt to explain how to make an All-Expandable box, with the following features:

• Works in all major browsers
• Expands both vertically and horizontally
• Uses a single background image

This is a bit of a tall order, especially the use of the background image. This will end up using kind of a combination of the CSS sprites technique since different areas of the image will be used in different places and the Sliding Doors technique, since different amounts of those images will be visible depending on the current size.

Make the box horizontally expandable

There is one way simple way to make a box horizontally expandable: specify your width in em’s. For example:

.box {
  width: 35em;
  margin: 50px auto;
}

The margin is there for example purposes, to keep it centered and away from the top edge of the browser window.

Thinking about image placement

In this example, the box has rounded corners, a bit of a drop shadow, and a bit of an inner shadow. This means that all of the four corners of the box are distinctly different. This is uniquely challenging since images are not expandable. We will need a way to apply the four different corner images to the four corners of the box separately.

Also, we will need to overlap them in such a way that the transitions are seamless. And also, we are trying to do this with only a single background image, to make it as efficient as possible.

Below is an image of how you might think of what we need to do. The boxes would be overlapping, I nudged them apart so you can see the whole boxes.

When creating the background image, think big. The bigger your background image, the larger you will be able to expand without borking the layout. The example background is 700px wide which gets you about 4 or 5 different text sizings it works at, but it does eventually break apart above that.

Coding the box

Of course we always like to be as semantic as possible with our XTHML. That means not using extra markup for things that aren’t really content but are purely design. Unfortunately, with all this craziness of needing four boxes for our single box, it ain’t gonna happen.

This is how it’s done:

<div class="box">
  <div class="topleft">
  <div class="topright">
    <div>
       CONTENT GOES HERE
    </div>
  </div>
  </div>

  <div class="bottomleft">
  <div class="bottomright">
  </div>
  </div>
</div>

Styling the box

Here is the CSS for the four areas within the box:

.box div.topleft {
	display: block;
	background: url("images/box-bg.png") top left no-repeat white;
	padding: 2.0em 0em 0em 2.0em;
}

.box div.topright {
	display: block;
	background: url("images/box-bg.png") top right no-repeat white;
	padding: 2.0em;
	margin: -2.0em 0 0 2.0em;
}

.box div.bottomleft {
	display: block;
	height: 45px;
	margin-top: -2.0em;
	background: url("images/box-bg.png") bottom left no-repeat white;
}

.box div.bottomright {
	display: block;
	background: url("images/box-bg.png") bottom right no-repeat white;
	height: 45px;
	margin-left: 3.0em;
}

Note the negative margins are necessary to pull back from the padding applied from the parent spans. It just works out good that way with the padding, keeping text inside the box. Also note the height of the bottom spans are set in pixels. That is on purpose as they need to be kept short and not be expandable.

This has been tested in Firefox, Safari, Opera, and IE 6 and is working in all of them, so I’m fairly satisfed it’s a solid technique.

Credits

This tutorial is contributed by Chris Coyier. Visit CSS-Tricks to learn more CSS tricks from Chris.

Update:

The code in this example was updated to fix the div within a span issue and now validates.

Note: this article is written in Mac Photoshop format. If you are using PC, Cmd = Ctrl and Opt = Alt.

1. Drag selection
   With the Marquee tool, drag on the document (do not release the mouse yet), now hold down Spacebar, it will let you drag the undefined selection.

   

2. Navigate the document left or right
   Hold down the Cmd key and scroll up or down allows you to navigate the document left or right. For example, hold down Cmd + scroll up will navigate to right.

   

3. Browse the font list
   Put your cursor in the font list dropdown, you can browse the font list by pressing arrow Up or Down key.

   

4. Scale font size
   Select the text that you want to scale the font size, press Cmd + Shift + > or < to increase / decrease font size.

   

5. Zoom with the scroll wheel
   You can zoom in / out by Cmd + Opt + scroll up or down.

   

6. Drag to adjust numberic value
   Mouseover the input box, hold down Cmd + drag left or right to increase / decrease. Hold down Cmd + Opt or Shift key and drag can change the value in decimal or 10 interval. This shortcut works in all dialog palettes.

   

7. Scroll to adjust numeric value
   Put the cursor in the input box, scroll up or down to increase / decrease value. This shortcut works in all dialog palettes.

   

8. Arrow up / down to adjust numeric value
   Put the cursor in the input box, press arrow Up or Down to increase / decrease. Hold down Shift and press arrow Up or Down will change value in 10 interval.

   

9. Zoom to 100%
   Double click on the Zoom tool will zoom document to 100%.

   

10. Collapse or expand all layer groups
    You can collapse or expand all root-level layer groups by holding down Cmd + click on the triangle icon. Hold down Cmd + Opt + click on the triangle icon will collapse or expand all level layer groups.

    

11. Show / hide in a row
    If you need to show / hide more than one layers, instead of clicking one by one, you can click on the visibility icon and drag in a row.

    

12. Hide other layers
    Hold down Opt + click on the visibility icon will hide all other layers.

    

13. Navigate layer blending mode
    Opt + Shift + “-” or “+” key allows you to navigate through the blending mode dropdown.

    

14. Set specific blending mode
    Opt + Shift + C, N, M, S, D… allows to set layer to specific blending mode.
    For examples:
    Normal = Opt + Shift + N
    Screen = Opt + Shift + S
    Multiply = Opt + Shift + M
    Color = Opt + Shift + C

    

15. Lock layer transparency
    Press forward slash (“/”) to lock layer transparency.

    

16. Load Channel selection
    You probably know that Cmd + number keys (1, 2, 3) will activate the channels in sequent. Press Cmd + Opt + number keys will load the selection. For example, press Cmd + Opt + 4 will load Alpha channel 1.

    

17. Tool panels
    Press Tab to toggle tool panels.

    

18. Precise cursor
    Caps lock will display tool cursor in precise mode.

    

19. Navigate the tool list
    You can navigate through the tool list by pressing Shift + tool shorcut. For example: B = Brush tool, if you press Shift + B again, you will switch to Pencil tool.

    

20. Increase / decrease brush size
    With the Brush tool selected, you can increase / decrease the brush size by pressing [ or ] key (square bracket key). Press Shift + [ or ] will increase / decrease brush hardness.

    

21. Opacity
    You can set the layer opacity by pressing the number keys (ie. 1 = 10%, 2 = 20%…). When you have the brush tool selected, pressing the number keys will adjust the brush opacity.

    

22. Duplicate layer
    There are several shortcuts to duplicate layers.
    1. You can hold down Cmd + Opt + drag to duplicate the active layer.
    2. Cmd + Opt + arrow keys (Up, Down, Left, Right).
    3. Cmd + J will duplicate the active layer in exact position.
    4. Hold down Opt + drag within the Layers palette can also duplicate layers.

    

23. Copy visible and paste in a new layer
    Press Cmd + Opt + Shift + E will copy the visible layers and paste in a new layer.

    

24. Change workspace background
    By default Photoshop use grey for the workspace background color. You can change that by:
    1. select your favorite color
    2. choose the Paint Bucket tool
    3. Hold down Shift + click on the working area (outside the document area)

    

    Update: right-click on the workspace area to get a dropdown menu – allows you to set the background to black, grey, or a custom color (commented by Todd Patrick).

25. Fill background or foreground color
    Opt + Delete (Backspace) = fill the layer with foreground color.
    Cmd + Delete (Backspace) = fill the layer with background color

    

    Update:
    Cmd + Shift + Delete (Backspace) = Fill non-transparent pixels with background color
    Opt + Shift + Delete (Backspace) = Fill non-transparent pixels with foreground color
    (commented by André Dion)

26. Switch between document windows
    Ctrl + Tab will switch between document windows.

    

27. Load layer transparent
    Cmd + click on the layer thumbnail will load its transparency.

    

28. Scale proportionally from center
    When you are using the Marquee tools or Free Transform, hold down Opt + Shift + drag will scale proportionally from the center.

    

29. Shortcut to Eyedropper
    If you have the Brush tool selected, hold down Opt key will quickly activate the Eyedropper tool. Hold down Opt + Shift will activate the Color Sampler Tool.

    

30. Finally…
    Finally, if you want to check or set your own custom shortcuts, press Cmd + Opt + Shift + K will bring up the Keyboard Shortcuts panel.

    

Additional from the comments

• In some dialog boxes, holding the Opt key will turn the “Cancel” button into a most useful “Reset”. (by Miguel Tavares)
• To stroke a path, first select the path, then change to the brush tool, select a brush, and type Enter or Return. This works with all of the brush-like tools (eraser, clone, blur, etc.). (by buddhistMonkey)
• To turn a path into a selection, type Command-Enter or Command-Return (doesn’t matter what tool is selected). If there is already a selection, then Command-Shift-Return will add your path’s shape to the selection, Command-Option-Return will subtract it, and Command-Option-Shift-Return will select the intersection. (by buddhistMonkey)
• If you are adding a “Drop Shadow” layer effect, and you have the Layer Style dialog open to the Drop Shadow settings, you can move the shadow around by clicking and dragging in the image. This also works with the “Inner Shadow” effect. If you hold down the Option key, you can also adjust the Gradient Overlay, Pattern Overlay, and Satin effects by clicking and dragging. (by buddhistMonkey)

Do you know more shortcuts?

Do you know more Photoshop shortcuts that are not listed in this article? Please post them in the comment form. Make sure they are “secret” (not documented in the Photoshop menus).

Download Photoshop file

1. Create a new document

In Photoshop, create a new document 14 x 14px size with transparent background.

2. Draw shape outline

Use the Pencil tool, select 1px brush from the palette. Pick a dark gray color and start drawing the outline of the page icon. To draw a straight line, first click at the starting point, then hold down shift key and click at the ending point.

Tips: At any time if you want to erase the pixels, use the Eraser tool, select Pencil mode and 1px brush size.

3. Base gradient

Make a selection of the empty cutout by the Magic Wand tool. Create a new layer. Set your foreground color to light gray and background to white. Use Gradient tool, drag from top corner to lower corner diagonally.

4. Highlight and shadow

Create a new layer. Draw a 1px white inner top border to create the highlight effect. Then, draw a medium gray inner bottom border.

5. Group all layers

In the Layers palette, select all layers and press Cmd+G to group all layers in a folder.

6. Draw a pencil

Again, start drawing the outline first and then fill the inner area with either solid color or gradient. When you are done, group these layers in a separate folder.

Tips: If you want to have consistent color throughout the icon set, store the colors that you have used in the color swatches.

7. Re-use them

Here shows how I re-used the layer groups to create entire collection:

8. Export for web

After you’ve done entire set, toggle (invisible / visible) the layer groups and save them for web (Cmd+Alt+Shift+S).

Too lazy to do this tutorial? You can download  free mini icon set.