Web Design and Web Development Tutorial

Mysqli Insert Query

2016-02-26T01:59:00.000-08:00

Three SQL commands - INSERT, UPDATE and DELETE - usually form the basis of any content management system.

These SQL commands are all going to be the recipients of user derived data most often from HTML forms but possibly through querystrings.

As such the mysqli prepare statement with its separation of the query from the data is a good secure approach to take.

INSERT

Assuming a HTML form of method $_POST with the appropriate fields in it the following would insert a new record in a table called 'movies'.

$stmt = $mysqli->prepare("INSERT INTO movies(filmName,
filmDescription,filmImage,filmPrice,filmReview) VALUES (?, ?, ?, ?, ?)");
$stmt->bind_param('sssdi', $_POST['filmName'],
$_POST['filmDescription'],
$_POST['filmImage'],
$_POST['filmPrice'],
$_POST['filmReview']);
$stmt->execute();
$stmt->close();

Notice the use of the flags 'sssdi' in the bind_param() method and the position placeholders (?) in the prepare statement.

creating an animated banner, creating flash banner, thim flash banner, flash thim banner, thim flash animation banner, animated flash banner, web design flash banner

2011-08-24T01:56:00.000-07:00

Adobe Flash CS3 Tutorial:

Creating an Animated Banner

This tutorial introduces you to working with Flash as you create an animated banner. You will find this tutorial easier if you have already completed the Adobe Fireworks CS3 Tutorial -- since some of the menu options and tools are similar.

Begin by launching Adobe Flash from the application program menu:
Select Start > Programs > Adobe Web Premium CS3 > Adobe Flash CS3.

Your screen should look similar to the image shown below (click on the image to view a larger screenshot.)

Don't worry if you feel a little intimidated by all the windows and panels that appear. We will focus on the functions needed to create a company logo banner. When you want to learn more about Flash, try out the Getting Started with Flash option found under "Help" on the top menu bar or consider taking a course on Flash multimedia. When you are ready, continue with the tutorial.

Create a New Flash Movie

To create a new Flash movie, select File > New. The New Document dialog box will display. Select "Flash File (ActionScript 3.0)" and click OK.

Flash is now ready for you to create your new document. Your display should be similar to the one below. (Click the image below to see a larger version).

Take a minute to familiarize yourself with it.

     The "Untitled-1*" in the Title Bar is the name of the file at this point. (Don't worry if your file has a different number after "Untitled-" than 1.)
    Notice that there are a number of panels and menus. You will work with some of them in this tutorial.
    View the center area of the Flash window and note the "Timeline". This is used to configure animations frame by frame as well as configuring layers and adding animation effects.
    The white rectange is called the Stage. This is a very important area. The Stage is your Flash animation. The dimensions of the Stage are the dimensions of your Flash animation.

Setting the Size of the Stage

The IAB publishes voluntary guidelines for banner and ad sizes. In this tutorial you will create a banner with the dimensions 468x60. To set the Stage to these dimensions, select Modify > Document to display the Document Properties dialog box shown below.

Configure the Title, Description, and Dimensions text boxes as shown above. Notice that the Background color is set to white but could be changed in this dialog box. Leave the Frame rate and Ruler units at their default values. Click OK.

The Flash window should display as shown below click on the image to view a larger screenshot). You may need to use the scroll bars around the Stage area to display your banner rectangle.

Save the File

It's a good idea to save your file often when using Flash. Select File > Save. The Save As dialog box opens. Create a new folder called FlashBanner and save the file with the name "banner.fla". The file extension, ".fla" (usually pronounced "flah") is used for Flash movie source files. The title bar in the Flash window should now display "banner.fla".

Flash Tool Panel

Notice the Tools Panel in your Flash application. The currently selected tool is the "Selection Tool" -- the standard cursor pointer. Place your mouse over the other tool icons for a brief description of each.

You will be using the "Text Tool" icon on the Tools Panel during this tutorial. Take a moment and find it. (Hint: Look for the letter T" in the Vector area on the Tools Panel.)

You will also be using the Stroke Color and the Fill color Tools. These are used to change the color of the object you are working with.

Flash Timeline

Take a look at the Timeline which is located above the Stage and under the Menu bar.

As you can see, there are many features on the Timeline. A few of the most commonly used features are discussed below.

The left side of the Timeline (see Layer 1) is where you place your layers. Typically each layer holds one object in a Flash movie. You will be creating several layers to create the animated banner. It is good practice to assign each layer a meaningful name.

The Add New Layer icon (InsertLayer icon) in the lower left corner is used to add a new layer to the Timeline.

The "eye" icon can be used to make layers visible or invisble while you are working. Sometimes this is helpful as you are working on animations.

The "lock" icon is used to temporarily freeze or lock layers you do not wish to accidentally change while you are working.

The area at the left side of the Timeline shows the frames in the animation. This area is used to configure keyframes which indicate where the animation changes. The Timeline can also be used to automatically create tweens (more on this later). The transparent red rectangle indicates the frame that is currently displayed on the Stage.

It is handy to know how to undo an action when using Flash -- just in case you make a mistake. Pressing the Ctrl and Z keys at the same time will undo your most recent action. There also is an Undo option located on the Menu Bar (Edit > Undo).

Overview of the Animated Banner

The animated banner you will create is shown above. This banner plays once when the page is loaded. If you would like to see the banner play again, click the refresh button on the browser window (or press F5 to refresh the page).

This banner contains three layers: Background, Shape, and Text. The Background layer controls the color changes in the background of the movie. The Shape layer configures the way the oval shape changes or morphs as the animation plays. The Text layer controls the animation of the company name.

Configure the Layers

Recall from the previous page that is is recommended to assign meaningful names to layers in a Flash movie. Now you will rename "Layer 1" to "Background". Place your cursor in the Timeline over the label "Layer 1" and doubleclick. A text box will display as shown at the right.

Type "Background" and press enter to rename the layer. Next, add a new layer by clicking the Add New Layer icon in the lower left corner of the Timeline. A new layer called "Layer 2" will appear above the Background layer. Name this layer "Shape". Your Timeline should be similar to the display at the right.

In a similar manner, add a new layer above the Shape layer and name it "Text". Your Timeline should be similar to the display at the right. The order of the layers is important. The layers will display in bottom-up order. So -- objects on the Shape layer will appear over objects on the Background layer. Objects on the Text layer will appear over objects on both the Shape and Background layers

Save your file.

Configure the Background Layer

The Background layer contains a rectangle with the same dimensions as the Flash movie.

You need to tell Flash what layer you are working on. Click in Frame 1 in the Timeline on the same row as the Background layer select this layer and frame.

Use the Colors panel to choose the color for the pencil (outline) and bucket (fill) of the rectangle you will create. Click on the color chooser next to each and select #99CCFF.

Next, click on the Rectangle Tool (shown in the figure at the right) to draw a rectangle on the Stage. Your cursor will change to "+". Start at the upper left corner and drag a rectangle across the stage. Don't worry if it is not perfect, you can use the Properties panel to exactly set the dimensions.

Your Stage and Properties panel should look similar to the one below. (If your Properties panel does not automatically display, select Window > Properties > Properties.)

If your "W", "H", "X", and "Y" values are different, type the following values in the corresponding text boxes:

W: 468.0        X: 0.0
H: 60.0           Y: 0.0


This configures the rectangle to be placed at the topmost (Y value) and leftmost (Y value) place on the Stage. It also configures the rectangle to be 468 pixels wide (W value) and 60 pixels high (H value).

Next, you will add a keyframe on the Background Layer in the Timeline Frame area. If necessary, scroll the Timeline Frame area to the right so the frame labeled 50 is in view. Click in Frame 50 on the Background Layer and press the F6 key. This places a keyframe in Frame 50. A keyframe tells Flash that a change occurs in this frame.

Your Timeline should be similar to the one shown above. If you accidentally click on a different layer or frame --remember you can back out your changes using CTRL-Z or Edit > Undo.

With this frame still selected, you will change the color of your rectangle. Using the Selection Tool, double-click on the rectangle. Next. use the Color Chooser to choose the color #00CCCC for both the pencil (outline) and bucket (fill) colors. The rectangle on the Stage should be a shade of turquoise as shown below.

Add Animation to the Background Layer

Next, you will use Flash to automatically change the color in from blue to turquoise on the Background layer by using a Shape Tween. (The term "tween" is short for "between" -- Flash will create all the frames between Frame 1 and Frame 50 for you!

Click on a Frame between Frame 1 and Frame 50 in the Background layer. The Properties panel will display a Tween select menu. Select Shape as shown in the figure below.

The Timeline will now show an arrow between Frame 1 and Frame 50. Your Timeline should look like the figure below. If you see a dotted line instead, undo your work or reload the saved version of banner.fla to try again.

Test the Background Animation

You can "play" the animation with the Timeline. Scroll the Timeline to the left until Frame 1 is visible. Click on the red rectangle (called the "playhead") and drag it to the right to see the color of the rectangle change automatically! Another method for this playback is to select Control > Play from the menu.

You can also test the animation outside of the Timeline and Stage. Select Control > Test Movie. A new window will open with your Flash movie as shown below.

Flash has created a .swf of your file. If you look closely, the background color of the animation will change from light blue to turquoise. Not much is happening yet, but you have two other layers of animation to configure!

Save your file.

Configure the Shape Layer

Before beginning to work on the Shape layer, click the lock icon on the Background layer to prevent accidentally changing it.

Now you are ready to get started with the Shape layer. You need to tell Flash what layer you are working on. Click in Frame 1 in the Timeline on the same row as the Shape layer to select this layer and frame. See the Figure below.

The Shape layer contains an oval shape that changes size and color. Use the Colors panel to choose the color for the pencil (outline) and bucket (fill) of the oval shape you wil create. Click on the color chooser next to each and select #003366.

Next, click on the Oval Tool (shown in the figure at the right) to draw an oval shape on the Stage. Your cursor will change to "+". Start at the upper left corner and drag a small oval on the left side of the stage. Don't worry if it is not perfect, you can use the Properties panel to exactly set the dimensions.

Your Stage and Properties panel should look similar to the one below. (If your Properties panel does not automatically display, select Window > Properties > Properties.)

If your "W", "H", "X", and "Y" values are different, type the following values in the corresponding text boxes:

W: 15.0        X: 28.0
H: 10.0         Y: 25.0


This configures the oval to be placed 25 pixels from the top (Y value) and 28 pixels from the left (Y value) place on the Stage. It also configures the oval to be 15 pixels wide (W value) and 10 pixels high (H value).

Next, you will add a keyframe on the Shape Layer in the Timeline Frame area. If necessary, scroll the Timeline Frame area to the right so the frame labelled 25 is in view. Click in Frame 25 on the Shape Layer and press the F6 key. This places a keyframe in Frame 25. A keyframe tells Flash that a change occurs in this frame.

Your Timeline should be similar to the one shown above. If you accidentally click on a different layer or frame --remember you can back out your changes using CTRL-Z or Edit > Undo.

With this frame still selected, you will change the color and shape of the Oval. You will use the Selection Tool in the Tools panel (see figure below).

Click on the Selection Tool. Click on the oval to display the Properties panel. Change the height to 100.0. the width to 200.0 and the Y value to -10.0. Change both the outline and fill color to #006666. rectangle. Use the Color Chooser to choose the color #00CCCC for both the pencil (outline) and bucket (fill) colors. Click on the Stage to view the effect of the new values. The Properties and Stage panels are shown below.

The Background Layer has 50 frames and the Shape Layer has 25 frames. Srcoll the Frames Timeline so that Frame 50 is visible. Click in Frame 50 of the Shape Layer and press the F5 key to add frames to the timeline. See the figure below.

Add Animation to the Shape Layer

Next, you will use Flash to automatically change the color and shape of the oval in the Shape layer using a Shape Tween. Click on a Frame between Frame 1 and Frame 25 in the Shape layer. The Properties panel will display a Tween select menu. Select Shape as shown in the figure below.

The Timeline will now show an arrow between Frame 1 and Frame 25. Your Timeline should look like the figure below. If you see a dotted line instead, undo your work or reload the saved version of banner.fla to try again.

Test the Background and Shape Animation

You can "play" the animation with the Timeline. Scroll the Timeline to the left until Frame 1 is visible. Click on the red rectangle (called the "playhead") and drag it to the right to see the both the Shape and Background animations play! Another method for this playback is to select Control > Play from the menu.

You can also test the animation outside of the Timeline and Stage. Select Control > Test Movie. A new window will open with your Flash movie as shown below.

Notice that the top and bottom of the oval do not appear in the Flash .swf movie -- that is because these portions of the oval are beyond the Stage. This is a common technique.

Save your file.

Configure the Text Layer

Before beginning to work on the Text layer, click the lock icon on the Shape layer to prevent accidentally changing it.

Now you are ready to get started with the Text layer. You need to tell Flash what layer you are working on. Click in Frame 1 in the Timeline on the same row as the Text layer to select this layer and frame. See the Figure below.

The Text layer contains the name of the company "Acme Web Design" and move in from the right. Select the Text Tool from the Tools panel as shown at the right. Your cursor will change to .

Use the Property panel to configure the font, size, and color of your text. In the example, the font is set to Broadway BT. Use this font face or another font of your choice. The font size is set to 40. The color is set to #FFFFFF.

Your Stage and Properties panel should look similar to the one below. (If your Properties panel does not automatically display, select Window > Properties > Properties.)

It's OK if your height, width, X and Y values may be slightly different. Next you will configure the "X"" value to place the text mostly off-stage to the right. Change the X value to 450.0. Your Stage should be similar to the figure below. Notice that the text begins near the right edge of the Stage.

Next, you will add a keyframe on the Text Layer in the Timeline Frame area. If necessary, scroll the Timeline Frame area to the right so the frame labelled 40 is in view. Click in Frame 40 on the Text Layer and press the F6 key. This places a keyframe in Frame 40. A keyframe tells Flash that a change occurs in this frame.

Your Timeline should be similar to the one shown above. If you accidentally click on a different layer or frame --remember you can back out your changes using CTRL-Z or Edit > Undo.
With this frame still selected, you will move the location of the text. Either drag the text object over to the left with your mouse, or use the Select Tool to click on the text object and modify the Properties panel -- change the X value to 40.0. Your Stage should be similar to the figure below.

The other layers have 50 frames and the Text layer has only 40 frames. Srcoll the Frames Timeline so that Frame 50 is visible. Click in Frame 50 of the Text Layer and press the F5 key to add frames to the timeline. See the figure below.

Add Animation to the Text Layer

Next, you will use Flash to automatically move the text from the right side of the stage (Frame 1) to the location on the Stage in Frame 40. You will configure a Motion Tween. Click on a Frame between Frame 1 and Frame 40 in the Text layer. The Properties panel will display a Tween select menu. Select Motion as shown in the figure below.

The Timeline will now show an arrow between Frame 1 and Frame 40. Your Timeline should look like the figure below. If you see a dotted line instead, undo your work or reload the saved version of banner.fla to try again. View the Timeline and examine the background color of the frames. The Shape Tweens are indicated by a green background color and the Motion Tween is indicated by a blue background color.

Test the Background, Shape, and Text Animation

You can "play" the animation with the Timeline. Scroll the Timeline to the left until Frame 1 is visible. Click on the red rectangle (called the "playhead") and drag it to the right to see the both the Shape and Background animations play! Another method for this playback is to select Control > Play from the menu.

You can also test the animation outside of the Timeline and Stage. Select Control > Test Movie. A new window will open with your Flash movie as shown below.

Notice that now the text moves in from right to left. You are done designing your Flash animation. The next step is to publish the movie (create a .swf) and test the movie in a web page.

Save your file.

Publish Your Movie

Select File > Publish Settings to display the Publish Settings dialog box shown below. You will work with the Formats tab, the Flash tab, and the HTML tab of this dialog box.

On the Formats tab, verify that the Flash and HTML checkboxes are checked.

On the Flash tab leave all settings at the default values except for the following:
1. Set the Version fo Flash Player 5 as the Version (provides maximum compatibility),
2. Check Protect from import.
3. Check Omit trace actions

On the HTML tag, verify that Loop is unchecked -- we only want the animation to play once. Checking Loop will cause the animation to repeat over and over.

Click Publish . Click OK.

Flash has published your animation as a Flash Movie called banner.swf and has created a web page file named banner.html that displays banner.swf.

Test the Web Page and Flash Movie

Launch a browser and open the banner.html file. Your result should be similar to the figure below:

View the source code of the web page to see the HTML code automatically generated by Adobe Macromedia Flash to display the Flash movie. You can copy and paste this code in your own web pages as needed.

Congratulations!
You've created your first animated banner using Flash!

create a simple and sleek footer, create simple and sleek web 2.0 site footer, simple footer creation, simple web 2.0 footer, web2.0 footer tutorial, photoshop web 2.0 footer, phothoshop footer tutorial, photoshop footer desing

2011-07-17T11:54:00.000-07:00

How to Create a Simple & Sleek Web 2.0 Site Footer

Since Web 2.0 hit the internet, footers have become more important than ever, and there has been some great looking work done downstairs. In this tutorial I’ll show you how to produce a sleek looking site footer in Photoshop.

The Footer

Here’s the footer we’ll be creating, click on the shot below to see the full size version:

Step 1

Along with liquid headers and footers, gradients are a common hallmark of Web 2.0 style design. For our tutorial we will be using a neat package of gradients that simular 3d / materials that you can get from the excellent Deziner Folio site.

Step 2

Open your new Photoshop file. I’ve created mine with large dimensions – 1440 px x 900px (to fit my 17inch notebook screen). Of course your actual footer shouldn’t be this large, however it’s good to simulate what happens when your browser window is stretched.

Choose a background color, in my case the choice for background is a simple gradient with #b0b0b0 and #e1e1e1. Move your cursor on the screen holding SHIFT to create a vertical gradient down the page.

Step 3

In web design it’s very important to decide what kind of layout you are going to be creating. That is to decide between a liquid layout (one that stretches out across your browser) or fixed (in many Web 2.0 style sites fixed layouts are usually centralized). In our footer, we will work with a fixed layout measured out to 760px x 420px. These measurements will ensure that even on an 800px x 600px screen, our footer will still appear properly.

Use guides to delineate the size of your website as shown below. Note that if you want create a layout that is optimized for 1024px x 768px setups, then define your guides to delineate a 955px x 600px area.

Step 4

Although our footer is a fixed width, we still want the footer to stretch out across the page and fill out the remaining area. To do this we will use a pattern made by me in photoshop to simulate a metal plate. To download the pattern click here. Open this image in photoshop and go to Edit > Define Pattern and choose a name for the pattern.

Now open a new file with 1440px for width and 86px for height, and go to Edit > Fill and pick the pattern we just created. Select all (CTRL+A for PC and APPLE+A for Mac), then cut and paste the image into the bottom of our first document. You will get the result shown below.

Step 5
Now it’s time to user our beautiful gradient package from Step 1. Create a new layer and create a rectangle using Marquee Tool (M) with 100% of document width and 21px of height. Now select Gradient Tool (G) and select a cool gradient. I selected “Black 5 – Gloss” from the gradient package. Now move the gradient tool vertically over the marquee holding down “SHIFT” to ensure it’s exactly vertical.

Move the resulting shape to the top of the shape created in step 4. You should have something that looks similar to the screenshot below.

Step 6
Now we add a drop shadow effect to the layer we created in Step 5.

Step 7

Now set your Foreground Color to #545557 and Background Color to #1e211f. Create new layer below the step 4 layer. Use the Marquee Tool (M) to select the content of the step 4 layer. Select Gradient Tool (G), choose the first gradient (combination of back and foreground colors). Draw a gradient over the marque holding shift to get the vertical gradient. Now go to the step 4 layer and set this layer’s blending mode to Multiply.

Step 8

Now create a new layer above all the other layers and draw a rounded rectangle in the middle of our guides, choosing the color to be #dfdfdf. Right click the layer, click on Blending Options and then create a Drop Shadow effect for the rectangle. Then right-click on the effect layer and choose “create layer”. This will split the drop shadow on to its own layer.

Now you have the rectangle layer and shadow layer, move and resize the shadow to get the result below. You may wish to press CTRL-T to get the transform tool up, then right-click and choose Perspective, then drag the top two handles in towards each other. Alternately you can move the shadow down and use a soft eraser brush to brush out the top edges.

Step 9

To finish the design add some text, copyright information and your logo to the bottom.

Step 10

To get the footer ready for use in your HTML file, simply remove the text (the text will be added in HTML), flatten the whole file and cut the background of footer as shown below, then paste it in to a new file. As we did in Photoshop, the pattern can be produced using a background property in your CSS document. This is the reason why we have cut the image so small as this leads to better performance with the smaller file size.

To cut the center of footer just select the content inside guides and cut-it and paste into another file.

Save both files using Save > Save For Web & Devices and select JPG with an appropriate quality setting. JPGs and PNGs are good for images like the one shown where there are a lot of graduations of color. GIF images are better for areas of flat color. This is due to the algorithms each uses.

The Footer

And you’re done, a lovely footer element! For more great footer ideas, check out Thiuven’s 35 Beautiful Footer Designs.

design cool effect in photoshop, cool menu creation in photoshop, design cool 3D web design, create cool design, meroon background menu, restauran menu design, web design tutorial, dark background white text

2011-07-17T11:36:00.000-07:00

Creating A Cool 3D Web Design Effect

Step 1

Create a new document with 1000x750px. Double click on the background’s layer and in Color Overlay and choose a dark brown.

Step 2

Enable the rulers (View>Rulers) on your document and add some guides as shown below. Create 2 horizontal guides, the first at 30px and the second at 250px. After that add 2 vertical guides at 100px and 900px.

Step 3

Create a rectangle with the Rectangle Tool (U). Use the guides for reference. Rename the layer to header.

Step 4

Choose black for your foreground color. Select the Ellipse Tool and create the shape that will be the shadow. Make it a bit higher than the white rectangle as shown. Rename the layer to shadow and put it below the header layer.

After that, convert it to Smart Filters, apply a Gaussian Blur and change the opacity to 60%.

Step 5

With the header layer selected, double click it to open the Layer Style dialog box. Select Gradient Overlay. Change the gradient style to radial. For the colors I used dark reds.

Step 6

Next, select the Line Tool (U) and choose the lighter color of the header gradient and create a line. After that choose black and create another line just 1 pixel above the red line. Select the 2 lines and group them. Rename the group the "vDivider".

Go to Layer>Layer Mask>Reveal All. Using the Gradient Tool, select a Radial Gradient from Black to White and apply a mask to our group. Start the gradient from the center of the group.

Step 7

Create the menu using the Horizontal Type Tool (T). Use white for the text color. Select all links and group them. Rename the group White Links.

Duplicate the group and place it below the white links, change the text color to black and move the group 1 pixel up and left. That will create a nice 3D effect, exactly like the one we did with the lines.

Step 8

Repeat the Step 6, but this time create the horizontal dividers for the links. Use the line tool to draw a red line and 1 pixels to the left draw a black line. Group them and duplicate the group 5 times. Distribute the groups as shown below.

Step 9

Select all groups of lines and group them. Rename the group toDividers. After that apply a layer mask, Layer>Layer Mask>Reveal All. But this time use Linear.

Step 10

Open the pattern file, or get any pattern you like. Select all and go to Edit>Define Pattern. Call it webPattern.

Duplicate the header layer and rename it to pattern. Go to its Layer Styles and disable the Gradient Overlay and set a Pattern Overlay. Choose the ‘webPattern’ we created and change the Blend Mode to Color Overlay.

After that apply a layer mask to the pattern layer using a Radial Gradient.

Step 11

Now we can add the logo and the spoon.

For the text, type Psdtuts+, select a bold typeface for the PSD and a regular or light for the TUTS. Go to Layer Styles and apply a Drop Shadow, Gradient Overlay, and Stroke. That’s a very common and beautiful effect.

Conclusion

When we work with web design we have to consider file sizes, browser compatibilities and many other issues. Sometimes little details like subtle gradients or borders using 2 colors can create a very nice visual effect or unique style without requiring many hacks and adjustments.

How to design menu in photoshop, design vista menu, vista menu tutorial, This tutorial will show you how to make a semi transparent Vista-inspired menu using gradients, shadows, and blurring to produce a stunning modern, menu tutorial, photoshop menut tutorial, transparent menu tutorial

2011-07-17T11:21:00.000-07:00

How To Create a Stunning Vista Inspired Menu

This tutorial will show you how to make a semi-transparent Vista-inspired menu using gradients, shadows, and blurring to produce a stunning modern effect.

Step 1

Open a new canvas that is 600x335px. Begin by showing rulers (View>Rulers), then create two guides similar to the image below. Create one at 285px and the other at 310px.

Step 2

Create a Rectangle (U) that fills the lower ruled area and label the layer “lower bar.” Open up the Effects Menu for the layer. Navigate to the Gradient Overlay property and apply a gradient between #000000 and #0c0c0c at 90 degrees.

Now create another rectangle in the upper rules area and name the layer “upper bar.” Again open up the effects menu and apply a Gradient Overlay between #35393d and #787b7d at 90 degrees. Select the two rectangles created so far and change the Opacity to 90%. When a background is added later, this will provide a nice effect, as it allows the background to slightly show through.

Step 3

The next step is to add a highlight to the menu using the Line Tool (U). Select the Line Tool and change the weight to 2px. Draw a line across the bar and change the color to #9fa2a4. Rename this layer to “lower highlight.” Now draw another line directly above the previous and change the color to #484b4d and change the name to “upper highlight.” Group these layers with bar layers in a group called “bar.” This stage completes the basis of the menu.

Step 4

Now that the menu bar is complete, we can create a set of dividers to go between the text. Select the Line Tool again and leave the weight at 2px. Draw a vertical line from the center ruler mark that stops a few pixels before the highlight. This does not need to be exact and can easily be adjusted later. Open the effects menu and apply a Gradient Overlay at 90 degrees between #676a6d and #4d6672. Label this layer “upper divider.”

Draw another vertical line from the center ruler going down and stopping the same distance from the edge as above. This section does not have a gradient, so change the color to #43474b. Rename this layer to “lower divider.” Group the two sections of the divider and name the group “divider.”

Step 5

Select the Type Tool (T) and change the color to white (#FFFFFF). The font I chose to use for the menu is called Segoe UI because it is the font used in the Vista user interface. However not everyone has this font, so as a replacement Arial will do. Set the size to 11pt and type your links out, spacing them evenly. Group them together and name the group “links.”

Now copy your dividers and space them in between the links. You should end up with something similar to this.

Step 6

Now the menu bar is basically completed, so you can add a background of your choice. The background I chose is a photograph of grass. Anything colorful or scenic will do.

Copy your background into the menu and rename the layer Background. Make sure this layer is at the back in your layers palette. Note the transparency in the menu allows the background to show through without overpowering.

Step 7

This step will create the blurred rounded rectangle that is behind the text. This effect is quite common in Vista and is a good technique. It takes the focus of the background and places it on the text, but still shows the beautiful scene behind.

First of all, duplicate the background. This layer is not permanent, but we will be cutting a selection out of it. Then using the Rounded Rectangle Tool (U), draw a shape that starts past the left edge of the canvas. This means that the shape only has two rounded edges.

Rasterize the layer and then using the Magic Wand Tool (W), select the rectangle and delete the color while keeping the outline. Now select the background copy and cut from that layer. Delete the background copy layer and add another new layer called “blur.”

Paste the shape in the layer called “blur” and then apply a Gaussian Blur of 5px (Filter>Blur>Gaussian Blur). Then apply a Drop Shadow as shown below.

Step 8

Now add your text inside the blur. Using the same typeface as the links (Segoe UI) type your name and tagline. Select some of the text and make it bold and keep some normal, apply a Drop Shadow, and a Gradient. This produces a modern-looking text that has a striking look.

Step 9

This step is optional, as it will produce the blue highlighted glow that will become our hover effect. Draw a large Ellipse (U) that fills the area between the dividers. Change the color of the ellipse to #5c94c5 and apply a Gaussian blur of 10px. The shape has now become a raster layer, and you can clean up the excess blur by using the Marquee Tool (M).

Conclusion

This menu produces a stunning effect when coupled with a bright scenic background. It uses transparency to great effect as well as modern gradients. The use of highlights is a great trick to providing a cutting-edge modern look to pictures. This menu would be quite easy to slice up and turn into a very functional web-based menu with hover states.

how to design a nice sleek tab menu in Photoshop, Web 2.0 style. Step 1 Create a new canvas with white,design a Web 2.0 tab with Photoshop design web tab, , round corner menu tutorial

2011-07-17T11:02:00.000-07:00

The follow guide below attempts to give you an idea how to design a nice sleek tab menu in Photoshop, Web 2.0 style.

Step 1

Create a new canvas with white[#ffffff] background at any size you like, preferably rectangular; they are more suitable to draw tabs. Then switch to Channels Tab (Windows -> Channels), click Create new channel on bottom right.

Step 2

On the channel layer selected, draw similar shape with Polygonal Lasso tool. Fill it up with white color[#ffffff]; unselect the Polygonal region (select any Marquee tool and hit the screen one); give the shape Gaussian Blur with radius 6.0px.

Step 3

CTRL-L to call up the Level Dialog and push the left and right arrow to meet the center arrow, like the image above. This will “smooth” your blur-ed shape up and give you a nice rounded corner shape.

Step 4

In Channels Tab, Hold CTRL, click on Channel Thumbnail of layer Alpha 1. The new shape will now be selected, switch back to Layers Tab, Create New Layer and fill the selected area with black [#000000].

Step 5

Remove rounded corners for bot bottom left and bottom right, move it towards the left and position it as illustrated above. Next we will focus on the black color Tab.

Hold CTRL, click on tab’s Layer Thumbnail to get the entire tab image highlighted.

With the tab image still highlighted, select Rectangular Marquee Tool, hold ALT and draw a rectangular of region we want to remove.

You should only see the top part selected. Select -> Modify -> Contract, Contract by 2px and you should get something like the image on the left.

Create a new layer, fill the highlighted region with white[#ffffff]. Right click, choose Blending Options then Gradiant Overlay. Replace the white[#ffffff] color stop with gray[#616161]. Your tab should look like the image on the left.

Step 6

Create a new layer; Select Rounded rectangular Tool (Radius 8px), draw a rectangular and put this layer behind the black tab layer. Right click and select Blending Options and insert the following settings.

Drop Shadow

    * Opacity: 31%
    * Distance: 0px
    * Spread: 0%
    * Size: 2px

Bevel and Emboss

    * Depth: 100%
    * Size: 0px
    * Soften: 0px

Gradiant Overlay

    * Here are the Color stops settings.
    * Color: #aaaaaa, Location: 0%
    * Color: #ffffff, Location 100%

Step 7

Put in some text to see the overall web 2.0 look. I’m using font Lucida Fax, font-size 32pt and 25pt. And your tab is done! Feel free to play around with the Tab’s colors combination.

logo, free logo, logos, logo tutorial, photoshop logos, logos creation in photoshop,designing logos,sports logo,logos in photoshop, web logos,logos for webdesignhow to make an awesome logo awesome logo, creat logo

2011-07-15T02:57:00.000-07:00

Introduction

Back when I began my ventures on computers in 98 on AOL, I was one of the many mesmerized by the world of AOL "proggies". I began to code my own with VB and I remember one of the things I loved to focus on personally, was the whole intro art. I saw a few, I can't remember the names now, but their amazing fire effects with their lightening bolts blew my mind away. Thus began my journey of design.

I've designed for approximately 9 years now and I've learned a lot. It has also helped me make money online. From mainstream corporate professional design, to fun gaming design, to adult design. The accumulative experience of all these avenues have really helped further my abilities when I confront each new project.

In this tutorial, I will start and finish a logo while documenting the entire process. I encourage you to open up photoshop and follow every step, it will help you learn a lot more than just reading it.

I've used the technique I will be teaching to develop a lot of logos. Here are just a few:

1. Setting up your Document in Photoshop

Once you have photoshop open, go to File -> New. Then specify the name of the logo, and a width of 600 and a height of 500.
Then click "OK" (Refer to the screenshot below).

After you click "OK" Your setup should look like this:

(I'm on a 1600x1200 resolution.) For the menus on the left, I have the layers view, and the Characters in view.)

2. Experiment with Font Selections

As a starting point, I always experiment with a font that I think will work well with the logo. You have to develop an eye for what font will or will not work, with the specifics of the project in mind. Since for bluelaguna we're trying to focus on a serious yet gamer'ish feel, a serious font selection might be the best bet. Having yourself an arsenal of fonts is very important. I have several thousand myself.

Select the Text Tool on the left menu: (As shown on the image to the right)

Adjust the settings on the Text Properties at the top to match these settings:

In the character window to the right, set AV to -60 as shown below: (This simply shortens the space between each separate character, I like starting out with this setting, I don't know why :)

Type "BLUE LAGUNA" in the document space (First, be sure that the background is white, you can use the fill tool for this. And I've decided to go with all caps to start out with, since all caps is generally deemed more serious).

With the type tool selected, and layer 1 selected, select the font list menu (where it says Arial):

You can do this next section in either three ways.

- Hit the "Down" arrow to change the font view of "BLUE LAGUNA".

- Hit the Down Arrow of the Font List to see the list of available fonts with a tiny preview of the font.

- Download a font viewing program.

I personally just use the first method, although I sometimes use a font viewing program. Our goal here is to find fonts that might work with the logo.

Once you come across a font that looks like it could work, you should Duplicate the layer in the Layers Window to the right, and then hide the previous layer (The layer you right clicked and selected "Duplicate" from. This way, you've saved that font selection (the hidden layer), and you have a new layer to find more fonts from):

3. Good and Bad Font Selections

Since our goal with this particular logo is to be serious, we need serious looking fonts. It simply takes time to develop an eye for what is serious and what isn't.

Here are a few examples of bad font selections for this project:

The first logo (the top), has a very laid back, fun / unprofessional tone to it.

The second logo is simply "goofy" looking, and it's generally always bad to select a logo that has an inherent shadow.

The third logo is way too "ragged" with its frills all over the place, definitely a no go.

Calligraphy logos are generally outdated, especially ones with weird "drops" coming from them.

The last logo you can hardly even read. Remember, a logo should be easily readable.

Here are a few examples of good font selections for this project:

All of these logos with the exception of 4 and 6 are pretty much similar.

#1, 2, 3 & 5 are all very simplistic and serious in appearance.

Logo 4 still appears "serious" even though it is significantly different from the rest. I chose this just in case I want to experiment with piecing together fonts for the word "Blue" and "Laguna".

Logo 6 is a very bold / italicized logo that says nothing but serious.

4. Finalizing a Font Selection

Once you have some possible font selections, each in their own layer, you further analyze them and see which works. With logos that have more than one word, most of the time it is good to separate the appearance of the words from each other. Since this particular project has two words, "Blue" and "Laguna", we're going to want to separate them by possibly choosing two different fonts. You can also separate words from each other by keeping the same font, but changing the color. So I'm going to experiment with the 6 good font selections above.

This is what I've come up with:

Although I didn't use one of the 6 fonts I selected initially for the word "blue", I simply used an unboldened version of "LAGUNA", which keeps a consistent feel but also allows for separation of the two words.

5. Adding in a symbol

Sometimes logos work well with only the use of fonts, but most times adding in a relevant symbol of some sort will really make a logo stand out. When I say "symbol", I mean any part of the logo which isn't actual text. So let's start with the first font selection from above:

Now here is where having an eye for design and experience is a really big help. We need to begin contemplating ideas of what exactly we can add to this logo to make it awesome. So, the first thing I do is just sit there and stare at the font selection and think of what exactly the product/service/site is all about. Well, BlueLaguna.Net is about gaming, more specifically speaking, it's a site that offers RPG media (Role Playing Game) media. Therefore, we have two things to work with: RPG and Media. What exactly can we associate with both RPG and Media? Well, we don't necessarily have to convey both RPG and Media through the logo (if you try to get too complex, the logo will become cluttered). We can choose one or the other if we want. I think it'd be most logical to focus on the whole RPG aspect, as you can find media all over the place and it isn't an entirely unique concept.

So let's do some research on Role Playing Games. We need to figure out a symbol which can really represent RPG. The current BlueLaguna.Net features a 3d female, perhaps that has something to do with RPG? Well, let me do a search on images.google.com for "RPG". The results turn back a few different female characters, Hmm! The first few results, keeping in mind the 3d female character on the current header of bluelaguna.net, seem to suggest that depicting a female in the logo might be the best bet. It also seems that weaponry / mystical environments are associated with RPG as well.

Now that I know what I can associate with RPG, I can come up with some possible ideas for a symbol. I think maybe featuring a face of one of these RPG'ish females with maybe a hint of mysticism.

The Pen Tool is your Friend

The most important tool when it comes to logo design is the pen tool. If there is one tool to thoroughly understand, it should be the pen tool. The pen tool allows you to create any shape(s) you want, and maintain vector format (which is very important if you ever want to size your logo up n' down (for professional print or whatever.)
It's always good to draw your logo by hand without copying over a picture (vector tracing), but if you aren't very talented and don't have much experience, it might be your only option. So for the sake of making the biggest impact on this tutorial, I will teach you all an awesome technique for creating great looking symbols for you logos.

Finding a suitable picture

If you're going to trace, I always suggest using a site like istockphoto.com to find the image and pay for it. This way you won't be using copyrighted images to trace over. Or taking your own picture to trace over. Unfortunately though, istockphoto has nothing with RPG or "anime". So I just went on images.google.com and found a picture which I think is suitable, here it is:

When I came across this picture, I got the idea that I can vector trace over her face and hair to create what I want, and then integrate it along with the font selection in some unique way.

So once you've found the picture you want to trace (if not the same one), save it to your hard drive, open it up in photoshop, CTRL-A, CTRL-C to select it and copy it, and go back to your main logo document and CTRL-V.
Now you've imported this picture into your logo document. Once you've imported it, with her layer selected, you can cut off the bottom half of her body. (Select the first tool in the upper left corner of the tools menu, Rectangular Marquee Tool), select the bottom half of her body and hit the delete key. Your screen should look something like this by now (You can hide the text layers behind it).

Vector Tracing

Now select the magnifying glass in the tools menu and select around the girl, it will look like this zoomed up to about 400%:

Now select the pen tool in the tools menu:

Make sure that the foreground color (the black square at the bottom of the pic to the upper right ---^) is the same dark blue color of the text we specified.

In the layers window to the right, select the little round circular > icon on the upper right corner of the window, and click on "Create New Layer" in the window that comes up. Hit "OK" and then in the layers window, with the new layer selected, change the Opacity to 0%. We do this because once we start tracing over the image, we don't want the dark blue color hiding the picture of the girl below.

And with the pen tool selected, click a point somewhere on the outline of the hair (at the top), and then click to make another point somewhere on the hairline where the line will begin to form. You can hold down and "direction" the angle of the line to create a certain type of curve. It takes awhile to get the hang of, but it's very easy once you get the hang of it. After plotting points of an entire section of hair, yours should look similar to this: (Note: I've lightened the opacity of the girl to illustrate what your lines should look like so far)

It's not perfect, but for now it's a good start.

Now I'm simply going to continue creating more shapes, like the facial features. After 15-20 minutes or so of creating the different facial features and the face itself, here is what I have come up with:

As you can see, I specified a different color for the face (light blue). And by now I have around 15 different layers. There's a separate layer for the top portion of each eye, the bottom portion of each eye, the middle, and the small glare. There's also a layer for the face background, and the ear.

So let us continue and add some shading...

After about 20 more minutes of shading, this is what I've come up with:

There are a total of 3 different layers for the hair. It's somewhat of a tedious process to do hair shading simply because there's a lot of strands of hair! But you have to just condense them and get the general idea of the shading and it will work out well.

Then I did some light shading work on the face and the neck.

Now I consider the actual draft of the symbol complete. Let's make our initial text layer visible and see what we can do to integrate the symbol with the text.

First, you will want to select the very last to the very first vector layer that you created (you'll have a couple dozen or more), hold down the shift so you can select them all. Then in the layers window click the little circular round button and select "New Group From Layers". This will put all of the layers of the girl, into one easily manageable layer group. This way, you can move around the one group and it will keep all of their positions together so it won't break up her face.

Now this actually doesn't look too bad, in and of itself. But the proportion of the anime head is too big, in relation to BLUELAGUNA. So we will want to scale down the head. Let's try moving it over to the left, and adding the slogan + the ".net" text. This is what it looks like:

Now it looks pretty damn good eh? The only other thing I did, was with the pen tool, I added a white shape over the "B" in "BLUE" so that the face doesn't collide with the B.

Unfortunately I messed up and didn't design this over the dark blue'ish background that the bluelaguna.net has. So I'm going to change the colors of the logo to fit a background of an appropriate header for the site.

As you can see, simply changing colors around can really change the look and feel of a logo. I'd consider this logo a winner.

6. Conclusion

I can pretty much guarantee you that if you're a first time user of the pen tool or photoshop for that matter, it won't turn out so pretty like mine did. It takes some time and patience to really get the hang of it. It's all about getting a little creative and working at it for awhile.

explore graphics, paint egg, corel12 graphics, virtual egg painting, egg painting tutorial, corel simple graphics,how to creaet graphic image. Exploring simple graphics software techniques, text style tutorial

2011-07-08T01:24:00.000-07:00

Exploring Simple Graphics Software Techniques With Some Virtual Egg Painting

Start with simple shapes

With today's graphic software you can create a masterpiece in a minute. But many of us are so overwhelmed by all the fancy filters and exotic sounding tools that we never move beyond simple squares and circles or typing in words and adding drop shadows.Actually, there is a lot that you can do without really knowing what you are doing. Sound crazy? Then open up your favorite drawing and paint programs and let's paint some Easter eggs.This tutorial is non-software specific. Although I used CorelDRAW and Photo-Paint 7 to make these eggs, you can use Adobe Photoshop, or PaintShop Pro, or something else. You may have to work around some steps, but basically we're just exploring and experimenting and becoming more familiar with our graphics toolbox.

Draw an egg

First, we need an egg to paint. One way to do that is to draw an ellipse in a drawing (vector) program then make one end fatter and the other pointier.

I used the ellipse (or circle) tool to start.

Or, you could draw a shape on paper and scan it or find a piece of clip art of an egg and make it solid black. We want a plain, unadorned egg to start with.

After reshaping your ellipse into an egg (or scanning an egg, etc.) make it a solid color (black works fine) and save the image. If you don't want to make Easter eggs, draw a circle and make beach balls.

Basic technique in a vector drawing program such as CorelDRAW or Illustrator: Draw the ellipse, convert to curves, use the node editing tools to reshape the ellipse.

Next we move to our paint program where we'll create a mask or a stencil to paint. I'll show you how to paint your eggs (or your beach balls, or any other shape) without worrying about staying inside the lines.
A mask hides and conceals

If you've never used a mask in your paint program you may not understand how something "invisible" can be such a time saver and help make your work go more smoothly.

It may help to think of a mask as a stencil. You've probably used a stencil before. Shapes or words are cut in a piece of paper or plastic. Slap on some paint from a brush or a spray can. Remove the stencil and your picture or words are perfectly painted -- no unintentional crooked lines or bits of paint in places it doesn't belong. (OK, in reality it seldom works so well unless you are very, very careful.)

In your graphics program a mask works exactly the same. It covers parts you don't want to change and leaves holes where you do want to make changes (change colors, apply filters, etc.).

In the image here, you'll see the difference a mask can make. In the example on top painting across the egg puts a streak across the egg and background. In the example on the bottom, with the background masked (covered) the paint only sticks to the uncovered egg.

You'll need to look at the tools and menu choices in your own software, but chances are it has several different ways to create masks. You may see a collection of selection tools that look like a square, a circle, a paintbrush, a lasso, and a magic wand. These tools let you mark parts of your image (select them) but also act as a mask. Only the parts of the image selected with the mask tool can be changed.

Another option is to use another image as a mask. For example, you may use a black and white checkerboard image as a mask. Place it (using the appropriate options in your software) on top of another picture. The black squares of the checkerboard protect the underlying image. The white squares of the checkerboard are like the cut-outs on your stencil.

When you load an image to use as a mask you may not see the actual image on top of your existing graphic. A dotted marquee line may appear outlining the masked/unmasked portions. If you don't see the marquee, look for a menu option or command that makes the mask visible (you may even be able to select the color of your mask, depending on your software).

Mask your egg

Use the egg we drew in part 1 as a mask. One way is to open the file (open a copy of it and keep your original so you will always have a plain egg shape to work with) in your paint program and mask (cover up) all but the egg shape.

Basic Graphics Software Technique: Assuming a 2-color image (egg all black on a white background, or vice versa), use the magic wand selection tool to select the egg. A dotted line around just the shape of the egg creates a mask that covers up the background.

If your software allows you to load images as masks, create a new, plain white image that is the same size as your egg image. Load the egg image as a mask on top of your blank image. You'll probably only see a dotted line in the shape of your egg, or the masked (covered) portion may show up as red or some other color. If the wrong portion is masked, look for an option to reverse or invert the mask -- otherwise you may be painting the background and not the egg. You want your egg to show through.

Try out brushes and spray cans

Chances are that your paint program has a variety of tools with traditional names: charcoal, crayon, spray can, air brush. These are simply graphics pens or brushes that mimic the way their read counterparts work.

Now's your chance to bring out your own creative tendencies. Dump the paint can. It usually just fills a shape with a solid color. Instead, try one of the many variations of brushes in your graphics software. Pick a pretty color and draw a haphazard streak across your egg.

Remember, if you used a mask then you can swipe that brush across the image and paint will only show up on your egg, not the surrounding masked area. You don't have to fill in the whole egg. Let the patterns created by the brush create texture and interest. Use one color or two or three.

Don't worry about all the different settings for different brushes. The point right now is to simply get a swatch of color across your egg. Do several eggs at once.

The top egg, right, is done with one color, one brush. The middle egg uses two colors and two brushes. The bottom egg uses two colors and a splatter brush.

Paint with pictures

One of the cool tools in Corel Photo-Paint (and possibly other graphics software) is painting with image lists. Using a special brush, the program paints by layering on an ordered or random series of images. One of the advantages in our egg-painting is that it allows me to add more detail and more color to my eggs with just one or two mouse clicks.

You can also achieve the same effect by pasting different pictures onto your egg image. When masked, only the parts on the egg will show through.

The point in filling the egg with an image is not to have the picture of the rose or whatever on the egg. The pictures simply provide shapes and colors that give the egg pretty colors after we apply the filters in the next step.

The top egg, left, has portions of a leaf. The image on the middle egg is from photos of butterflies. The flowers on the bottom egg are actually on a picture of a postage stamp. While we could stop here and have some pretty eggs, let's go a bit further. In Part 4 we'll add some of those filters, the ones that turn perfectly pretty pictures into something totally unrecognizable. It'll be fun!

Apply filters

Your graphics software may come with dozens of different artistic effects and special filters. With so many choices it is easy to become overwhelmed. Yet, in most cases, a single effect can yield wildly different results.

I took the six plain painted eggs we've done so far (three painted with paint, three painted with photographs) and used a variety of settings in just one Photo-Paint filter. I chose the Paint Alchemy filters but you can pick anything -- embossing, swirling, blur, pointillism, whatever your software offers -- just pick one and try it out several different ways.

You may have tried out some of these special effects on photographs or clip art and been puzzled about why anyone would want to take a perfectly good image and distort it beyond recognition. Well here's one useful application of those funny filters.

Our blue, pink, and yellow painted eggs -- all with the same effect (Alchemy: Crowd in Photo-Paint) take on different looks because we started with slightly different painted patterns.

And look what happens to our leaf, butterfly, and flower stamp. Unrecognizable? Sure, but beautiful patterns and textures emerge. (Alchemy: Cottonball, Cubist, Diagonal Brick in Photo-Paint).

Put some curves on your eggs

Our six painted and filtered eggs look great but we can improve them just a little bit more. Your paint program probably has a variety of ways to give objects a rounded or 3D look.

For the three painted eggs I used The Boss filter (a special embossing filter in Photo-Paint) to round the edges.

For the picture painted eggs I applied lighting effects.

In both cases, the effects simulate light striking the egg. There's a lighter area and a darker, shaded area. It creates the illusion of roundness. Experiment with your eggs.

Want to see all the eggs (12 of them) and perhaps grab a few for your own Web page? Go ahead, they're free from me to you. The page also links to a few dozen other eggs. Some were created using techniques similar to those described in this feature.

create vector art, vector art tutorial, vector art bezier tool, vector art graphics, free vector art, vector art images tutorial, deviant art tutorial, draw line coreldraw, coreldraw drawings, skew in coreldraw

2011-07-08T00:58:00.000-07:00

Vector art in corel DrawX4

Using the Bézier tool in CorelDRAW® 12

In CorelDRAW 12, a Bézier line is a line made up of straight or curved segments, or both. The line segments are connected by nodes, which are depicted as square points. Each node has control points that allow the shape of the line to be modified.

Each node in a Bézier line is depicted by a square point.

The Bézier tool gives you incredible control, allowing you to draw a line one segment at a time and to manipulate the line using its nodes.

The Bézier tool is located in the Curve flyout

To draw a Bézier line, click to place its first node, and then do one of the following:

Click where you want to end a straight line segment.
Click where you want to end a curved line segment, and then drag to draw the curve itself. Hold Ctrl as you drag to constrain the curve to 15-degree angles, or hold Alt to move the node before you actually drop it.

Add as many line segments as you want, and then press the Spacebar (or click the Pick tool) to end the line. To create a closed shape instead, click the first node you placed.

When you draw a line by using the Bézier tool, the pointer changes when you point to the first node you placed, indicating that you can create a closed object.

The Bézier tool shares a property bar with the Shape tool. Using the Shape tool, you can edit your Bézier line by doing any of the following:

Add or delete nodes.
Join two nodes, or break the line apart.
Convert a curve to a line or a line to a curve.
Make a node cusped, smooth, or symmetrical.
Reverse curve direction.
Extend a curve to close it.
Extract a subpath.
Auto-close a curve.
Stretch, scale, rotate, or skew a node.
Align nodes.
Enable the Elastic mode.
Select all nodes.

The available tools on the Bézier/Shape property bar change, depending on the type of node you select.
The Bézier/Shape property bar also has a new feature that lets you reflect nodes. To create intricate symmetrical lines, draw a Bézier line, and flip a duplicate of it. By selecting nodes from both lines, you can then use the Reflect nodes horizontally button or Reflect nodes vertically button on the property bar to mirror changes across their left and right side, or top and bottom.

You can create symmetrical Bézier lines by reflecting nodes.
Many handy Bézier tool features are also available by using the Shape tool and right-clicking a node in a Bézier line.

Finally, to customize the Bézier tool's settings, double-click the Bézier tool in the toolbox. The Freehand/Bezier tool page of the Options dialog box appears, allowing you to specify your own settings for the Bézier tool.

corel drawings, vector program, clip art coreldraw, Transparency Tool, create clip art image, design clipart, artistick effect, draw coconut tree, natura scene drawing tutorial

2011-07-08T00:39:00.000-07:00

Artistic Effects : Sunset

Concept: The lesson is designed using CorelDRAW, the world fame vector program used by artists, illustrators and designers. CorelDRAW is a very user friendly software and you can learn fast for the basic level. Try to explore more commands using these lessons as guideline. CorelDRAW has best of the drawing and editing facilities with the astonishing range of effects. Please try to go further than these tips and tricks by drawing your own shapes and applying effects with different options.

1. Open Corel DRAW.

2. Draw the rectangle with Rectangle Tool to create the cloud effect. Remove outline.

3. Select Interactive Fill Tool. Drag from Top to Bottom.

4. Fill Black, Red And Yellow color from top to bottom and adjust the proportion properly.

5. Select the rectangle. Drag it down with Top Center point to get the mirror image of the original. Without leaving left button, click right mouse button to get the copy of the mirror image which will be used as a lake.

6. Draw mountains with Bazier Tool and fill it with black color.

7. Follow the step 5 to get the mirror image of the mountains

8. Send the mountains behind the lake.

9. Select lake. Select Interactive Transparency Tool. Drag over the lake. You will get the reflection of the mountains.

10. You will get the reflection of the mountains.

11. Draw Land with Bazier Tool

12. Draw Coconut tree with Bazier Tool.

13. Group the branches and copy them to create two more trees.

14. The output will look like this.

15. Draw the Boat with Bazier tool and group it. Make the reflection of it using previous mountain steps and send the reflection behind the Lake.

16. The output will look like this.

17. Create Circle with Ellipse Tool fill it with Interactive fill tool using Radial Fountain Fill. This will make Sun. Use the combination of red and yellow color.

18. Send the Sun behind mountains.

19. Duplicate and get the copy of sun. Stretch it horizontally and make it thin vertically.

20. Keep on duplicating and place it one below other.

21. Make the size of the copy small as you go downwards.

22. This will create the reflection of the Sun in the lake.

how to create water color image in photos, water color create in photoshop, step by step water color image photoshop, watercolor tutorial, tutorial for watercolor

2011-07-02T01:32:00.000-07:00

Watercolor

1. Open a picture inside Adobe Photoshop.

2. Press Ctrl+J to duplicate the layer and then change the blending mode to Multiply.

3. Go to Filter> Stylize> Find Edges and you should start seeing the watercolor Photoshop effect.

4. Now go to Filter> Noise> Median and play around with the settings to get the effect you like.

5. Here's the final result from this Watercolor Photoshop effect.

how to creat smoke image in photoshop, Creating Smoke-like Effects

2011-06-29T11:16:00.000-07:00

Creating Smoke-like Effects

In this tutorial, we are going to take a look at how to create subtle smoke-like effect. Whether you want to add steam, mist or vapor to your photos, you'll definitely be putting this tutorial to good use from now on! Try it, the possibilities are endless!

Step 1

Open an image and create a new layer of it (Smoke Layer).

Step 2
Select the Polygonal Lasso Tool (L) and create an abstract shape that looks similar to the example shown below. Fill it with white (or any colors you wish your smoke to be).

Step 3
Now, to create the wavy smoke effect, go to Filter > Distort > Wave and set values as shown below:

Step 4
After you have used the Wave filter, you can go to Edit > Fade > Wave and set the opacity to 50% when the dialog box pops up.

Step 5
Repeat this distort and fade method for a few times to achieve the best results.

Step 6
Next, use the Smudge Tool (R) to reshape the smoke so that it looks more diffused and as if it is billowing out from the coffee beans (as shown below).

Step 7
Duplicate the Smoke Copy layer. Ctrl+Click on the layer to select it and go to Select > Modify > Contract: 7 pixels.

Step 8
Invert the selection (Ctrl+Shift+I) and press delete. It should have created a softer smoke effect now as compared to the other layer.

Step 9
Adjust the opacity of Smoke Layer to 70% and Smoke Copy Layer to 50% before merging them. This will help soften the shape further.

Step 10
Duplicate the layer again and resize it. Ctrl+T to transform and click on the Warp tool to reshape the smoke.

Step 11
Next, go to Filter > Blur > Gaussian Blur, set radius : 3 pixels.

Set the layer opacity to 80%.

Step 12
To add more smoke on the beans, create a new blank layer and draw a shape around it using the Lasso Tool (L).

Go to Select > Feather > 15 pixels.

Step 13
Fill it in white and use the Eraser Tool (E) to reshape the smoke

Set the Smoke Copy Layer opacity to 80% and flatten the layers together.

This is the final image. Have fun trying it over a cup of steaming hot coffee!

Before & After

how to creat animal head with humanbody. Splicing and Composing Photo Elements to Create Artwork

2011-06-29T10:43:00.000-07:00

Splicing and Composing Photo Elements to Create Artwork

Use simple Photoshop tools and a combination of images to create vivid photoreal images. This style of image is very effective within the advertising and branding designs. This tutorial will show you how to compose an image using human and animal photographs.

1. Once you have your chosen image in black and white on a plain white background, apply a levels adjustment layer and use the sliders to create to darken the model, once you are satisfied with the colour merge the layers into a single layer by selecting layers > merge layers. Repeat this step for your wildlife image.

2. Drag your wildlife image onto the same document as your original model image. Add a new layer and paint out the human head, then overlap the animal head layer and change the opacity to 50% so you can see the human body underneath. Use the free transform tool by selecting edit > free transform this will allow you to alter the scale and rotate the animal head to fit with the body. Now apply a layer mask and use the brush tool to make the transition between the head and body smooth.

3. Select the body layer and use the rectangular marquee tool to isolate the neck area. Then select filter > liquify, check the "activate show backdrop" and set the opacity to 50%. Now using the apply forward warp tool with a big brush size, pull the neck area to fit around the animal head.

4. Now you have done the main bulk of the image it is time to add the little details. Here I have added a butterfly that has been altered to match the same colour and contrast as in step one. Drag your new image onto your original one and use the free transform tool to make the new image proportional to your original one.

5. The final step is to create a good composition and add any last effects or features. You can use a series of pictures and text to add to the image. I have used this awesome brush set urban scrawl (which can be downloaded for free at http://invisiblesnow.deviantart.com/art/Urban-Scrawl-2-83053171) to create a background city scene, I added the brushes on individual layers and resized them to give the right depth of field. I also added the photocopy filter at a very low opacity to the model to make it fit better with the illustrative background.

how to creat painting in photoshop, Human creative painting, how to create desing pictures

2011-06-29T10:29:00.000-07:00

Human creative painting

today in our tutorial will be practicing some painting. And in general - the idea can be realized in very small period of time. So I'll doing a head of some human, but it isn't really a human, you'll see.

So let's get started with this one.

I'll fill my background with this orange color and create a new layer after that. I'm going to fill my layer with Cyan to transparency gradient.

And here is the result of all this.

Now I will change layer mode for my gradient layer; from normal to linear light.

I've also overlaid my whole picture with black to transparency gradient with opacity set to ~ 40%.
So now I'm going to grad a smudge tool.

And do what the smudge tool magically des. You just smudge the pixels.

It really reminds me of a hair of some kind Well, if that hair let's paint a face. Create a new layer, grab a round basic brush and begin painting g the pars of the face.

Now I'm beginning to render the ear of the character. This is maybe not a good choice, because all the elements must be rendered at a time, but anyway.

how to change treel with human body in photoshop. Photo Montaging - Blending a Human Head to a Tree

2011-06-29T07:19:00.000-07:00

Photo Montaging - Blending a Human Head to a Tree

This tutorial shows how to montage human heads to a tree and to add in a dramatized effect. In a nutshell, it is done by applying various blend modes on the relevant layers, and simulating the tree texture using a simple combo of filters such as bas relief and zoom blur to achieve that extrusion effect.

Open the images and drag them into the same working platform (tree layer).

Click on the Pen Tool and start drawing paths around the head. CTRL+Click on the path drawn and click on the Masking Icon. Apply its Layer Mask when you are done.

Note: To avoid losing the path drawn, always click on the new path icon and rename it accordingly i.e. 'head front' and head side'.

As for the tree, I've decided to use Channel Masking. Duplicate Blue Channel, and adjust the level. Fill areas inside the tree with black, and brush the background (or unwanted areas) with white.

Invert (Ctrl+I) 'blue channel copy'. With the tree layer selected, CTRL+Click on its thumbnail and click the masking icon. I've further brush the leaves away on the left because thats where I'm planning to place one of my heads.

We shall refer the layers as 'head front', 'head side', and 'tree' from now on. Disable 'head side' for now, as we will be working with 'head front'. Duplicate 'head front' layer and hide the original 'head front'. Blur the edges around the head using Zoom Blur Filter.

Now, set 'head front copy' blend mode as 'Hard Light'. I've masked the head further to remove the ears but the head's lighting and saturation is still a little exaggerated as compared to the tree. This is what you can do:

1.Add in Hue/Saturation adjustment layer and desaturate the color.
2.Next, add in Selective Color, select white and add an amount of black to reduce the highlight. Select selective color's layer mask, and use a black brush to brush its teeth so that the teeth area remains unaffected.
3.Hold Alt and click the line between 'head front copy' and the adjustment layers to create a Clipping Mask. This way, changes to the adjustment layers will only affect 'head front copy'.

The head seems to have sunk into the tree and start to lose its details. Reveal 'head front' (below 'head front copy') and set opacity to 50%. Mask some of the unwanted edges away with a soft brush. I’ve created a new empty layer and drew a Gradient in it (tree lighting layer). Change the blend mode to Softlight and set opacity to 50%. Clip it with 'tree' layer. That way the tree’s lighting would be more balanced, matching the face.

Next, let details of the tree to creep in to the face and add in the necessary effects. For this, I've duplicated the 'tree' layer as 'texture1', and applied a Zoom Blur (of 55px) with the head as the center point of the blur filter. Then, apply Sketch > Bas & Relief Filter (Details:15 ; Smooth:2 ; Light:right).

Note: The Zoom Blur filter is used to create a stretch effect and the Bas Relief filter to enhance the texture.

Make sure the palette is set at default black and white (press D) when applying Bas & Relief filter.

When it's done, access Filter > Liquify window on 'texture1' and roughly bloat the area where the face would appear. Select Warp tool and squeeze the sides where bloating is done. This is to compress the edges of the face area with texture so it creates more depth. You might need to undo/re-do this step to grasp the head's location correctly.

Change the blend mode to soft light and start masking, revealing 'texture 1' at only around the head area (area in purple) and not the face area.

I've also duplicated 'texture1' but only brush to further reveal a few strands of roots/veins-like texture.

Now that we are done with the 1st head, lets move on...

Hide the other layers accept for 'tree' and 'head side'. Resize 'head side' to an appropriate size and place it at the side of the tree. Apply Zoom Blur at where you wish to blend (in this case, the back of the head), similar to how we did for ‘head front’.

Select 'tree' layer and make a selection around 'head side'. Duplicate the selection 2 times.

Take one of the duplicated layer and apply a Spin Blur filter. Duplicate that spun layer. Transform the two spun objects and place it accordingly to create that curve on the forehead and neck.

Combine the 2 spin-blurred layers as 'curve'. At this point you might want to mask away unwanted areas that are deemed excessive.

Duplicate 'curve' layer as 'curve texture' and apply Bas Relief (Details:15 ; Smooth:2 ; Light:right). Set soft light blend mode.

Take the 2nd duplicated layer of the tree and rename it as 'skin'. Liquify it so that it follows the shape of the stretch.

Again, mask away unwanted areas and duplicate 'skin' as 'skin texture' when done. Bring the 2 layers forward (Ctrl+Shift+]) and set 'skin' blend mode as Lighten. As for 'skin texture', apply bas relief to it and set softlight blend mode.

Reveal all the layers and you should get something like this. Merge the layers as one.

You can further tweak your image for maximum effect. I've altered the color, saturation, and liquified the neck area to emphasize the stretchy feel.

We are right about done for now but you might want to tweak the sharpness of each object to match one another. We can either use unsharp mask filter, high-pass sharpening, or the sharpen tool.

Lastly, I've dragged the tree into a new background, added simple fiery effects and smoke to create my final output. Here it is, and good luck everyone!

how to create text in photoshop. Liquid Text Photoshop Tutorial

2011-06-29T01:52:00.000-07:00

Liquid Text Photoshop Tutorial

In this Photoshop tutorial I am going to teach you how to create liquid text. Liquid text created in Photoshop looks super cool and it is surprisingly easy to do. So why don’t we get started?

First of all we need to find an image that we are going to put our liquid text on. You want something with some pattern on it so that the liquid that you create can distort it. I used the wood grain image below (click for a much bigger version).

Once you have your background image loaded up switch over to your channels palette and create a new channel. In this newly created channel you need to create your text. I used a font called Tree Frog, try and find something that is kind of liquidy looking. In this channel I also added a few water droplets to spice things up a bit. This is what my finished channel looks like.

Now we need to create the displacement map that we are going to use when we run the glass filter in a few steps. Duplicated the channel that you created in the last step. Once you have the channel duplicated we need to blur it a bit. Go to Filters/Blur/Gaussian Blur, I used a value of 7 for the blur. The resulting channel should look like this.

The glass filter, which we are about to use, requires a separate image to be used we need to duplicate this channel and save it as a standalone image. To do this click the little arrow on top of the channels window and from the menu that drops down choose “Duplicate Channel”. After you click duplicate channel another window will popup. From this window that pops up from the drop down menu choose new and press ok. The image you created in the channel will now popup in it’s own window. Save the image that pops up as a PSD file, it doesn’t matter where but remember what you called it so that you can find it later. I named mine displacementmap.psd.

Switch back to the original image. Go back to your layers palette and duplicate your background image. In your layers palette you should now have a layer called background and one called background copy. Now lets break out the glass filter. The glass filter can be found by going to Filter/Distort/Glass. When you choose glass a new screen will popup, on this screen you need to load your displacementmap.psd as the texture. Press the little arrow next to the drop down menu and choose load and browse to wherever it was that you saved your image in the previous step. Fiddle with the Distortion and smoothness levels to taste. I used a Distortion level of 10 and a Smoothness level of 4, keep scaling at 100%. Your image should now look like this (click for bigger). Rename this layer, which is currently called “background copy” to “Glassy”.

Now we need the original, unblurred copy of our text in the layers palette. To do this go back to your channels palette and ctrl-click the unblurred image which has your text and water drops on it to choose its selection. Go back to your layers palette, create a new layer between the background layer and the Glassy layer, and with the selection still active fill the selection with black. Your layers palette should now look like the image below

We need to join the text layer with the glass layer. To do this right click the Glassy layer and choose “Create Clipping Mask”. Your layers palette should now look like this.

Now lets have some fun and really make this pop. We are going to be doing a few different layer styles. Select the layer that has your text on it (the middle layer) and open up your layer styles window, lets start with bevel and emboss (Layer/Layer Style/Bevel and Emboss).
For bevel and emboss I used the following settings:

Now lets add a drop shadow. I used the following settings, for color, click around your background image until you find a color that you like.

Next, lets add a bit of an outer glow to really make things stand out. Once again, here are the settings that I used.

And finally lets add a bit of an inner glow.

With all of the above layer styles feel free to experiment and try different things, there is no set way to do this, just play with the settings until you achieve a look that you like.

Here is the final result. Make sure you click the image on the right to see the full size version. Pretty nice huh?

tutorial face changing,face painting supplies, face it tutorial, morph images, change young face, face mixing, mix faces, mixing photo face, create wrinkles, make old photo, tutorial face change, morphing tutorial, young face tutorial

2011-06-27T02:12:00.000-07:00

Face Morph: Changing a young man to an old one

Start by opening a image of a young man.

Also insert an image of an old man from which we can copy the wrinkles.

Create a rectangular selection using rectangular marquee tool. Press delete to remove one half of the image. Scale rotate and place so that it becomes similar to the young man's face.

Click add vector mask from the layer palette.

Select brush tool. Start painting using black color and mask out the face area except wrinkles.

Change the layer mode to hard light.

Press Ctrl+U to open hue/saturation window. Apply settings as shown.

Create the selection of the hair coming on the forehead using lasso tool.
Press Ctrl+Alt+D to feather the selection.

Press Ctrl+Alt+D to feather the selection.

Press Ctrl+J to duplicate the selection in a new layer. Press Ctrl+M to open curves window. Stretch the band as shown.

Remove the skin that becomes whiter using eraser tool with a small brush settings.

Repeat the above mentioned step for the other side of the face.

scanners, check scanner photoshop, best scanner tutorial, best scanner, online scan tutorial, adjust the midpoint scanner, saturation, saturate photo, correct scan, scanner correction, deficiencies correct, scan image tutorial

2011-06-27T00:06:00.000-07:00

Correcting for Scanner Imperfections

A scanner is basically a color copy machine hooked up to your computer. It bounces light off of a photo and receptors read the color information returned to the scanner. Most photos are covered with a reflective coating, which makes the photo look better to our eyes. The same coating that makes a photograph look better to you and me, makes the photograph harder to see for a scanner. The reflective coating bounces some light back to the scanner before the light hits any color information in the photo. What you end up with is a washed out image with a "film" over it.

Most every time you scan an image in, itll need color correction. Color photographs will always need color correction. PhotoShop does a good job of correcting for scanner deficiencies, and often it can do the whole job in just one step!

When you correct for scanning deficiencies, mostly youll adjust the PhotoShops Levels, which refer to color levels. Color Levels range from 100% white, to 100% black. Usually when there are scanning problems, there is too much white, but sometimes there are other problems caused by the scanner itself.

Letting PhotoShop Automatically Correct Images for You

This next web design course tool is going to blow you away.

1. Open boat.psd

2. Use the crop tool to straighten the scan

3. Click IMAGE-> LEVELS

The histogram represents color levels with black on the left and white on the right. See how much white there is? Images usually look better when the color levels are more balanced. Were going to let PhotoShop try to fix the image for us.

4. Click Auto

5. Try IMAGE-> LEVELS-> AUTO with temple.tif

Fine Tuning an Automatic Level

Sometimes when you use the "auto" button in the level window, the image will come out a little too dark or light. You can manually adjust the midpoint, the place where colors become more dark than light.

A midpoint value of 1.00 is perfect center. 1.10 will make the image a little lighter, 0.9 will make the image a little darker.

To adjust the midpoint:

1. Click IMAGE-> LEVELS-> AUTO
2. Change the setting in the top middle box in the Levels window

Use small adjustments!

Adjusting the Levels Yourself

Sometimes you will get better results futzing with the levels yourself. "Futz" is a PhotoShop technical term.

Usually you wont be able to tell if automatic or manual results will provide better results. Youll probably have to try them both.

To manually adjust the levels, move the histogram triangles. You usually want to adjust the triangles so they line up with the bulk of the histogram. Dont adjust the middle triangle. Instead, use the input levels box like we did before.

Hiding Flashing Selection Lines

When you make a selection you get flashing lines that tell you where the selection is. Problem is, sometimes those selection lines get in the way. You can hide them by clicking:

VIEW-> HIDE EDGES or CTRL/CMD + H

**BE VERY SUPER-CAREFUL WHEN YOU HIDE EDGES. YOU MIGHT FORGET THAT THE SELECTION IS STILL THERE!

Color Corrections

Images of all types would look better if this was a little bit darker, that was a little bit lighter, and this was a little more blue. PhotoShop excels in changing color values to give you better-looking images. Remember that any of these tools can be applied to an entire image, or to a selection.

Most of the Color Correction tools are found under:

IMAGE-> ADJUST

Brightness and Contrast

Brightness is the amount of white found in an image. If you crank up the brightness, an image will become whiter. Sometimes dark hidden areas will reveal surprising detail!

Contrast is the difference between light and dark in the image. If you turn up the contrast light colors get lighter and dark colors get darker.

Using brightness and contrast, you can remove shadows or shiny forehead reflections. You can lighten teeth and balance images.

To use Brightness/Contrast:

IMAGE-> ADJUST-> BRIGHTNESS/CONTRAST

Try to make the dark part of the green boat tarp lighter.

Saturation

"Tone" means color, "saturation" means how much of that color.

Adjusting saturation will allow you to make changes that on the surface appear imperceptible, but that will really make a difference in your images psychological impact on your observer. When part of an image is slightly more saturated, it appears more full of life. You can saturate people or products to make them slightly stand out against their backgrounds. You can saturate eyes to give someone that special sparkle. Saturating can turn dull colors bright and vibrant.

The key to using saturation is "go easy". Dont over do it. A little goes a long way. Whatever other clich will make you treat the saturation tool with care.

To change saturation levels:

IMAGE-> ADJUST-> HUE/SATURATION

photoshop color tutorial,colour range, how to photoshop, photoshop how to color change, photoshop how to use color, use photoshop, photography tutorial, image at website, image tutorial, color tutorial, hue tutorial, saturation tutorial, photoshop color image,flowers color change

2011-06-26T23:29:00.000-07:00

Introduction:

This tutorial is to help you learn how to change the color of many flowers all at one time. This technique could also be used for many other things. Ok, once you have your photo open in photoshop:

1. Go to the Select Menu and choose Color Range, (Select>Color Range).

2. Click on the Add to Sample Eyedropper.

3. (With the Add to Sample Eyedropper) click on one of the yellow flowers. Make sure you click on all the different shades of yellow on the flower.

4. In the preview box, when it looks like you have all the yellow flowers selected press OK.

5. (With the flowers selected) Adjust the Hue/Saturation. (Image>Adjustments>Hue/Saturation).

6. For this photo I chose to change the color to red by adjusting to Hue to about -45.

photoshop change background,photoshop change a background image, change background image, background changing, background change tutorial, editing background image, background color, how to change

2011-06-26T11:01:00.000-07:00

In this tutorial, you are going to learn how to change a background image.

In this tutorial, you are going to learn the methods to change the background of an image. If you want to try this then this tutorial will definitely help you with some simple steps. So follow these given steps below.

Let's start

Open an image: First you have to open an image in which you want to change the background image. I have selected an image of two person standing in a garden.

Selecting: Make selection by polygonal lasso tool (L key) of the image which you want to add.

Inverse: After selection, go to select menu and click on inverse and press DEL key to remove unselected part of image as you have to add another background image.

Open another image: Now open another image to add as background image. Here, I have taken an office image.

Select Background: Again make selection of the image and go to select menu, click on inverse to select background as I have selected here.

Copy another image: Copy the image you want to make as background. Select all and (CTR + A) and copy (CTR + C)

Add Background image: Now, go to edit menu and click on paste and your file will spread into the selected portion..

Your final image will be this.

Look here

hair color in Photoshop, hair coloring, hair coloring tutorial, change hair color in Photoshop, different hair colors, hair brighter, changing hair color, changing colorful hair color, hair colorized, hair painting, hair color, changing different hair color, changing hair color, editing hair color

2011-06-25T05:44:00.000-07:00

Learn Photoshop with Photo Editing Tutorials at Photoshop

In this Photoshop tutorial, we're going to look at how simple and easy it is to change hair color in Photoshop by tinting and colorizing someone's hair in a photo. The technique we'll be learning here gives us complete control over what we're doing, with several different ways of fine-tuning the results, plus we can also go back any time we want and change the hair color without having to redo all the work! You can use this technique on photos of other people (friends, family, clients), or you can even use it on a photo of yourself to see how different hair colors would look on you!
Here's the image I'll be using for this Photoshop tutorial:

The original image.

We're going to be giving her hair a brighter, slightly more reddish color to it in this tutorial, but you have complete control over the color you use with your image, as well as the intensity of the color. Here's how she'll look when we're done:

At the end of the tutorial, we'll see how easy it is to go back and change the color to something completely different. Let's get started!

Step 1: Add A "Hue/Saturation" Adjustment Layer

With our image open in Photoshop, click on the New Adjustment Layer icon at the bottom of the Layers palette (the circle split diagonally between black and white):

Click on the "New Adjustment Layer" icon.

Then select Hue/Saturation from the list of adjustment layers that appears:

Select a "Hue/Saturation" adjustment layer.

Step 2: Select The "Colorize" Option

When the Hue/Saturation dialog box opens, select the Colorize option in the bottom right corner by clicking inside its checkbox:

Select the "Colorize" option.

As soon as you select the Colorize option, you'll see your entire image become colorized with a shade of red.

Step 3: Select A New Color For The Hair

Drag the Hue slider left or right to select the color you want to use for the person's hair. For the moment, you'll be colorizing the entire image, but we'll fix that in the next couple of steps. Just ignore the rest of the image for now and focus only on the hair. Once you've found a color you like, adjust the intensity of the color by dragging the Saturation slider left or right. Dragging it to the right gives you a more saturated color, while dragging it to the left reduces the saturation.

Don't worry about getting the color and saturation perfect because you can always go back and change it quite easily later. I'm going to set my Hue amount to about 9 and increase the Saturation to around 45 for now:

Use the Hue slider to select a new color for the hair and adjust the intensity of the color with the Saturation slider.

Click OK when you're done to exit out of the dialog box. The woman's hair now appears colorized in red, but so is the rest of her:

The entire image is now colorized in red.

Step 4: Fill The Hue/Saturation Layer's Mask With Black

One of the great things about adjustment layers in Photoshop is that each one automatically comes with its own layer mask, and we're going to use it to fix the problem we currently have with our entire image being colorized when all we really want is for the hair to be colorized.

To start with, let's completely hide the effects of the Hue/Saturation adjustment layer by filling its layer mask with black. Since black is our current Background color and the layer mask is already selected (Photoshop automatically selected the layer mask for us when we added the adjustment layer and set our Foreground and Background colors to white and black, respectively), all we need to do is use the keyboard shortcut Ctrl+Backspace (Win) / Command+Delete (Mac) to fill the layer mask with black.

As soon as we do, the colorizing effect disappears from our image and if we look in the Layers palette, we can see that the adjustment layer's thumbnail, which gives us a preview of what the layer mask looks like, is now filled with black:

The Layers palette showing the layer mask thumbnail for the Hue/Saturation adjustment layer now filled with black.

Step 5: Select The Brush Tool

To bring back the colorizing effect and have it applied only to the hair, all we need to do is paint with white on our layer mask over the hair. Anywhere we paint with white on the layer mask will reveal the effects of the Hue/Saturation adjustment layer, and anywhere we leave black will keep the effects hidden. First, we need the Brush Tool, so either select it from the Tools palette or press the letter B on your keyboard to select it with the shortcut:

Select Photoshop's Brush Tool.

We need to paint with white on the layer mask to reveal the colorizing effect on the hair, and Photoshop has already set our Foreground color to white for us, as we can see in the Foreground and Background color swatches near the bottom of the Tools palette (the swatch on the left is the Foreground color and the swatch on the right is the Background color):

Photoshop's Tools palette showing white as our Foreground color and black as our Background color.

We also already have our layer mask selected, and we can tell that because the layer mask thumbnail in the Layers palette has a white highlight border around it, as shown in the image for Step 4 above, which tells us that the mask is selected.

Step 6: Paint With White Over The Hair

With our Brush Tool selected, the layer mask for the Hue/Saturation adjustment layer selected, and white as our Foreground color, all we need to do now is paint over the hair. To quickly change your brush size as you paint, use the left and right bracket keys on your keyboard. The left bracket key makes the brush smaller and the right one makes it larger. You'll want to use a soft-edged brush, so hold down your Shift key and press the left bracket key a few times to soften its edges (holding Shift and pressing the right bracket key a few times makes the brush edges harder). Then simply paint over the hair to bring back the colorizing effect:

Paint with white over the hair to reveal the colorizing effect from the Hue/Saturation adjustment layer.

For trickier areas where there's only loose strands of hair, go up to the Options Bar at the top of the screen and lower the Opacity of the brush down to about 25% or so:

Lowering the opacity of the brush in the Options Bar.

Then lower the size of your brush so it's no bigger than the area you're colorizing and paint over it a couple of times. This way, the color won't be so intense in those areas. You may find it helps to zoom in on those areas as well, and the easiest way to do that is to hold down the Ctrl (Win) / Command (Mac) key and the Spacebar and drag a selection around the area. Photoshop will then zoom into the area you selected:

Zoom into the areas of loose strands if needed and paint over them a couple of times with a lower opacity brush.

Press Ctrl+Alt+0 (Win) / Command+Option+0 (Mac) when you're done to zoom back out to 100%.

If you make a mistake as you're painting and accidentally paint over an area you didn't mean to (happens all the time), simply press X to swap your Foreground and Background colors, making black your Foreground color, and paint over the mistake to undo it. Then press X again to set your Foreground color back to white and continue painting until you have all the hair colorized:

The woman's hair is now colorized while the rest of the image is not.

Step 7: Change The Blend Mode To Either "Color" Or "Soft Light"

Free Photoshop tutorials and Adobe Photoshop tutorials on digital photo editing and photo editing.

The hard part is done! We've colorized the hair while leaving the rest of the image untouched thanks to the layer mask that came with the Hue/Saturation adjustment layer. Now we can fine-tune the effect, and the first way to do that is by changing the blend mode of the adjustment layer. By default, the blend mode is set to "Normal", and it works fairly well, but let's change it to something better. Go up to the blend mode options in the top left corner of the Layers palette, click on the down-pointing arrow to the right of the word "Normal", and select either Color or Soft Light from the list:

Change the blend mode of the adjustment layer to either "Color" or "Soft Light".

The "Color" blend mode gives us even more of a colorizing effect, since it changes only the color of an image (when we had the blend mode set to "Normal", it was affecting not only the color but also the lightness values of the hair). Here's my image with the blend mode of the adjustment layer set to "Color":

The image with the blend mode of the adjustment layer set to "Color". Only the color of the hair is being affected. The lightness values in the hair are not being affected).

The "Soft Light" blend mode gives us a more dramatic colorizing effect because it not only changes the color of the hair but also boosts the contrast, which I think works even better than the "Color" blend mode in this case. Here's my image with the blend mode set to "Soft Light":

The image with the blend mode of the adjustment layer set to "Soft Light", giving us a more dramatic effect.

Choose the blend mode that works best with your image.

Step 8: Lower The Opacity Of The Adjustment Layer If Needed

Looking for free Photoshop tutorials and Adobe Photoshop tutorials on digital photo editing and photo editing? Check out all of the free Photoshop tutorials we have available. More free Adobe Photoshop tutorials on digital photo editing and photo editing are being added all the time.

Another way to fine-tune the colorizing effect is by lowering the opacity of the adjustment layer. If you find the color is too intense, simply go up to the Opacity option in the top right corner of the Layers palette (across from the blend mode option) and lower it until you're happy with the results. Here, I've lowered the opacity of the adjustment layer to 50%:

Lower the opacity of the adjustment layer for a more subtle colorizing effect.

This gives me a more subtle colorizing effect:

The image after lowering the opacity of the adjustment layer.

Step 9: Edit The Hue/Saturation Settings To Change The Hair Color As Needed

Free Photoshop tutorials on photo editing and digital photo editing.

At this point we're done, but if you need to go back and change the hair color to something different, simply double-click on the Hue/Saturation adjustment layer's thumbnail in the Layers palette (the thumbnail on the left, not the layer mask thumbnail on the right):

Double-click on the adjustment layer's thumbnail to edit the Hue/Saturation settings and change the hair color.

This brings the Hue/Saturation dialog box back up and we can change the hair color simply by dragging the Hue slider to something different. We can also re-adjust the saturation of the color with the Saturation color. Since this is an adjustment layer, we're free to make as many changes as we want without worrying about damaging our image. Just for fun, I'll set my Hue slider to 304 to give her hair more of a pink/purple look:

Adjust the Hue slider to change the hair color again.

I'm also going to set the blend mode of the adjustment layer back to "Color" and increase the opacity to around 75%:

Setting the blend mode back to Color and raising the opacity to 75%.

And here's my new result:

The image afterChanging the hair color and saturation, blend mode and opacity value.

And there we have it! That's how easy it is to change someone's hair color in Photoshop!

hair removing, background eraser, techniques hair removing, hair remove in photoshop, photoshop hair remove, remove background, photoshop remove background, loose hair remove photoshop, womens hair remone, mens haire remove, nair hair removel, hair removing tutorial,how to remove background from hair in photoshop .Removing the Background

2011-06-24T01:55:00.000-07:00

Remove the Background

The qualities of this image are such that no single technique is going to be very effective. The background is so close in color to parts of the girl's blouse that it makes the background eraser difficult to work with. The bottom half of the image is simple enough that the pen tool would be ideal, but the girl's hair presents some problems. I decided to use a combination of techniques; first, expanding on the channels trick used in the fireworks example and using levels to refine the mask, and then using the pen tool to isolate the girl's arms and sleeves to further refine the mask for the lower portion of the image. The entire process took approximately twenty minutes.

I started out by drawing a loose selection around the girl's hair with the freehand lasso tool.

Next I looked at the individual color channels to find the one that had the most contrast. You can see from the thumbnails to the right that the red channel clearly has the most contrast. So initially we'll use a duplicate of the red channel to create our alpha channel mask.
In the channels palette, drag the red channel to the new channel button to create a duplicate.

A duplicate channel is created and named Alpha 1. This is what we'll be working with as a selection mask.

The loose selection we made with the lasso tool should still be active and we want to be working only in the Alpha 1 channel.

Go to Image > Adjust > Levels to bring up the levels adjustment dialog. Drag the left and right sliders under the histogram toward the center...

...just enough that you increase the contrast as much as possible without loosing the fine wisps of hair. When you start to loose the strands of hair, you'll need to back off some and stop there.

Next you can make another selection and adjust the levels again to increase the contrast even more. You can select different areas and repeat this as needed to make the best possible selection.

Once you've gone as far as you think you can with the levels adjustments, use the paintbrush to fill in the rest of the face and hair with white. Take care not to go to far out to the edge and paint away the fine strands of hair. I got a little too close here on the left side of the girl's head.

Once the face is filled in, we can switch to a larger brush and fill in the lower part of the girls dress and arms.

see how the mask was completed for the bottom portion of the image.

After the rough outline is drawn, the curves are refined with the convert anchor point tool.

The path is then converted to a selection using the same method that was used in the butterfly example.

The the selection is filled with white. (Edit > Fill)

Now we'll need to do another levels adjustment to shift the remaining dark gray areas to 100% black. But we don't want to effect the hair area because it has shades of gray we need to keep. So, first we'll lasso a loose selection around the hair, then invert the selection.

With the inverted selection, we can go to Image > Adjust > Levels and move the left slider in until the surrounding dark gray becomes completely black. We now have a selection mask saved as an alpha channel!

Click the RGB channel in the channels palette to return the view to the full color image. Next go to Selections > Load Selection. In the dialog box, choose the Alpha 1 channel as the source and click OK.

Here you can see the selection marquee around the image.

As always, I switch to quick mask mode to have a look at the selection mask. You can learn more about quick mask mode on page two of the leaf example

.
While in quick mask mode, I usually apply a half-pixel gaussian blur just to soften the mask the slightest bit.

Next I switch back to selection mode, invert the selection and delete the background

.
Here is the final image with a new background.

I hope this series of tutorials showed you that there's never one way to approach a problem. Sometimes it takes creative thinking and a combination of techniques, but with practice and a wide variety of tools I'm confident that anyone can handle even the toughest of background removing challenges.

beauty retouching, photo manipulation, retouching tricks, retouching tutorial, beauty tips, skin smoothing, smoothing skin tutorial, smooth skin, smooth face, Pucker tool, photoshop filter, liquify filter

2011-06-24T00:33:00.000-07:00

Beauty Retouching

with Marija Matijasec

Beauty retouching is one of the most demanding parts of photo manipulation. There are a couple of different methods and only few tricks. The main trick for your results to be astonishing is patience. With time you'll get faster, but this is not five-minute job even for professionals.

Step 1:
Improve the colors on your image as much as you can. Even if your final mode is CMYK, do most of the editing in RGB -- it is much more flexible and editable than CMYK. And don't ever hesitate to use selections with various feathers while editing.
In this case I've started with curves and hue/saturation corrections -- image was too red. After that I've used variations to lighter image -- I lighter image in midtones and added red and yellow (see image 01). I find this method excellent whenever I have too dark image.
(Note: some of the enlargement images are quite large and may take a moment to open. Some will be set to 800 x 600 pixels, so some scrolling will be necessary.)

Step 2:

After you've finished with color editing, make a new layer -- that is how you can control your work and if you don't like what you've done, you can go from the start or return to an earlier part of the image. You also can use it only to impress your clients and friends.
Now is time to start retouching. I've used heeling brush and cloning stamp to remove all blemishes and bigger imperfections on face (see image 02). Heeling brush is also excellent for removing ugly lines under the eyes.

Step 3:

Too big nose or chin, too small lips and other similar problems can be easily solved with liquify filter (see image 03). This filter, under the "Filters" menu, allows you to move, smudge, squish, and otherwise distort your image. The default setting has the grid turned off, but you might want to try some work with the grid showing. This gives you some clear visual feedback on how the tool is reacting. The Warp will be the most useful, however "Pucker" and "Bloat" are best for shrinking or expanding the area. Be careful and experiment. The brush size has a lot to do with the results. Go slowly, moving a tiny bit at a time.

On this image I've use it for reducing the nose (with the "Pucker" tool) and chin (with the "Warp" tool,) and removing bumps on the neck.

Step 4:

Now is time for final skin smoothing. I've selected bigger cloning stamp with small hardness -- about 15%. It can be used hardness from 5 -- 30%.

With that brush I've careful smoothed the skin (see image 04).

Doing that I always use multiple clicks, not strokes. This is the part of work when you must be most patient while doing it -- be very careful not to repeat pattern. Every now and then take new snapshot in history palette (see image 5). This way, if you don't like your final product, you can easily return to exact step in history.

Step 5:

If I go too far with smoothing on some parts, I use history brush with hardness about 15% and select snapshot I like the most, then partially restore specific area. If this is not possible on some areas that came out too smooth, I use selection and add noise filter to simulate skin texture (see image 06).

Do some final color adjustments if necessary and you are finished

Finished: Open this final image with the Before and After (It's a "rollover" so move the cursor over the image to see the changes, then out again to toggle the before and after.) Notice the results of the Liquify Filter in the nose and chin. Also notice that areas of the shot didn't need modification, such as the areas around the hair.

how change background, combine two photo, photo combine tutorilal, photo combination, brightness photos, brushing, brush photo, photo editor, merge photo, change background, background opacity, merge background, add background, background tutorial, tutorial for background, background photos, background cloud tutorial

2011-06-23T11:19:00.000-07:00

In this tutorial, we are going to combine these two photos:

And create this photo:

Introduction: This tutorial is to help you learn how to change the background of a photo to something more interesting if you choose. There are many ways of getting this done, but this technique is probably one of the easiest and most effective. Ok, so once you open two similar photos (preferably the same size) that you would like to combine in photoshop:

1. Adjust the Levels and Brightness and Contrast of both pictures so they are just about as similarly adjusted as possible. If you need more explanation of this visit our “Photo Touchups Tutorial.”

2. Then working with the photo that has the background that you want to use, Select the whole thing (Select>All), Copy the whole thing (Edit>Copy), and then working with the photo that has the foreground that you want to use, Paste the previous photo onto a new layer (Edit>Paste). Your layers menu for the for your photo should now look similar to the picture to the left. With the background photo on top of the foreground photo.

Background1 change step 1

3. Now, add a Layer Mask to the upper layer that Hides All, (Layer>Add Layer Mask>Hide All). Your Layers menu should now look like similar to the picture below.

4. Click on the Brush Tool,

5. (make sure the colors you are working with are black and white).

6. Then (with the mask on the upper layer selected) simply brush where you want the new background to show through. You will probably have to change brush sizes often for the more intricate places.

buttons, personalized buttons, stylish button in photoshop, shinning button in photoshop, create button tutorial, round rectangular button, button cration, website button, button tutorial, shining photoshop tutorial, button website tutorial, how create button, attaractive buttons

2011-06-09T03:33:00.000-07:00

In this tutorial, I will show you the method I use to create a stylish, clean and shining button for your website in Photoshop. This method is extremely simple with no more than five steps, yet it’s very effective since you can use the button for a wide range of occasions.
Along the way, the tools we will be using include the shape tool, layer blending options, brush and eraser tool. This tutorial is suitable for beginners as the steps are quite easy to follow in my opinion. As for advance Photoshoppers, I would love to hear you the methods you use to achieve such effect, just drop me a comment below.
Have a try, let me know if you have any problem, I will try my best to help you out :)
Here is a preview of the final effect for this tutorial:

Ok let’s get started!

Step 1

Let’s create a new document sized 640 x 480px and fill the background layer with Black.
The reason I chose not to create a document with the size same as the button we’re creating, is because ultimately we will be placing this button somewhere on a web page. Therefore, I think it would be better if we start on a bigger canvas so we will have a better overview of the button design.
Now add a new layer on top of the background layer and name it “background lighting”, grab a big, soft and round brush with a dark grey colour, do a single-click in the position shown below:

Step 2

Grab the Round Rectangular Tool (U) and apply the settings to it:

Draw a rectangular shape in the centre of the canvas, as shown below: (Don’t worry too much about the dimension, just a rectangular shape will do)

On this shape layer, apply the following layer blending options:

Drop Shadow

Inner Shadow

Gradient Overlay

and you will have the following effect:

Step 3

Now let’s load the selection of the shape layer by holding down the Ctrl key and left-click the thumbnail image of the shape layer on the layer palette.
Create a new layer called “Lighting”, on this layer, grab a soft round brush with white colour, do a single click in the position as shown below:

and you will have the following effect:

On this “lighting” layer, apply the following layer blending options:

Drop Shadow

Bevel and Emboss

Gradient Overlay

and you will have the following effect:

Optionally, you can duplicate this “lighting” layer once for more depth. You will notice on the top we created a shining edge line, which add a bit of extra flavour to the button design.

Step 4

Duplicate the “lighting” layer one more time and put this layer on top of all other layers. On this duplicated layer, go to Edit > Transform > Flip Vertical and flip this layer vertically once.
You will now see on the bottom we now have a shining edge line as well, this makes the button more stylish.

In order to reveal the top shining edge line created in the previous step, we can simple grab an eraser tool with a soft round brush, and do a single click on the position shown below:

and you will now have this effect:

Step 5

Now we can simply type some text onto the button. Font choice is quite important here because we want to the button to be as eye-catching as possible. Personally I think those Bold, Clean Font always work wonders. There is a pretty nice article here containing a list of bold fonts free for download, simply grab one of those and type some text onto it: