Photoshop Tutorials:

This is step-by step tutorial to create overlay text or logo to your image for publish on web. Watermark in this tutorial is design to place at the conner of your image (option A). But If you plan to overlay your watermark at the center of your image (option B) like picture on the right. please click here for the overlay watermark tutorial.

First thing first you have to create image use as your watermark, if you already have you can skip this step but make sure that your logo image resolution is fit for web. Normally for conner watermark I will use around 30-100 pixel in height.

To create watermark image:

1. in photoshop create new file by using menu File > new or Command(Ctrl) + N. The New File Dialog Box will open. Set your desire image resolution, for this tutorial I will create 230 pixel width by 30 pixel height image. And choose background content: to be Transparent. As in picture below
2. Select Type Tool in Photoshop Toolbox and type in your text. You have 2 options to select font style, font size and font color.
   

   Tool option bar: The tool option bar locate at the top of the screen below main menu bar. If you didn’t see it unhidden it by using menu window > option.
   
   Character Palette : Have more option to setting your font. Unhidden it by using menu window > character.
   

3. In this tutorial I use 24 point Myriad Roman font fill with gray color. After you use type tool it will create new Text layer that you can edit you text later.
4. If you want you can create button like border or fill background with color. In this tutorial I create round shape border using Round Rectangle Tool with 40 px radius.

To create border:

1. select Round Rectangle Tool . Set conner radius (B) and color (D) at tool option bar. And Make sure that Draw options select at Shape Layer (A)



2. Drag it from top left conner to the right until it cover all image.



3. If you not satisfy with just solid color, You can play more with Layer Style (C). Just play around try to select different style and see its effect. below is some example of photoshop default layer style.

Note: You can visit Using Photoshop Shape Tool for detail explanation for all shape tool options. And also for more detail about Shape Layer, Path and Fill Pixel please visit Photoshop Path, Shape layer and Fill pixel.

You can download more Photoshop Style Preset About.com or thefreelogomakers.com for free. There’re hundred of style for you to choose. Or if you prefer to create on your own you can visit Veerle’s blog. There are very good tutorial to create web button using Photoshop Shape Layer that can apply to create your watermark. (see also Photoshop Layer Style, Photoshop Shape Layer).

Now it’s time to save - Command(ctrl) + S your watermark, I recommend to save it as photoshop file (.psd) by keeping all layer, This will be easier to edit later.

Put your watermark to work:

1. With in your watermark file you just create. Using menu Image > Duplicate this will open Duplicate Image window. Click at Duplicate Merged Layers Only check box and click OK. (see more detail about Duplicate with merge command)
2. Now you will have duplicated watermark file with only one layer, You may save this file in new name for later use.
3. Open - Command(crtl) + O image that you want to embedded.
4. With in watermark file. Select Move tool click and drag watermark file to your destination image.
   

   Note: If your destination image is Index Color Mode (such as .gif file) you have to convert it to RGB mode by using menu Image > Mode > RGB. Otherwise you unable to drag layer.

5. Position watermark to desire position. If you want to put it at corner, you may use Photoshop Snap function to snap your watermark fit at the image’s corner. Turn Snap on by using menu View > Snap, Make sure that it already checked.
   

   Tip: You may want to scale you watermark, you can do so by select Move tool and using menu Edit � Free Transform or Command(Ctrl) + T. But this will loose your text sharpness (see also photoshop image size). I recommend you to determine the suitable image resolution from the beginning. You can do it by using Rectangle Marquee Tool . Within your image file that you want to place watermark, roughly select to position that you want to place watermark. Check the width and height in pixel of selected area in Info Palette. This is rough dimension of your watermark file.

   

6. Now you can flatten image ( if you’re sure you have original file keep in safe) or Duplicate and with merge layer. And then flatten it by using menu Layer > Flatten Image. (You can use option menu in Layer Palette to flatten your image)

If you plan to save and publish your file in jpeg image format you may consider to embed your metadata to image’s EXIF data (see also Protect your image copyright).

I already create Photoshop Action to create watermark in this tutorial you can download it here. For more information to load action to photoshop please click here.

Download: Adobe Photoshop Action - Create Text Watermark

Related:

• Create Text Overlay Watermark
• Automate apply watermark to hundred images
• Using Photoshop Shape Tool
• Photoshop Path, Shape layer and Fill pixel
• Photoshop Image Size: What you may never know
• Merge Layer, Merge Visible and Flatten image Command
• Using Photoshop Info Palette

Post Footer automatically generated by Add Post Footer Plugin for wordpress.