Growing Happiness » tutorials

Tutorial: Photos with Rounded Corners using Photoshop

Ginger M — Wed, 23 Apr 2008 11:59:27 +0000

Round/rounded, curved/smooth corner, there are many names for this effect and there are a few methods to create it. In this tutorial, I’m gonna teach you how to get your photos to have rounded corners using what I consider the easiest and most flexible method – using clipping masks.

There are 7 images in this tutorial (totaling 320kb), not including the header image above .

Before that

Open the image file you’d like to use (make sure you have a backup copy, just in case) and resize it to desired size using the Image>Image Size… from your menu bar. In this tutorial, I’m using an image that is 350px wide. I am using Photoshop CS2.

Step 1

Your image is by default a Background layer, which is locked. To unlock it, double click the layer. At the “New Layer” dialog box, you may choose to rename the layer, in this example, “Spring”, or leave it as “Layer 0″, and click OK.

Step 2

Click-hold the Shape Tool on your tools palette and select Rounded Rectangle Tool. If the tools palette is not visible, go to the menubar and click Window > Tools.

At your Shape options bar, enter a Radius of 20px (you can experiment with different values later).

Step 3

Click and drag a Rounded Rectangle Shape over your photo. Note that the actual cursor is a hairline cross, not a Giant Arrow. A Shape 1 layer is automatically created above your photo layer. Move the shape around until you are roughly satisfied with the positioning.

Step 4

Drag the Shape 1 layer below your photo layer. An outline of the shape will be visible on your photo layer.

Step 5

Select the photo layer (Important:Make sure you have the photo layer selected before moving to the next step!).

Click on the little arrow at the top right corner, then click on Create Clipping Mask.

Voila! Your photo layer is now masked to the shape layer below. At this point, you can select the Shape layer and move it around or transform its size, if you like.

Step 6

Before saving this image, you might want to crop away the unecessary transparent pixels surrounding your photo. From your menu bar, go to Image>Trim…

Copy the options below. The file will be cropped exactly to the edge of your photo.

Remember to save the file as GIF or PNG with Transparency option checked. If you save it as a JPG, the white border will show when used on top of another image/web page color that is not white.

Have fun!

Tutorial: Creating Dotted Shapes Using Photoshop

Ginger M — Wed, 02 Apr 2008 18:00:41 +0000

I have to admit, I don’t usually create my dotted or dashed lines in Photoshop, I do them in Illustrator because it gives me more control over strokes. But fret not, you can create nice dotted shapes in Photoshop too. Today we’re gonna learn how to create dotted shapes. You can apply this method to any shape. In today’s example, I’ll walk you through the steps in creating a dotted circle. There are 5 images in this tutorial (not including the example above)

Before that…
Have you created a dotted brush? If not, please follow the Creating Dotted Lines Using Photoshop tutorial. Additionally, you may want to learn how to create Colourful Dotted Lines. Please have the correct brush and colours selected before proceeding with this tutorial.

Step 1
Locate the Shape Tool on your tools palette. The default shown is usually Rectangle, but it can be either one of these: Rounded Rectangle, Ellipse, Polygon, Line or Custom Shape. Alternatively, just type “U” on your keyboard.
If the tools palette is not visible, go to the menubar and click Window > Tools.

Step 2
On your Shape options panel, click on the Paths icon (Giant Cursor 1) and then click on the Ellipse Tool icon (Giant Cursor 2).
If you can’t see your Shape options, go to the menubar and click Window > Options.

Step 3
Create a new file and click and drag a circle on to your canvas using the currently selected Path + Ellipse Tool. (Note that your cursor is a small hairline cross, not a Giant Arrow as illustrated here)

After that, create a new layer. If you don’t see your Layers panel, go to Window > Layers. This step is crucial – if you didn’t create a new layer, your working layer will be the Background layer, which, by default, is locked, therefore preventing you from continuing with the next step. You can give the layer a meaningful name e.g. Circle, if you want.

Step 4
Go to the Paths options palette. If this is not visible, click Window > Paths.
Your Work Path should already be selected (highlighted in blue in this example).

Important: Before proceeding to the next step, please make sure you already have your dotted the brush and correct colors selected. (See Before That… section at the top of this post)

Click on the little arrow at the top right corner to bring out more path options and then click Stroke Path…
Click OK at the dialog box.

Step 5
Your circle will look something like Fig. 1.
Click below the Work Path so that it is no longer selected.
Admire your work.

Try experimenting with other shapes too. Have fun!

NaBloPoMo Badges – April 2008

Ginger M — Tue, 01 Apr 2008 07:49:36 +0000

Although I am not on the blogroll for April (the theme is “Letters”), I have made some badges for the month anyway!

Download away!

Note:
Feel free to use them on your blog but please download and save them to your server first (do not hotlink from this website). If you’ve used these badges, do link back to NaBloPoMo website, I’m sure Eden will appreciate it. See instructions and other badges at the NaBloPoMo site.

You don’t have to link back to me (although I’d greatly appreciate it ♥) but I’d love to see these being used on your blog, so drop me a comment if you do, and I’ll pay your site a visit. :)

Tutorials
Adding Badges using Blogger
Adding Badges using WordPress

Tutorial: Colourful Dotted Lines in Photoshop

Ginger M — Wed, 26 Mar 2008 06:33:41 +0000

Previously, we learnt how to customise a brush to create dotted lines in Adobe Photoshop. Today I’ll show you a how to customise your brush further to create multi-coloured dotted lines.

Create a dotted brush or select a dotted brush you’ve saved earlier from the Tool Preset.
On your Brush Palette, check the Color Dynamics box (Giant Cursor 1).
Then set the Foreground/Background Jitter to 100% (Giant Cursor 2).
Lower values will result in the foreground colour being used more than the background colour.

Use the color picker to select two contrasting colors.

Try placing letters over bigger brushes for a different look.
The dots work nicely for name labels and scrapbooking.
Here are examples using names from my Favourite Names List.

Tutorial: Creating Dotted Lines Using Photoshop

Ginger M — Tue, 18 Mar 2008 15:27:02 +0000

In this tutorial, we’ll learn how to customize a brush in Adobe® Photoshop® to create dotted lines.

There are a total of 8 images (about 150kb), not including the masthead, in this tutorial.

Step 1

Select the Brush tool from your tools palette, alternatively, just type “B” on your keyboard.
If the tools palette is not visible, go to the menubar and click Window > Tools.

Step 2

With your Brush tool selected, click the “Brush Palette” icon on your Brush Options bar.
Alternatively if you have Brushes in your Dock, you can click on that too.
If your Brush Options bar is not visible, click Window > Options.
The shortcut to bring up your Brush Palette on a PC — simply press F5.

Step 3

On the Brush Palette box, click on Brush Tip Shape (Giant Cursor 1)
In this example, we’re using a 5-point brush, so click that in the Brush type on the right. (Giant Cursor 2)

Step 4

Adjust the spacing by moving the indicator arrow (typically the default is set to 25%). Alternatively, you can type in a number, up to 1000%, directly into the input box. We are using 200% in this example.
The pane below shows you a preview of how your brush stroke will look like.

That’s it! *Applause*

You can now proceed to use your new, fancy spot-drawing brush but if you want to save this style for future use (without going through these steps again and again) follow these additional steps:

Additional Step 1
Click the “Tool Set Picker” on the Brush Options bar.

Additional Step 2

Click on “Create New Tool Preset” icon.
A dialog box will prompt you to enter a new name for your brush.
Enter a meaningful name like, “My Brush 5pt, 200% Space” and click OK.
The next time you want to reuse this brush, just click on the “Tool Set Picker” and click your brush name.

That’s the end of the tutorial.
Now go nuts with dots!

Tutorial: Adding Badges Using WordPress

Ginger M — Sun, 09 Mar 2008 03:44:51 +0000

WordPress 2.5 has a major overhaul in terms of interface design and layout. This tutorial was made with WordPress 2.3.x in mind.

If you use WordPress for blogging, this tutorial will guide you in adding a badge (or any image in general) for NaBloPoMo to your sidebar.

Q. How do you add an image to the sidebar in WordPress?
A. By adding a Text widget. (I know, how counter-intuitive!)

Before that
Have you uploaded the image to your server? If you haven’t, please follow this tutorial.

Step 1
Go to “Presentation” > “Widgets” page.
Find the “Text Widgets” widgets section (somewhere near the bottom of the page).

Q. How many text widgets would you like?
If you have “1″ by default, you will need another one to add your image, so select “2″. If you already have 2 Text Widgets in your Sidebar, select “3″ and so on.

Click the “Save” button.

Step 2
Locate your “Text 2″ widget in the “Available Widgets” section (typically at the middle of the page, below the “Sidebar” section).

Please note the number will correspond to what you’ve selected in the previous step, i.e. if you’ve selected 3 Text Widgets in Step 1, then find a “Text 3″ widget in this step. For simplicity, I’ll just refer to it as “Text 2″ from now on.

Step 3
Drag the “Text 2″ widget from the “Available Widgets” section to the “Sidebar” section(you may have more than 1 Sidebar so be sure to drag to the correct one).

Move it to the desired location within the Sidebar (top, middle, bottom) by dragging it.

Step 4
Click on the blue list icon on the right of your text widget to bring up the text options box.

Step 5
A Text options box will appear in the middle of the screen.

The single-line field at the top is where you add a title for this widget, e.g. “My Badges”. This is optional.

Assuming you’ve uploaded the image to your own server, add the code to the text field as follows, replacing YOURIMAGESOURCE with the actual URL of your image on your server. Your image URL may look something like this:

http://www.yoururl.com/images/YOURIMAGE.gif

In which case your full code, with a link to NaBloPoMo page will look like this:

"http://www.yoururl.com/images/YOURIMAGE.gif"/>

Click “Save”. If you’ve done all the steps correctly, you will now have the badge on your sidebar.

Did you know?
You can download a variety of NaBloPoMo badges or buttons from this page?
Go do it now, because they are the cutest on the web, even if I do shamelessly claim so myself.