Thursday, April 26, 2007

Photoshop Orchids Tutorial

After photographing orchids in the botanical gardens in Hawaii on several recent trips, I decided to see whether there were opportunities to photograph these beautiful and exotic flowers somewhere closer to home. Looking on the web, I found several florists relatively nearby who specialize in orchids. The photograph of moth orchids in Figure 1 was taken at Rod McClellan Botanicals in San Mateo California, a florist specializing in orchids who was kind enough to let me set up my tripod and spend a few hours in his shop.I captured the image using my digital SLR, the Canon D30. While many of my orchid photos are taken with a macro lens, which allows me to get really close to the flower, this image was taken from a distance with a telephoto lens, so I could capture the entire arrangement of blossoms along the branch, as well as some foliage.

















What I like about this photograph is the nice composition of the orchid blossoms one in front of another, arranged laterally along a horizontal branch. I also like the interesting color of the flowers, the round unopened buds, and the leaves in the background.

I didn't like the fact that you can see details of the wall behind the orchids in the right half of the picture. Also, while the lines of the vines on the left have a nice curve, which adds to the image, there are too many of them and the left side of the photo feels a bit cluttered. Plus there is a thick dark branch in the middle of the left side that draws too much attention to itself.

What I wanted to do with this image was to put more emphasis on the blossoms, and less on the background and the surrounding details. The bright background draws too much attention, so I wanted to darken it as much as possible. This would also lend an interesting dark mood to the picture. I also wanted to remove some distracting details. I wanted to add some unusual effects to the blossoms to make them really stand out. Finally, I wanted to alter the composition somewhat, to reduce the mass of the big green leaf in the foreground.

The first thing I did was to make a duplicate layer in Photoshop. We will work primarily on the duplicate layer. But we will also use portions of the bottom, original layer to create some interesting effects.

First I wanted to make the background dark. One way to make a bright background dark is to invert the image. So in the top layer, I inverted the image by using Image>Adjust>Invert. Inverting the image also changes all the colors. To return the original colors to the image, I then did Filter>Fade and selected the "luminosity" blending mode at 100 percent. The background was not yet dark enough, so I used Image>Adjust>Levels to darken it almost completely, by sliding the left and middle sliders to the right until the background was mostly black. Figure 2 shows what the picture looked like at this point. As you can see, the flowers are not at all attractive and are way too dark. Our next step will fix this problem and add considerable interest to the flowers.

















My next step was to add a layer mask to the top layer (Layer>Add Layer Mask>Reveal All). "Reveal All" means that none of the top layer is yet hidden or masked. In the Layers palette, the layer mask is all white. We will use the paintbrush to paint black areas onto this layer mask. Where we paint with black on the layer mask, the bottom layer is revealed. To do this, click on the white layer mask, then click on the paintbrush tool, make sure black is the foreground color in the toolbar menu, select a large soft-edged brush from the brushes palette, and select a medium (perhaps 75%) opacity for the brush from the paintbrush options palette. I like to use a Wacom tablet with pen input for painting and drawing steps, because it gives you more control, but you can also use the mouse for this step because we are not trying to be very precise.

Now I painted with black on the layer mask just in the center of the flowers. The effect of this is to reveal the center of the flowers from the layer below. Recall that the bottom layer contains the original image. So the center of the flowers shows the uninverted original flower. Because the original image is relatively much brighter than the inverted and darkened top layer, the areas where we have let the bottom layer show through seem to glow. Figure 3 shows the effect.

















Next I wanted to remove some distracting detail from the image. Using the clone tool, I removed the bright horizontal branch. Now I did some fine tuning of the color. On the bottom layer I used Image>Adjust>Curves to slightly darken that layer, which made the bright parts of the flower slightly darker in the composite. I used Image>Adjust>Channel Mixer on the bottom layer to reduce the amount of blue (in the channel mixer palette, select the blue channel from the drop down menu, and then reduce its percentage to around 75%). What this does is shift the color of the bottom layer toward yellow, which slightly warms the color of the flowers in the composite. Finally, I used the clone tool to remove a small branch in the lower left corner of the image. Then I flattened the image (Layer>Flatten Image), which combines all the layers.

Now I wanted to work on the composition to reduce the mass of that big leaf in the foreground. I used Edit>Transform>Skew to pull down the lower left corner of the picture and to pull the top left corner slightly to the left. Then I used Edit>Transform>Scale to stretch the image horizontally. You can see the results in Figure 4.

















The final result is a vibrantly colored image that draws your eye directly to the center of the flowers. The glowing flowers create an unusual effect that creates a great deal of interest. There are just enough additional elements in the composition to create a natural context for the flowers without overwhelming them or distracting the eye. Comparing this with the original image, you can see that we have completely altered the mood, creating an almost painterly effect.



Read More..

Tuesday, April 24, 2007

Star Studded Animated Banner

Start by creating a new file of the banner size. Fill background with a solid color.





Create a circle using elliptical shape tool. Place it so that only a part of circle is visible.





Create two more duplicates and adjust their placement as shown in the image below.





Create a rounded rectangle using rounded rectangle shape tool.





Create a star shape using custom shape tool and place it on the border of the rectangle.





Create more duplicates and decorate them along the border of the rectangle. Select and merge all the star layers.





Fill the gaps with more stars and merge together to create another star layer.





Double click the layer to open layer style window. Apply layer style with the settings shown.



























Apply same layer style on the other star layer and hide the layer styles of both the star layer for the time being. Enter text in a new layer.






Create another line of text in a new layer.











Insert a clipart of a mobile phone and place on the right.





Type click here on the mobile screen.





Double click the layer to open layer style window. Apply layer style with the settings shown.


























Open animation window. For the first frame switch on the layer style of one of the star layer. Hide the layer style of click here layer













Duplicate frame. Hide the layer style of first star layer and unhide the layer style of second star layer. Unhide the glow effect on click here.













Select both frames and create two more duplicates.













Select all six frames and duplicate.

























For the all the six selected frames hide the first line of the text and unhide the another line.













Similarly create six more duplicate frames and unhide the third line for these frames.













Press Ctrl+Alt+Shift+S to save an optimized animated GIF.


Read More..

Sunday, April 22, 2007

Mobile Ringtone Animated Banner

Creating an animated banner for a mobile ringtone site

Start by creating a new file of the banner size. Create ellipse using elliptical shape tool.




Create a rounded rectangle using rounded rectangle shape tool.




Create another rounded rectangle using rounded rectangle shape tool. Place as shown.




Create some horizontal lines using line tool.




Press Ctrl+Alt+G to create a clipping mask.




Create an ellipse using elliptical shape tool.




Double click the layer to open layer style window. Apply layer style with the settings shown.























Reduce the fill value to 0%.











Duplicate the layer. Press Ctrl+T. Right click the layer and scale down. Reduce the opacity to 50%.




Insert a cutout of a mobile phone.




Type the text in different layers.








Select the text layer. Click add vector mask button from the layer window.






Create a rectangular selection using rectangular marquee tool. Fill it with black color to hide the text behind the mask. Similarly create mask for the second text layer. Also create some musical notes using custom shape tool.





Open animation window. For the first frame let the both text layers be hidden behind their masks. Reduce the opacity of radial waves to 50%.











Duplicate frame. Unlink the mask and content thumbnail for the text layer. Move the mask to the right side so that the text is completely visible.











Press tween button from the animation window. Apply settings as shown.


























Select 2nd and 6th frame. Change the opacity of inner most radial wave layer to 100%.











Select 3rd and 7th frame. Change the opacity of middle radial wave layer to 100%.











Select 4th and 8th frame. Change the opacity of inner most radial wave layer to 100%.











Select 5th frame. Change the opacity of all radial wave layers to 50%.











Repeat the above mentioned steps for the next text layer. Also animate the opacity of radial waves as mentioned above.











Press Ctrl+Alt+Shift+S to save an optimized animated GIF.

Read More..

Animated Promotional Site Banner

Start by creating a new file of banner size. Create a circle using elliptical shape tool at the left of the banner.




Create another circle above the first circle. Place it as shown. Fill it with white color.





Create a star shape using custom shape tool. Place as shown.








Double click the layer to open layer style window. Apply layer style with the settings shown.















































Duplicate the layer 3 times and place as shown.







Create an arrow shape using custom shape tool and place as shown.






Duplicate the layer and move towards right by a few pixels. Change the color. Move this layer below the first arrow layer in layer order in layer palette.






Similarly create one more duplicate and fill with a lighter shade.






Select all the arrow layers. Duplicate them and place as shown.






Repeat the above step.






Insert company name and type other details. Create a coupon shape using rounded rectangle tool. Insert text over the coupon. Merge this coupon. layer with last arrow set.






Open animation window. For the first frame move all the arrow and text layers towards the left so that it hides behind the circle below the company name.












Duplicate frame. Move first set of arrow layer and corresponding text towards right, so that most of it is visible.












Click tween button from the bottom of animation window. Apply settings as shown.

























Select 2nd, 3rd, 4th, 5th, and 6th frame. Unhide the second star layer.












Select 3rd, 4th and 5th frame. Unhide the third star layer.











Select 4th frame and unhide the last star layer.











Repeat the same steps mentioned above for the next set of arrow and text layers. Also repeat the steps for star layers.






















Press Ctrl+Alt+Shift+S to save an optimized animated GIF.

Read More..

Saturday, April 21, 2007

Practical Real Estate Layout

In this tutorial you we will create a layout that takes advantage of the users viewable area screen area to give the user as much information as possible on one page. This example will be used for a fictional real estate company, but this layout could be altered to cover gaming sites, tutorial sites or any type of website that needs to give the user a lot of information with nice sized high res images as well.















Open a new document in photoshop that is 800 x 600 in size.

Fill the background with #E8E8E8

Most websites are built around a pallet of 2 colors, and sometimes 3 - but usually never any more than that. The colors l've chosen for this template will be the light grey we used for the background (#E8E8E8) and a nice red color to get the users attention (#FE4646).





We'll start by putting our company name in the top right-hand corner of the screen.
Choose whatever font you like
Get out the text tool, and set it up like so:
Note: Make sure "sharp" is selected to avoid jagged text



Now type in the name of your company into the corner of the webpage template:




Next l used the same font settings, however changed the color to #FE4646, to create a nice two tone company name:






Now we're going to use a technique that is used all over the internet these days, and that is the "reflective text" effect.

Press CTRL + J on your keyboard to duplicate your text layer.

Press CTRL + T on your keyboard to bring up the free transform tool.

Right click anywhere on the canvas, and choose "Flip Vertically".

Press 'V' on your keyboard, and drag the duplicate layer 1 or 2 pixels below our previous text layer:






Change the blending mode of this layer to "Soft Light":







Optionally you can adjust the opacity of this layer as well to create a lighter effect.

Result:







Create a new layer. Set your foreground color to white (#FFFFFF).
Here we'll create the navigation section of our layout. To do this get the single row marquee tool
Now make a selection across your canvas between the text used in our header and it's reflection:

Go to "Edit->Stroke" with a setting of 1 pixel:


















Result:





Or you could use the text tool and fill it with .'s (periods) to create a dotted line such as here:





Create a new layer, and do the same thing, however position your selection under the reflected header/logo so that you have another horizontally line:





Create a new layer, this time we'll create a divider for our content area(s).
This time get out the Single Column Marquee Tool and make a vertical line just after the header/logo text like so:










Set your foreground color to (#), and go to Edit->Stroke, and apply these settings:


















Alternatively you can make a text area, and fill it with ...'s (periods) to create a dotted line such as l've done here:








Your entire canvas should look like this:








Create a new layer, get out the rectangular marquee tool and make a selection similar to what l have here:







Set your foreground color to #FEFEFE and your background color to #E8E8E8.

Get out the gradient fill tool

Fill this selection with a dark to light gradient:

Double click this layer and apply the following blending options:



















Result:





Next we'll place text on the navigation system for our links.
Set your foreground color to #FF4444 and set your text tool up like so:
The font l've used is called "" which is a windows standard l believe. Choose whatever font you like


Go ahead and type out whatever you need your buttons to say, here's how mine ended up:



Now we've got the basic framework of our layout. Everything else that appears on the page is content that will change from page to page.Here is the basic framework that you should have at this point:







Here is how this type of layout might look in a real life environment after being sliced and coded. I've used these same techniques to create a few different content areas on the page, just to divide up the page a bit and separate the content. As you can see in my final result, as a whole the overall finished product looks complex, but if you break down each page of the layout you will see that the same techniques that have been taught above, have been repeated with subtle differences.


Read More..

Full Website Header Photoshop Tutorial

Design a full header, with logo, menu and banner.

1. Create a new document. I made this 700X300 pixels.

2. Use the Rectangular Marquee Tool and make a selection similar to this one, and fill it with a color.I used #003399:











3. Go to Select>>Modify>>Smooth, set the Sample Radius to 5 pixels and hit OK.Then hit Ctrl+Shift+I, then Delete, and then Ctrl+D.Your image should now look like this(notice those smooth corners):







4. Now, create a new layer, and then, with the Rectangular Marquee Tool make a small selection to cover up the lower corners of the blue rectangle and fill it up with color(mine is #CCCC99). Something like this:







5. Ok, so far so good. Now it’s time to create the menu. Again, make a new layer, use the Rectangular Marquee Tool and make a selection like the one below, and then fill it with color(in my case #CACABA).
Note: to make it more stylish, make sure a leave a small 1-2 pixels distance between the selections:







6. Now add the text you’re gonna have in the menu:







7. After that, use the Rectangle Marquee Tool and make a small selection under the menu:







8. Then fill it using Gradient, with this settings:





















9. Now let’s do the banner. First open the image you want to use in the banner and place it on our header. Like this:











10. Next, what i did is very simple. I used the Polygonal Lasso Tool and made a contour of a house:











11. Hit Ctrl+Shift+I(this will invert the selection) and go to Filters>>Blur>>Gaussian Blur. Use this settings:










12. Now hit again Ctrl+Shift+I (this will return you to the previous selection). Create a new layer and fill the house with white. Then go to Select>>Modify>>Contract, set it to 1 pixel and hit OK. Now hit Delete and your image should now look like this:







13. Also make a small selection on the bottom and fill it with color(mine is #CCCC99).

14. And you’re almost done. All you have to do now is add some text, a logo or whatever you wish. Here is my final result.



Read More..