January 31, 2010

Photoshop Image Editing Basics For Bloggers

28 Comments so far

paint-and-brush Adobe Photoshop is a blessing to designers across the globe. It is the wizard box for creating amazing 2D art effects. This graphic software has several functions and is really advanced but yet easy to use. As bloggers most of us love to share images in our posts but we love it even more if our images appear outstanding. Now to give beautiful effects to your images you just need to give a try to today’s tutorial where we will learn the following great methods of editing images.



  1. Taking Clean and Bright Screenshots From Your Desktop PC using Photoshop
  2. Cropping and Resizing Images
  3. Adding Drop Shadows To Images

First and Foremost Download Adobe Photoshop CS4

Fortunately you can download Adobe Photoshop CS4 for free from MBT Download Page. This version is a portable one which means that you don’t need to install this software. You only need to download it and start using it. That’s it! :>

Taking Clean and Bright Screenshots Using Photoshop

Taking screenshots is really easy and you may wonder what’s new in this tutorial! Actually it is all about taking neat and clean images that may not seem blurred or faded. A professional Screenshot is one that appears with original pixels. Take a look at the screenshot below to get an idea what a clean and bright screenshot looks like,

  MBt-Nav

subscription

Do you see any difference in the appearance of the above screenshots and there original look at MBT? If not then lets learn how to get such clean screenshots :>

Follow these steps,

  1. To capture any screenshot on your desktop simply press the “Print Screen” button at the top right corner of your keyboard usually near the “F” keys.
  2. Now open Adobe Photoshop CS4
  3. Press Ctrl + N and when a mini windows appears hit Ok. This will open a new white window.
  4. Now Press Ctrl + V This will paste the screenshot into that window like this,

Shot1

    5.   To save this image simply press Ctrl + Alt + Shift + S   and a new window will pop up as shown below,

Step2

In the above screenshot you can see a green arrow at top-right-corner pointing towards image format. There are three widely used image formats which are, GIF, PNG and JPEG. Amongst them always give more preference to GIF because this is recommended for fast image load time. Now after you have selected the GIF image format simply hit the Save button and save the image in your hard drive. Done! :>

Now view the image you have saved and you will find that it’s neat and clean but too big to fit your post body. So how would you now resize the image or crop it according to your preferences? Well lets now learn the next step –>

Cropping and Resizing The Screenshot

Here we will learn how to crop/rip the image in order to rip out the only part we want. For instance when you take screenshots, the size of your screenshot is usually equal to the size of your screen resolution i.e 800 x 600 or 1024 x 768 etc. Now suppose that you only need the the portion outlined below as “MY Blogger Tricksshot3

To rip this part do this,

  • At the left side of Photoshop you will find this column,

crop-tool

 

 

Choose the fifth tool (cropper ) as marked above.  Now simply start dragging your mouse cursor over the region that you want to crop/cut. Like this,

make-selection-using-crop-tool

Now simply hit Enter and there you get it! :> Save your cropped Image the same way as described before i.e  Ctrl + Alt + Shift + S

Adjusting Image size:

May be you would prefer to adjust the size of your screenshot by increasing or decreasing the image width and height. To do so follow these steps,

  1. Press Alt + Ctrl + I  and a new window will open as shown below,

image-resizing

      2.    Now the only areas of our interest are those outlined as green and blue

  • The green region is where you set the width and height size in pixels. Note that 1 pixel = 1 dot on a computer screen!
  • Tick all boxes in the blue region. The box with Constrain Proportions will adjust the width and height size in fixed ratio.

      3.   After you have set all width and height dimensions then simply hit the OK button and then press Ctrl + Alt + Shift + S  to save the image in GIF format. That’s it!

Adding Drop Shadows To Images

Note:- This section of the tutorial may look lengthy but it is worth trying =D

Adding drop shadows to images is one of my favorites. With Photoshop you can add colorful shadow effects to your images. Kindly have a look at some example images below,

mbt-LOGO-copy-blue

mbt-LOGO-copy-yellow

mbt-LOGO-copy-black

 

Now to add this effect to any of your image, follow these steps,

1.   Locate the image inside Photoshop by pressing Ctrl + O

2.   After you have selected an image then click the icon at your right as indicated by the green arrow in the image below, 

layers

Then double click the Background as indicated by blue arrow. When a window pops up, simply hit OK

3.    Now click the icon at the bottom as shown below,

create-new-layer

On clicking this icon a new layer will be formed. Press Ctrl + Backspace and the window will be painted white. Now you can see that the new layer is above the background as shown below,

layer-above

You need to drag it down to shift it below the Background layer as shown below,

layer-down

4.    Then choose the selection tool at your left as shown below,

selection-tool

Then click the Background layer to highlight it as shown below,

background-layer

Now drag your cursor on your image in such a way that you may create a dotted rectangle/selection on your image by leaving (not selecting)  the extreme right-edge and bottom, as shown below,

 selection-tool-image

Now press Ctrl + Shift + i to select the region that was left behind in our first selection as shown below,

left-behind-region

Now select the cursor/move tool as shown in the image below,

move-tool

Then hit Delete key in your keyboard and the selected area will turn white, like this,

white

Now the final touch! Right click the Background layer and choose Blending options as shown below,

blending-options

 

A new window will pop up. In that window choose Drop shadow as shown below,

drop-shadow-settings

Important areas to be edited are opacity (set it to 40%), colour (The default is black, set the colour to whatever colour you want) and the Blend Mode (Set as Multiply) 

When you have set your requirements finally hit Ok and your image is ready. Press Ctrl + Alt + Shift + S to save the image in your hard drive.

That’s all!

I hope you may find this tutorial useful and helpful :> I will also try to write one on Photoshop Text Editing to share some cool Text Effects in order to help you create better banners and header backgrounds. Do let me know how you find this one :D

January 24, 2010

25 “Vertical” Navigation Menus For Blogger – CSS-HTML Tab Menus

94 Comments so far

25 Navigation Menus Collection! After the release of 30+ Horizontal Navigation Menus, we head forward to a beautiful collection of some of the best looking vertical navigation menus that will put soul to anyone’s weblog or website! I have modified the codes made by Christopher and Highdots and have made them compatible with Blogger. I hope this collection will be of interest to most of you simply because these navigation menu tabs can easily be installed, customized and multiplied! I hope it will be of great help to new designers :>

How To Add A Vertical Navigation CSS Menu To Blogger?

Well the process is as simply as it can be. Simply follow these steps carefully,

  1. Go To Blogger > Layout > Edit HTML
  2. Back-up your template

All Navigation Menus below uses two pieces of codes. One is The CSS code which is responsible for the look and feel of the menus and the second is the HTML code which is responsible for positioning the menus. So lets know where to add each code!

    3.   Paste the CSS code for your selected Menu just above ]]></b:skin>

    4.   For the HTML code there can be two positions either your right sidebar or left sidebar. Depends how many columns you have.

  • If you have a right sidebar then paste the HTML code just below <div id='sidebar-wrapper'>  or this <div id='sidebar-wrapper-right'>
  • If you have a left sidebar then paste the HTML code just below <div id='sidebar-wrapper-left'>

Note:- Since most templates use different coding therefore if you could not find the above codes then don’t worry simply share your blog URL in the comment box and I will view your template coding and will tell you instantly which code to search for!

    5.    Finally save your template and see a beautiful Navigation Menu hanging on your sidebar :D

Editing The Links In The Navigation Menu

To change the Tab Menu Links and Titles, simply edit this bolded part of the HTML code,

<li><a href="#1" >Link 1</a></li>
<li><a href="#2" >Link 2</a></li>
<li><a href="#3" >Link 3</a></li>
<li><a href="#4" >Link 4</a></li>
<li><a href="#5" >Link5</a></li>

Replace #1, #2, #3 etc with your Page Links/URL and replace Link1, Link2, Link3 etc with your Page Titles. If you wish to add or delete a tab then simply add or delete this line from the HTML code,

 

<li><a href="#" >Link</a></li>

 

Live Demo

 

For Live Demo of Other Navigation Menus Simply use our HTML Editor and Copy and Paste the CSS and HTML code at right areas and then start playing with the code :>>

 

See Demos With MBT HTML Editor!

 

Navigation Menu #1

Navigation Menu 1 

CSS CODE:


HTML CODE:


Navigation Menu #2

Navigation Menu 2

CSS Code:


HTML Code:


Navigation Menu #3

Navigation Menu 3

CSS Code:


HTML Code:


 

Navigation Menu #4

Navigation Menu 4

CSS Code:


HTML Code:


Navigation Menu #5

Navigation Menu 5

CSS Code:


HTML Code:


Navigation Menu #6

Navigation Menu 6

CSS Code:


HTML Code:


Navigation Menu #7

Navigation Menu 7

CSS Code:


HTML Code:


Navigation Menu #8

Navigation Menu 8

CSS Code:


HTML Code:


Navigation Menu #9

Navigation Menu 9

CSS Code:


HTML Code:


Navigation Menu #10

Navigation Menu 10

CSS Code:


HTML Code:


Navigation Menu #11

Navigation Menu 11

CSS Code:


HTML Code:


Navigation Menu #12

Navigation-Menu-With-No-image-used

CSS Code:


HTML Code:


Navigation Menu #13

CSS Menu Tabs 13

CSS Code:


HTML Code:


Navigation Menu #14

CSS Menu Tabs 14

CSS Code:


HTML Code:


Navigation Menu #15

CSS Menu Tabs 15

CSS Code:


HTML Code:


Navigation Menu #16

CSS Menu Tabs 16

CSS Code:


HTML Code:


Navigation Menu #17

CSS Menu Tabs 17

CSS Code:


HTML Code:


Navigation Menu #18

 

CSS Menu Tabs 18

CSS Code:


HTML Code:


Navigation Menu #19

CSS Menu Tabs 19

CSS Code:


HTML Code:


Navigation Menu #20

CSS Menu Tabs 20

CSS Code:


HTML Code:


Navigation Menu #21

CSS Menu Tabs 21

CSS Code:


HTML Code:


Navigation Menu #22

CSS Menu Tabs 22

CSS Code:


HTML Code:

Navigation Menu #23

CSS Menu Tabs 24

CSS Code:


HTML Code:


Navigation Menu #24

 CSS Menu Tabs 25

CSS Code:


HTML Code:


Navigation Menu #25

CSS Menu Tabs 26

CSS Code:


HTML Code:



 

That’s All!

Hope you have enjoyed the post. Feel free to ask any question related to these navigation menus. I am happy I fulfilled my promise of publishing this post :>