How to Create Metallic Embossed 3-D Text in Photoshop

Using 3-D text with a metallic effect is a great way to enhance the design of a web-page or other project, giving it a sleek, modern look. The Layer Styles feature that Adobe PhotoShop offers makes this a fairly easy project to do. Adobe PhotoShop is one of the most popular programs for working with images for the web. The final creation will look like the first image in this tutorial. Read on to learn how to create this text that sports a metallic effect.

Launch Adobe Photohop. Click on “File” and then “New” to open a new document that has a white background and size400X200 pixels. Choose the “Type” tool by clicking on the text icon “T” in the “Tools” Tab. Now select a font of your choice. Type in the text that you want to work with to create a metallic, 3-D effect.
Step 2

Select your text with the text tool, and pick a color for your text from the color palette or the options bar. Alternatively, use Photoshop’s magic wand to select your text color. Now click on “Select” then “Modify” and then “Contract” to contract your selection by 4px. Next, delete the selected area.
Step 3

Open the layer options, which you’ll use to create the 3-D effect. Click “Layer” then “Styles” and then “Bevel and Emboss.” Next, select the “inner bevel” style.
Step 4

Right click on your “Type” layer in the Layers Palette. Set the thickness at 161px and the size as 21px. Check the “drop shadow” radio button. Set the opacity at 25px and then set the distance as 9px. Choose “inner glow,” which will give your text its shiny metallic effect.
Step 5

Set the opacity at 100 and then select gradient. Set the gradient scheme at black to white (#000000 – #ffffff). Select the “Gradient Overlay” and set a gradient pattern of black-white-black-white-black. Set the opacity at 100 percent.
Step 6

Add a background color of your choice to the background layer. The text will reflect this background color. You will now have 3-D text that has a metallic effect!

Adobe Design Premium Vs. Standard

Adobe redesigned everything a few versions back into software packages that work together and called it the Creative Suite (CS). Aside from the various programs in this suite, there also are packages that combine software packages for specific uses such as website design or print design. The print design packages further are broken into Design Standard and Design Premium Creative Suites. There are some differences between the two suites.

History

When Adobe redesigned all of the products for its Creative Suite, it did so after buying other companies that produced some competing products. For example, it bought Aldus, the maker of the original desktop publishing software, PageMaker, and a competing illustration tool called Freehand. Since that acquisition, PageMaker was shut down in favor of InDesign and Freehand was canceled in favor of Illustrator. Some of the software it bought, such as Macromedia’s Dreamweaver, Adobe continued and closed out its own software, in this case GoLive. Adobe then designed CS packages for different uses. Design Standard and Design Premium both are designed for print publishing with some capabilities for website design only in Premium.

Design Standard

Design Standard includes InDesign CS4 for desktop publishing, Photoshop CS4 (regular edition) for photo editing, Illustrator CS4 for illustration, Acrobat 9 Pro to create portable document format (PDF) files, Bridge CS4 for image organization, Device Central CS4 to create content for mobile devices and Version Cue CS4 to manage shared files.

Design Premium

Design Premium includes all of the above programs, substituting Photoshop CS4 Extended for the standard edition, and adding Flash CS4 Professional to create animations, Dreamweaver CS4 to design websites and Fireworks CS4 to perform photo editing for the Web.

3-D

The main differences between the two versions of Photoshop—regular and extended—have to do with three-dimensional image manipulation and animation. Photoshop CS4 extended has such features as direct painting on 3-D objects, editable 3-D properties, high-quality output and 2-D and 3-D image compositing. If you need to work extensively in 3D, Premium is the right edition.

Choice

If you do not need Web design tools, the Standard edition is more practical because it costs less than Premium and it concentrates on print design and publishing. With Standard, you can edit photos in Photoshop, create illustrations and graphics in Illustrator, design pages in InDesign, create mobile device content with Device Central, export documents—text, DTP and image—as PDFs with Acrobat 9 Pro, and still allow multiple users to access and edit documents with Version Cue. With Premium, you have the added capabilities of designing and implementing websites with Dreamweaver, creating animations with Flash and editing images specifically for the Web with Fireworks.

How to Cut Illustrator Objects Into Pieces

You can cut Illustrator objects into various pieces to create interesting effects. These instructions apply to Adobe Illustrator 8. Procedures for other versions may vary.

Using One Object

Step 1

Create two objects.
Step 2

With the Selection tool, select the object that is to be used as a cookie cutter.
Step 3

Drag this object so that it is touching or overlapping the object to be cut.
Step 4

From the Object menu, click Path and then Slice. The top piece cuts its image into the bottom object.

Splitting a Line

Step 1

Create an object, then select it with the Selection tool.
Step 2

Select the Scissors tool to activate it.
Step 3

Click on the point or anchor where you want to split the line.
Step 4

Click on the Selection tool, then drag the split line or object to its new location.

How to Create a Harvest Moon in Photoshop CS

Although Photoshop has many practical and business applications, you can also use it to have fun creating your own images and designs. In fact, a great way to learn Photoshop techniques is to practice them by making something fun. Designing a harvest moon gives you practice with shapes and color.

Launch Photoshop and click on your Toolbox. Locate the “Default Colors” icon in your Toolbox. If the default colors are white background and black foreground, then click on the “Switch Colors” icon to make your background color black instead of white.
Step 2

From the “File” menu, choose “New.” In the dialog box, change the width and height to 5 inches each. Change the Color Mode to “RGB Color, 8 bit.” In the Background Contents, select “Background Color.” Then, click “OK.”
Step 3

Create a new layer to draw your moon. From the “Layer” menu, choose “New” and “Layer.” Name your layer something like “My Moon,” and click “OK.”
Step 4

Choose the “Elliptical Marquee” tool from your Toolbox by clicking on it. Place your cursor over the upper-left corner of your canvas. Click and drag to create a round shape. Hold down the Shift key while you drag to create a circle rather than an ellipse.
Step 5

Add some clouds to your moon. From the “Filter” menu, click “Render” and then “Clouds.” You can repeat this step to make your clouds darker.
Step 6

Color your moon with the harvest colors of your choice. From the “Image” menu, click on “Adjustments” and then “Color Balance.” Drag the sliders to get the color you want, and then click “OK” to apply the colors to your moon.
Step 7

Save your image by clicking on the “File” menu, then choosing “Save As.”

How to Create Rain in Photoshop CS

What if you wished there were rain in your photograph. Well, you can play with Photoshop provided if you know where the tools are and how to use them to manipulate rain in a photo. In this Photoshop tutorial, instructions are given to add multiple rain layers to create that near-and-in-the-distance rain effect.

Prepare a cloudy day image file and open it in your Photoshop.
Step 2

Go to Image > Brightness/Contrast…, and adjust to darken the image. Do not overdo it or you will have a black picture showing no details.
Step 3

We need to desaturate our image. As you know, except for rare occasions, nothing is bright when raining. I used hue/saturation to darken and intensify the overall effect from the clouds. My ratios for the tutorial image, Hue: 0 / Saturation: -100 / Lightness: -14.

To adjust saturation, go to Image on the top menu bar, then select Adjust > Hue/Saturation…, from the drop-down menu. Click “OK” once you are satisfied with the image.
Step 4

Open a “new” file. Make “black” as the background color. Fill the “Opacity” box with the percentage “50″; making this layer 50% transparent. This is the beginning of creating the “fake” rain.
Step 5

On the top menu bar, go to Filter > Noise > Add Noise…, select the “Uniform” option in the Distribution box. Use the slider to adjust the amount of noise you want; I used 16. Click “OK”.

Next, Filter > Noise > Add Noise…, select the “Gaussian” option in the Distribution box. Use the slider to adjust the amount of effect you want, I used 1. Click “OK”.

Lastly, go to Filter > Blur > Gaussian Blur…, give it a small number; I used 0.8.
Step 6

To create an illusion of movement, we go to the “Motion Blur” filter.

Filter > Blur > Motion Blur…, enter the angle and distance values to create the falling rain direction; I used 70 for the angle, and 28 for the distance.
Step 7

Blend the rain layer we just made with the original photograph. To do this, on the rain image, hold down the left mouse key and move towards the original image. The rain image should now be on top of the original cloud image.

Go to Layer option on the top menu bar, select Image Options and adjust the effects to your liking. I used “60″ in the Opacity box.
Step 8

Theoretically as seen in a picture, there is more rain in the distance and less but more defined/rapid rain fall near the camera. So next, we will create another rain layer (the mid-layer) and place it on top of the previous created rain layer.

After the completed “mid-rain layer”, we will create yet another one to place on top. And we will call that the “foreground-rain” layer.

So we will have 3-layers of rain, each with a unique “rain” effect indicating “distance” on our finished image.
Step 9

To create both the “mid-rain” layer and the “foreground-rain” layer, repeat Steps 4 to 7. Increase the numbers for the “Motion Blur” and for the “Opacity” in the “Image” options for more transparency on subsequent layers. When done, save image file in Photoshop using a different name.

How to fade one image to another in Photoshop

Have you ever wanted to create an image that depicts two separate images fading into each other? Here is how.

Open the Two Images in Photoshop.
Step 2

Put them together by choose 1 image layer then shift+click and drag to other image
Step 3

Select one image and add layer mask. To create the layer mask, make sure the select layer (Layer 1) is selected in the Layers palette, then select Layer > Add Layer Mask > Reveal All
Step 4

Fill the Layer Mask with a Gradient. Select the Linear gradient type and, from the drop-down colour box, choose the Black, White. click and drag in the document window from the bottom right of the image to the top left, to create the gradient fill.

How to Compress Images With Photoshop To Make Your Website Load Faster

If you’re website is not loading fast enough or you are experiencing lots of server load, you may consider compressing the images to save load time and bandwidth. Compressing images is very simple. All you need is an image editing program. Your computer will usually come with one but there are some better ones you can buy. For this article, we’re using Photoshop.

First, we’ll need an image to compress. For this article, we’ll need an image to compress. I have chosen a picture of a golf course from Google images.
Step 2

This image in it’s full size is a whopping 3072 by 2304 pixels, bringing it to a giant size of 2348 KB. This is definitely not web-optimized. But, maybe, on your website, you only want this image to be 600 pixels wide to fit your page. You could easily size it down right on your page by using html, however, the whole 2348 KB of the image still has to load so even though it’s smaller in size, it still takes pretty long to load even on high speed internet. We’ll need to size the actual image down to 600 pixels wide so it loads faster.
Step 3

Alright, the first step is to open up the image in Photoshop.
Step 4

Next, navigate to the image tab at the top.
Step 5

Now click on “image size” and a dialog box will come up. This is where you can change the size of your image.
Step 6

Type in 600 (or the width you want on your website) in the width box. The height will change accordingly to keep the aspect ratio and then, click “Ok”.
Step 7

This will resize your image. Now, go to File > Save As and choose a file name and type. Note: Try to keep to the same image type as the same type as the original image to help the quality stay the same.
Step 8

Optional: With some file types, including jpg’ s, you can change the quality setting when you save. Lowering the quality can dramatically lower size also without sacrificing much quality to the naked eye. For example, lowering the quality of this image to 5 from 12 lowers the memory needed even more from 311.9 KB to 74.1 KB

How to create a Flash Gallery using Photoshop CS

This article will provide a walkthrough on how you can build your very own Flash Gallery using Adobe Photoshop CS2. Let’s get started.

Open Photoshop, choose File > Automate > Web Photo Gallery to open the Web Photo Gallery dialog box.
Step 2

For Styles, select “Flash – Gallery 1″ from the drop down menu.
Step 3

For Source Images, select “Folder”, and uncheck the Include All Subfolders checkbox. Click on the “Browse…” button to tell Photoshop where to acquire your set of images from.
Step 4

Click on the “Destination” button to tell Photoshop which directory to save all the gallery files into.
Step 5

For the Options drop down, I typically change the default settings found in Banner, Large Images, and Custom Colors.
Step 6

When you’re happy with the settings, click on the OK button. Photoshop will automate the task, and save all files in the destination/output folder you specified.

Here’s how a sample gallery can look like:

Tips & Warnings

I find that it’s easier for me to find my working folders by creating them on my desktop. Create a “source” folder where you will place the photos, and a “destination” or “web” where you can instruct Photoshop to output the Flash gallery files into.
You have more than a dozen web and flash gallery templates to choose from in the Styles drop down.
When working with photos, be sure to use copies of the photos instead of the original files.

How to Layer Photos Using Layer Mask with Photoshop CS

One of the most powerful tool in Photoshop is the Layer Mask. With that tool, you are able to open new possibilities that the ordinary tools cannot do.

Layer mask can hide parts of one image, reveal parts of another image. You are able to design and create new artwork that may get the attention of the viewers’. You could even easily amuse yourself of your accomplishment.

Launch your Photoshop program. Locate your photos.
Step 2

For this tutorial, I’m using this photo and the one in the following step to create a combined image.

This image will be layered on top the one in the following step. In the finished picture, only the large golden leaf on the bottom right will be present.

** The yellow leaf in the final print is a reshaped and repositioned image of the original as shown here.
Step 3

This is the image I’ll be using for the base (background image). It will be underneath the picture shown in the previous step. This image will be B&W for the final print.
Step 4

(1)Select the two (or more) images that you want to blend/layer. Click the move tool, you can find this tool in the standard tool box. Or Ctrl + V, for keyboard.

(2)Click and drag the image that you want to blend/layer/merge to the top of the photo; the one that you want to be the base (the base is the background).

(3)Make sure the foreground color is black.

(4)Click the Layer Mask button. Select the gradient tool, then choose the gradient style that you want from the options window. Adjust image color – - either to the pre-selected areas/objects or as a whole to your liking.

(5)Click the Layer Mask. Right click your mouse, drag the layer mask while holding down the left mouse button in the image, so that you can apply the gradient to your mask. The two images will blend together at this point.

(6)Click the Brush tool. Choose the appropriate size and soft edge brush from the Brush drop down menu.

(7)To touch up the mask to reveal more of the background photo, make the image black by paint over it with a paintbrush or spray tool.

(8)Reverse the colors of the foreground and background. Spray or paint white color to fill the areas that you have accidentally painted too much on the base photo.
Step 5

Contrasting yellow against a b & w background ; creating a focal point on the golden leaf

- – final notes – -

(1)The top image will be visible when you are painting with the black on a white layer mask. In case you are painting too heavily, you can reverse the colors and paint with white.

(2)You can control how much of the image you want to reveal by setting the pen pressure for the paintbrush or spray paint tool (airbrush tool) that you are using.

How to make something bright in Flash when you mouse over it

Ever wanted to know how people are able to create those little Flash images that get brighter when you mouse over them? Well wonder no more! Follow these simple directions and you will be able to do it yourself.

First you will need to open Flash and start a new Flash document.
Step 2

Press ctrl+r and import the image into flash.
Step 3

After you have placed the item on the stage (the area that’s not grey) press F8 and convert it to a Movie Clip.
Step 4

Click on the Movie Clip and make sure that it’s properties show up on the bottom of the screen. Change <instance name> to the name of the Movie Clip.
Step 5

Change the color to alpha and set it to 50%.
Step 6

Click on frame 1 of your bottom layer.
Step 7

Click Actions above Properties.
Step 8

Enter the following replacing <MC> with the name of your MC per instruction 4:

//When moused over
<MC>.onRollOver = function () {
<MC>._alpha = 100;
};
<MC>.onRollOut = function () {
<MC>._alpha = 50;
};
Step 9

Press ctrl+enter to test.
Step 10

Sit back and bask in the genius that is you.