2010-12-24-blog-writing-professional-icon-

Okay boys&girls, today we’ll learn about Blogs. I bet’cha know what sort of creature they are, crawling all over the net with their millions of tiny posts…I mean legs….I bet also you  rode…wrote..at least one yourself! :D

Okay, so. How about making a blog writing icon? =]

Yea?
Okay, leeeet’s ..roll….! ^__^

This is what we’ll be making:

So! Take up that Photoshop and…step to the beat =]

  • Step 1:

Okay, make a new document, say…around 400 width and 300 height…and fill it with a neutral gray :)
Say, #545454 for example.

Okay, now name this layer “Background”. Then make a new layer above it, name it “Bottom Cover”.

  • Step 2:

Okay, that done, grab the Rectangle Tool (U) and set it to Shape Layers. Then set your Foreground color to #e7c681 and on the Bottom Cover layer, drag to create a rectangle like this:

Then click Ctrl (or Cmd on Mac) +T and holding down Ctrl (Cmd) key click on the corners and transform it into something like this:

  • Step 3:

Kay, now duplicate the Bottom Cover layer, and then right-click on the topmost of the two and choose “Clear Layer Style”.
Then, take the Move Tool (V) and move the rectangle upwards, like so:

Then take the Line Tool (U) and with your Foreground color set to #e7c681, line set to Shape Layers and line thickness set to something around 20px, drag to create a line like this:

Then take the Direct Selection Tool (A) and drag the corner anchor points of the line’s path to get something like this (at 200% zoom so you can see better) :

Move this layer between the two bottom cover layers, like so:

  • Step 4:

Now let’s do the same for the other side of the pages…”body”..iunno.
Take the Line Tool again and with the same settings as before drag a line on the other side, like so:

Then, just like before, take the Direct Selection Tool and trag the anchor points in the corners to get something like this:

Super-awesomesauce =D Now your pic should look something like this:

So far so good. Now Ctrl(Cmd)+click on the 3 recent layers, so you have all of them selected in a dark blue color in your Layers Palette like so:

…and drag them 3 over the tiny square-like icon at the bottom of your Layers Palette, to duplicate them :) Hide one set of duplicates for later use :)

Then click Ctrl(Cmd)+E to merge the other 3 into one single layer, name this layer “Pages Body”.

Then go to your “Bottom Cover” layer and right-click on it, choose Copy Layer Style and return to your “Pages Body” layer, right-click on it, choose Paste Layer Style.
Awesome! ^___^

  • Step 5:

Okay, let’s make the pages look like…well…errr…pages? xD

See this image below? Right-click on it, save to disk. Then open it up in Photoshop :)
Go to Edit—>Define Pattern–>name it “Pages Pattern”.


Good!
Now make a new layer above your Pages Body one, name it “Pages1″ and fill it with this pattern using the Paint Bucket tool (G) set to Fill–>Pattern :)
Next, press Ctrl(Cmd)+T to resize it to about half the size and rotate it a bit, so you get something like this (so that the lines are parallel to the bottom edges of the pages body) :

Kay, now remember those duplicated parts of the pages body? Ctrl(Cmd)+click on the thumbnail of the layer corresponding to that size of the notebook’s pages, like this:

Niiiceee…now press Ctrl(Cmd)+Shift+I to inverse selection, then click….Delete =D  Deselect. Nice&easy =]

Now you should have something like this left:

  • Step 6:

Oki. Now obtain a selection of your Pages 1 layer by Ctrl(Cmd)+clicking on its layer thinmbail, and setting your foreground color to #b09e6e, take the Paint Bucket Tool (G) and on a new layer fill the selection with color. Careful, that your Bucket has remained set to “Fill With Pattern” from last time you used it so make sure it’s set to Fill with Foreground ^_~
Okay, name this layer “Pages 2″ and move it a couple of pixels down, so what you get is this:

Now make a new layer inbetween your Pages Body and the two Page1&2 ones, and…well wait, no need to name it anymore, it won’t stay around for long =] Obtain a selection of that same hidden layer with which we worked earlier, like this:

Set your Foreground color to #61481f and fill the selection on the new layer you just created.
Then Ctrl(Cmd)+click on it AND the Pages Body one, to have them both in blue in the Layers Palette, and press Ctrl(Cmd)+E to merge them. This way we’ll get rid of the layer effects of the Pages Body =]

Next, take the Burn&Dodge tools, and setting them to soft, round brushes about 40px in size, and Range: Shadows/Exposure: 11%/NO Airbrush (for Burn) and Range: Highlights/Exposure: 11%/YES Airbrush for Dodge, burn&dodge a bit to get something similar to this after-effect:

Now follow the previous steps for the left side as well :) Since it’s a repetitive process, I’ll show just the screenshots :)

  • Step 7:

Niiice =] Mooo-vin on ^__^

No now your layers palette should look something like this (maybe different layer names):

Re-name your ex-pages layer to “Pages Body”.

Now let’s take care of some shadows, okay? :)
Make a new layer inbetween your Bottom Cover and the Pages Body :) Name it “Pages Body Shadow”.
Now Ctrl(Cmd)+click on the Pages Body layer thumbnail to obtain its selection…then set your Foreground color to #663a16 and taking the Paint Bucket tool, fill the selection on the Pages Body Shadow layer.
Set the layer to Multiply blending mode and lower its Fill to about 90%, then move it a little bit down, just a few pixels ^^

Like so:

Take then the Blur Tool (R), set it to a soft, round brush of about 40px, Mode: Normal, Strength: 50%.
Blur a bit so you get something similar to this:

  • Step 8:

Okay, now we’ll make some leafy leaves..pages…well you get my meaning  >w<

Good, set your foreground color to #e7be8e and take the Rectangle Tool (U). Set it to Shape Layers and on a new layer, draw a rectangle….like so:

Take the Direct Selection Tool (A) and drag the 4 anchor points in the corner to make the rectangle follow the lines of the “Pages Body” like this:

Now duplicate the layer, and hide the duplicate =)
Then…well…..give your visible page these layer styles:

Suuper ^^ Let’s move on.

  • Step 9:

Okay now right-click on the layer, choose “Copy Layer Style”. we’ll need it later ^_~
Next name it to “Base Page”.
Then make a new layer on top of it, and right-click on the new layer….Create Clipping Mask.

Set your Foreground color to #faedca and taking the Gradient Tool (G) set to Foreground to Transparent, drag like so to create a highlight on the base page:

Then Ctrl(Cmd)+click on both layers in the Layers Palette and press Ctrl(Cmd)+E to merge them into one.
Mmkay, we’re done with this page (for now).
Remember the shape we duplicated? Okay, go back to it and duplicate it again, make sure one of the copies is hidden and another visible, and on the visible one right-click—>Paste Layer Style. Then take the Direct Selection Tool again and drag the anchor points a bit to resize and curve like so (you might find it useful to use the Convert Point Tool) :

Do the same with the clipping mask and gradient as before, so you get somehting like this:

Okay, now select both layers and merge them, as before then re-name it to “Page 2″  :)

  • Step 10:

Okay, more pages now =O
Duplicate the hidden shape layer again, so we always have a backup. make one of them visible (preferably the bottommost one) and with the Direct Selection Tool (A) drag the anchor points like so:

Paste the layer style……The same thing with the clipping mask and gradient…na-na-na…..merge the two (clipping mask and layer it is assigned to)…re-name the resulting layer to “Page 3″.

Okay, laaast fortre…err..page xD
Take the last one of the shape layers and make it visible. Paste layer style to it and re-shape using the Convert Point Tool and the Direct Selection Tool to a shape like this:

Same thing..new layer…clipping mask….gradient….blebleble…so you get something similar to this:

  • Step 11:

Okay, time to add ambiental lighting to these pages, what’d you reckon? ^___~
Let’s start from the bottommost one. The “Base Page” you know? Make a new layer and move it on top of the Base Page one. Then right-click on this new layer and Create Clipping Mask.
Then set your Foreground color to #804d27 and obtain a selection of the page layer ABOVE the page you are working on now (by Ctrl(Cmd)+clicking on its layer thumbnail), like so :

Using thr Paint Bucket Tool (G) fill the selection with your dark brown foreground color we just set…and then deselect.
Go to Edit–>Transform–>Warp and srag the controls to something similar to this:

Okay, now go to Filter—->Blur—>Gaussian Blur, give it a setting of about 1,7 let’s say :)
Set the layer to Multiply blending mode and lower its Fillto about 90%.
Then take the Burn tool (O) set it to a soft round brush of around 50px and Range: Shadows, Exposure: 11%, NO airbrush, then click here&there where the shadow would be deeper in reality (closer to the point where the page on which we are working now and the one above it meet).
Like..this!

You can use the dodge tool as well a bit on the lighter shadows since you’re at it…however you think it looks best for your own pic, it’s optional :)

  • Step 12:

Nice…=]

Kaykay, mooo-vin’ on ^^
This is how your Layers Palette should look now…well at least similar to this, maybe other names&such.

Kay, now press Ctrl(Cmd)+E to merge the shadow clipping mask with its “master” layer….yea that means to merge it with the layer that’s beneath, that’d be the Base Page ^_~

Now one more tweak and we’re totally finished with this page ^^
Take the Dodge Tool (O) and set it to a soft, round brush, of about 50px in size, Range: Highlights, Exposure: 11%, YES airbrush.
Then on the page layer where we worked till now dodge a bit around its edges, like so (I circled the area where you should use Dodge) :

Done!…

…with this page xD

Okay, on to the page above it =] As before, make a new layer above it….transform that layer into a clipping mask…then obtain a selection of the page above and fill it on the freshly-made clipping mask with the Foreground color #804d27, deselect, warp it like so:

Set to Multiply, lower Fill to about 90%, blur it a bit like before…..ok =] Burn it baby! =] Dodge it! Merge..ta-daaaa =D

Something similar to this is what you should be obtaining:

  • Step 13:

Last page time now.
Well..last page with shadows.
Do just the process we did before….warp it then blur, burn, dodge, merge, etc.

In the end, you’ll get something similar to:

Very well so far, now we should take care of the page flip, you know?
Oki, so. Take the Pen Tool (P), set it to Shape Layers, and set your Foreground color to #63821d. Take that Pen and on a new layer placed right above your top-most page layer, draw a shape like so (this is at 300% zoom, for you to see better) :

Okay, now set your Foreground color to #d0ba63 and your background one to #8e6c21 and make a new layer above the shape you just made. Right-click on it and choose Create Clipping Mask.
Niiiceee..now take the Gradient Tool, set it to Foreground to Background, Linear Gradient, make sure Reverse is NOT clicked……and drag from the tip to the base of the shape (which is in fact our page flip) like this:

You can use a bit of good ol’Burn&Dodge tools to lighten or darken the light&dark parts…and you should get something like this:

Okay, now make a new layer and make it into a clipping mask for our flip page shape as well (you should have: the flip shape layer, then above it the gradient clipping mask, then the layer you just made now which is ALSO a clipping mask…)
Oki so set your Foregroun color to #d58c1b draw on the freshly-made layer a liiiiittle orange tint, like the texture reflection off a semi-shiny surface, iunno?
Like so:

  • Step 14:

Ppffftt…kay, take a break….

………….okay come back :)

Now let’s add text to our blog heh? ^_~
I use the font LainieDay SH, you can download it here: http://www.abstractfonts.com/font/11337

Download the font, install it to your compy and then make a new layer above all your others in Photoshop and get the Text Tool (T) and set it to about 11pt in size, aaaand..type ^^
Like so:

You might have to the Toggle the Character and Paragraph palettes button and use that to give your text a little ..boldness ^^
Like this:

Set your text layer to Multiply blending mode. Then we need to transform it so it looks right on paper ^^
Press Ctrl(Cmd)+T and drag a bit to the left..right…or resize it…rotate a bit counter-clockwise…oh well, you’ll get the right moves, don’t worry if it’s a bit frustrating at first ^_^. Like so:

You might need to duplicate the text layer and lower the copy’s opacity a little, to make the writing more visible.

Now move your text layer(s) below the page flip shape layers :)

  • Step 15:

Kay so now your pic should look something like this:

Now we’ll take care of the flipped page, kay?

Take the Pen tool same settings as before, and make a shape like this above all your other layers:

Now make a new layer above it and make this new layer into a clipping mask, and set your Foreground to #fee3b5 and Background to #b78557 and taking the Gradient Tool (G), set it to Foreground to Background and to Reflected Gradient, make sure Reverse is NOT clicked and click&drag like so:

This should give you a result like so:

  • Step 16:

Kay but you know, don’t you see anything amiss here?
Of course yea, there is a lighting difference between the flipped page and the rest of the notebook o.o
Let’s fix that =D

Oki, make a new layer abooove all your other notepad-related ones (that should place it just above the flip page layer and its gradient clipping mask) and transform it into a clipping mask as well. Set your Foreground color to #662802 and taking the Gradient Tool again, set it to Foreground-to-Transparent, Linear Gradient and drag to create a shadow like this:

Mmkay, you can play with the Fill a bit if you think it’s too much shadow. Now press Ctrl(Cmd)+E to merge the shadowy layer with the gradient layer…and taking the Dodge tool with the same settings as before give our …flipped page… a bit o’good ol’highlight =] Like so 9I circled the area where you must add highlight) :

But wait! We’re STILL missing something. Can you tell what it is? ^_~

……..it’s the ancient paper texture of course.
Okay so. Obtain a selection of your flip page shape we made earlier with the Pen Tool, and then go to Select–>Modify–>Expand–>1px.
Sweeet, now press Ctrl(Cmd)+Shift+I to inverse selection or go to Select–>Inverse…and …..on your gradient layer of course (that’s the clipping mask of the flip shape)…press Delete =O
Oki, now right-click on the gradient layer in the Layers Palette and choose Paste Layer Style…and ta-daaaa, our flip has the nice ancient page effect =D

There is just one more thing we need to do for it all to look okay.
Select both the gradient layer (aka, the clipping mask) and its “master” layer (aka, the flip page shape) and merge them into one.This might cause your flip page to vanish, because it became a clipping mask of the group below it, but it’s okay, don’t panic :)
Just right-click on it and choose “Release Clipping Mask”.
That’ll make it visible again =D
Okay now lock the transparent pixels on it..this is the button:

…and taking the Smudge Tool (R) set to a large (say 30px), round, semi-hard (say hardness about 50%) brush, drag in the direction of the arrows to get rid of the edge burn effect where we don’t want it:

  • Step 17:

Kay so now you should have something like this:

More lighting adjustments on the way =] Go back to the layer where you have the topmost page. The one with the writing you know? You should have the page on one layer, and the text on another layer, just above the page one. Yes? Okay.
Make a new layer and move it INBETWEEN the page and the text :)
Next, right-click on the new layer to transform it into a superhero…err……..I mean into a Clipping Mask..>u>..<u<……

Set the layer blending mode to Multiply.
Then, with your Foreground color set to #834227, take the Gradient Tool and make sure it’s set to Foreground-to-Transparent, Linear Gradient. Once you got that done, drag like this on the new clipping mask you just created:

Lower the layer’s Opacity to about 70% then make a new layer above it, right-click–>Create Clipping Mask. Set this layer to Multiply as well, but lower its Opacity to only about 90%.
Drag almost as before, only shorter span:

Kay, now press Ctrl(Cmd)+E to merge the two Multiply layers into one =D

  • Step 18:

Mooo-vin’ on ^o^

On the Multiply shadow layer go to Layer–>Layer Mask–>Reveal All.
Take the Gradient Tool again, make sure your Foreground is black (#000000) and drag like this to lower the density of the shadow on the left:

After which, you should be left with this:

Okay, just a bit more and we’re done…with the notepad ^_~

  • Step 19:

Now make a new layer and move under all your other layers…well except the background one. Move it so that it’s the first layer over the background one.
The take the Pen Tool and draw a shape like this (here at 200% zoom for you to see better) :

…and here it is with the notebook on top of it:

Kay, now make a new layer above it and transform it into a Clipping Mask. Then set your Foreground color to #8d5223 and your Background one to #f6cd99 and taking the Gradient Tool, set it to Linear Gradient, Foreground-to-Background and drag like so:

Now make a new layer ABOVE this one…pfft, you’re getting tired of new layers aren’t you? Oh well, necessary evil as they say… ^__^

So yea, make a new layer above it and transform it too into a ..well..Clipping Mask.
Then set your Gradient to Foreground-to-Transparent and to Radial Gradient, set your layer to Multiply blending mode and drag like so:

  • Step 20:

Now press Ctrl(Cmd)+E to merge the multiply layer with the gradient one. Next, obtain a selection of the shape of the “master” layer, and go to Select—>Modify–>Expand–>1px, the go to Select–>Inverse..press Delete.

Paste the layer style to the gradient layer (the one on which you just deleted) and you should have something like this:

Name the layer “Gradient Page Under”.

Now let’s take care of some shadows. Make a new layer above the Gradient Page Under and transform it into a Clipping Mask…gooood…..then obtain a selection of your Bottom Cover layer…and with the Foreground color set to #8d5223 fill the selection with color using the Paint Bucket Tool (U).
Deselect, then set the layer to Multiply.
Then move it a liiittle to the left, as so:

Give it a Filter–>Blur—>Gaussian Blur of about 2. Now it also depends on what you think looks good, iunno.

Oki…now your thingy should look something like this:

  • Step 21:

Text time!
Remember how we did the text for the top page?
Good, let’s do that for the bottom page as well :)
So. Make a new layer and start typing with the LainieDay font we used earlier. Then skew it, warp it, resize it…to fit it on the page =D

I’m forgetting something, set your Foreground color to #d09a6b before you start typing, hehehehe ^___~
You might have to the Toggle the Character and Paragraph palettes button and use that to give your text a little ..boldness ^^
Like this:

Take the Dodge Tool (O) and with the same settings as before dodge a bit the text where light falls hardest.
Liiiii3k diiiiz (I circled the area where you should use Dodge) :

Aweeeezuuum <33
Now the notebook is…well…FINISHED! =D

It should look like this..or close:

  • Step 22:

Well what’s the point of a Blog Writing icon if we don’t have a toll to write with?

Make a new layer above all your others.
Take the Line Tool (U) and set it to Shape Layers, thickness of 4px.
Set your Foreground color to #531f0b and with the Line Tool, draw a ine like this:

Duplicate this line layer and set the copy’s color to #94451a. Move this second line a bit to the up-left, like so:

Next, duplicate the line again and set this third’s copy color to #bb6d2f. Move it to the up-left…like so:

New line copy set its clor to #fadb75 and move it like before….then yet another copy..set its color to #e7b25d and move it….so you have this:

  • Step 23:

Now merge all these lines into a single layer.
That is done by Ctrl(Cmd)+clicking on them all each one by one in the layers palette, so that they are all in a dark blue color. then press Ctrl(Cmd)+E to merge ^_^

Okay once merged, take the Eraser Tool (E) set to a hard round brush and erase what bits go over, to lever the edges out like so:

With the Eraser Tool, erase at the …well..tip… (the edge closer to the paper) so that it has a nice roundish shape.

Then name the layer “Pencil Body”.

Make a new layer and move it under the pencil Body one.
Then take the Polygonal Lasso Tool (L) and on the new layer, create the selection of..well..sort of triangle, like this:

Set your Foreground color to #f2d6a7 and your Background one to #744219 and taking the Gradient Tool (G), set it to Linear Gradient, Foreground to Background, and drag like this:

Note that I’ve hidden the layers of the notebook to make the pencil more visible for you. So no worry, it’s not a ghost ^___^

Name this layer ..”Pencil Tip”.

Kay, now remember how we locked the Transparent Pixels in Step 16?
Do it again for the Pencil Tip layer.

Then set your Foreground color to #3c1f1a and with a hard, round brush draw the black tip of the pencil, like so:

  • Step 24:

Next, make a new layer above all your others. Take the Brush tool and set it to a hard, round, 5px brush.

Then take the Pen Tool, set it to Paths and draw a path like this:

Okay, now right-click–>Stroke Path–>NO Simluate pressure. The right-click–>Delete Path. You should have something like this:

Erase a little around the tips to re-shape it, then give it these layer styles:

Duplicate the layer and move the copy up a bit, like so:

  • Step 25:

Name the layer “Pencil Metal Tip”.
Now obtain a selection of it and go to Image–>Adjustments–>Photo Filter, give it a 50% orange.

Okay, now deselect, and create a ne wlayer under all your Pencil layers.
Name it “Pencil Eraser”.

Now take the Brush tool, hard round, andset your Foreground ocolor to #a83524, then draw a shape like so:

Okay, now lock its transparent pixels.
Change your Foreground color to #f4bea9 and with the Gradient tool set to Radial Gradient,  Foreground-to-Transparent, drag a tiiiny little bit to create highlight:

Okay, now take the Burn tool, same settings as before, and darken the shadowy part a little more…..and you can now merge all your Pencil-related layers into one single layer. Name it…well of course, PENCIL! hehehe :)

One more bit to go!

  • Step 26:

Shadowy shadow of the Pencil is missing o.o; OMG it has been stolen!
…or..not…xD

Okay, make a new layer and move it so that it is a Clipping Mask to the first page of the notepad.
Name it “Pencil Shadow”. Then obtain a selection of your Pencil layer and setting your Foreground color to #743d25 fill the selection on the clipping mask we just crated…yeah, the Pencil Shadow layer.
Set it to Multiply blencing mode….then press Ctrl(Cmd)+T to transform it, rotate, skew, etc etc so that you get something like this:

Take the Blur Tool set it to a soft, round brush or about 40px and Mode: Normal, Strength: 30%, and blur this shadow a bit, blurring more the farther away you are from the pencil tip. So you get something like this:

Of course, you can go on to add more detail and stuffiez to your icon….I’m not stopping you hehehe ^___^
But for now let’s say…….OMFG WE’RE DONEEEEEE *runs around in circles*

Oh yea baby 8)
Now we can haz snazzy Blog Writing icon =D

Final!

Hope you had fun, see you next time and don’t forget to send me a postcaaaarddd!…
..err..I mean, send me the results of your work, it’s always awesome to see =D
Oh, and let me know if you hit trouble, so I can give you a hand :)

See ya next time ^__~

Alice