How to Create a Golden Award Badge in Photoshop

This tutorial will show you how to create golden award badge in Photoshop.

01. Take the custom shape tool and add any shape that you’d wish your badge to be. Most common one would be circle-shaped badge.

02. Now go to Layer > Layer Styles > Gradient Overlay and add a golden, silver or bronze color to your badge.

03. From the same window, move to Stoke tab and add a darker stroke around the badge. Press Ok.

04. Take the Ellipse tool and create a circle in the middle of the badge. Now go to Layer > Layer Styles > Blendig Options and set the Fill Opacity to 0%. Then move to the stroke tab and add a thin stroke.

05. Move to the Drop Shadow tab and add a small light shadow under the stroke. Press Ok.

06. Create a new layer (Layer > New > Layer), select the brush tool with a white color and create a highlight spot. Now select parts of the highlight and delete them. Add another new layer to create a stronger and smaller highlight sport for more shine.

07. Create another new layer, drag it under your badge layer and draw a shape of a ribbon, fill it with any color. Then go to Layer styles and add the ribbon a stroke, gradient and inner glow. Press Ok and duplicate the layer and flip it vertically (Edit > Transform > Flip Vertically) to get another ribbon on the opposite side.

08. Insert your text and add an inner shadow and drop shadow in the Layer styles.

09. You can also add some ornaments or symbols with the same effect as the text and you are done!

How to use Levels

In this tutorial I will teach you how to adjust a photo using Levels. Levels is a tool not so advanced as curves , but it does almost the same job if you learn how to use it correctly. With levels you can adjust the white balance or you can tweak the brightness/darkness of a certain type of range (Shadows , Midtones , Highlights).

This tool has two methods of using: you can apply to the original layer by going to Image – Adjustments – Levels (CTRL+L) or by creating a new adjustments Layer from the bottom of the Layers window – the third button.

Make a new adjustment layer because this is a method preferred by most users because you can delete or modify the settings later. A new window will show up. You will probably not understand too much from this , but I will clarify that in a moment.

For the moment you should only work on RGB as channel because the individual channel request more attention from you. As you will get more confident with this tool , you could work only on the Blue or Red or Green channel. Working with an individual channel let you correct some unwanted color hues of the image. If you don’t use it correctly you could make the effect worse , that is why you should only work on RGB for the first time.

You see that under the histogram are three pointers. The black one is for Shadows , the gray one is for Midtones and the white one is for Highlights. You will notice that if you pull the black pointer to the right , the gray one goes with it. The same thing applies if you drag the white pointer to left.

You should find the balance by making the Shadows adjustments first , then the Highlights and after that drag the middle one to the left/right until you see the image as you want.

You may also see the two pointers under the black to white bar. This adjusts the Shadow and makes them lighter and the Highlights and makes them darker. You should work on these after you finished with the ones above.

With this tool you can adjust the brightness and the contrast of the image if you tweak the balance. You can also use the individual channels for adjusting the tint of an image.

The main feature is the three eyedroppers from the left of the histogram. If you want to set the white balance correctly , use the middle eyedropper and look for a neutral gray tone in the photo. Neutral gray is tone like the one of the window that displays the levels settings. If you find it correctly , the image will look as good as possible.

You also have on the top of the window some settings. I selected Default , but you may select Increase Contrast or other setting that suits best for your photo.

This tool is not as powerful as Curves , but it is easy to use and can do the job as well as Curves.

Tips and tricks about converting your PSD into HTML or CSS

We all know that using Photoshop CS5 is currently the easiest way to obtain a clean and nice design. This software contains all the tools and features that you will need as well as a user friendly environment and many customizable options. You can use its brushes, templates, filters and image adjustment tool in order to come up with a quality final product. If you want your design converted into a web site or just a WordPress template, you will have to take a few simple steps. You will need a code viewer, such as Adobe Dreamweaver and a little patience.

 

Startup

           

You will first need to slice your design into elementary parts. The elements that need slicing are usually pictures, icons, background designs, logos and texts that have a font which is non-safe. In order to do this, first open the PSD file which contains your previously made design. Hide all the extra elements until you only see the basic shapes. Add a new slice which should contain your website’s background and continue doing this until you have selected all the necessary elements. Then you will have to save them for web and devices. The average pictures should be saved as .jpg while the gradients and texts should be saved as .gif or .png. Save all of your slices to the same folder – it will make it easier for you to find them afterwards.

 

Creating the basic files

Beside your basic folder, which you have already created, you will have to add another one, maybe called CSS. In this folder you will add your HTML and CSS basic files. Then you should open the CSS file regarding the layout and paste a CSS reset code. After this step you should also add a typography code and a general. These codes are easy to find on the Internet and will take care of what the code reader cannot do by itself.

 

Modifying the basic files

           

You should now proceed in modifying every part of the code according to your needs. For this you can either try some tutorials or try to learn CSS coding by yourself. Take every file and find out what is wrong and then make the necessary adjustments. This will involve the header, sub header, style page and general style. You will also be able to change the title, add any photo and maybe contact information. These things should go into the code and not in the Photoshop CS5 design, for they are important and you should be able to easily change them.

 

If you have carefully read all the above steps you should now have a general idea about how you can convert your Photoshop CS5 design into HTML or CSS with the use of Adobe Dreamweaver. Even though things might seem complicated at first, with a little exercise you will be able to master the codes and make your website look the way you want it to. If you want to try and do it by yourself you should know that you can find many tutorials on the Internet as well as a Help Center in Adobe Dreamweaver.

How to Use Curves to Adjust the Tones of the Picture in Photoshop

This tutorial will show you how to use curves and how to use curves to get the best out of your image in Photoshop.

01. Curves can be accessed from the Image – Adjustments – Curves.

02. A new window opens when you go to curves. At 1st you will see a diagonal line in the center. That line can be moved and a picture changes accordingly. If you just move the line upwards from the center, everything on the picture goes lighter. The more you raise the line, the lighter the picture goes. Sometimes it is good to give more light to the picture but never overdo it as on the picture below which is for educational purpose.

03. If you move the line downwards, everything on the picture goes darker.

04. The most common way to put the line is to create a slight S curve. That creates a perfect balance in the darker and lighter parts and tones up the picture nicely. But there is even better way!

05. As mentioned above, there is a better way to adjust the colors and contrasts. Do you notice the 3 eyedroppers at the bottom. Click on the 1st and then select a darkest part of your picture. See how the dark parts changed?

06. Then click on the middle and select your grey tone on the picture, then click on the last eyedropper and pick a light color from your picture. Like this you have perfect balance between all the shades and highlights and the picture is contrasted very nicely.

07. Just look at the before and after. The colors are now much more vibrant and you know how to use the Curves tool!

What’s new about Adobe Photoshop in the world of industry?

f you are a passionate Photoshop user, you must be eager to find out new and interesting facts regarding you favorite software. With Adobe Photoshop CS5 released over a year ago, the tension before the new launch is increasing exponentially. Here are two of the most exciting new things that have been announced.

 

Photoshop CS6 is finally here!

           

Well, it is here in a manner of speaking. You can now try the beta version of Photoshop CS6 on Adobe Labs. It is available as a free download and gives you a little insight on what is there to come. You are also encouraged to offer feedback after using this beta version of Photoshop CS6 in order for the developers to improve the software and fix any existing bugs.

Some of the new features regard the increase in performance and the new creative tools. They aim to give you a greater control over the commands as well as a faster editing time. For example, the Content-Aware Patch will let you select and then control an area of the image with greater precision, while the Content-Aware move will offer you the opportunity to easily move an object to a different place on the image. You will be able to test the tools of both Photoshop CS6 and Photoshop CS6 Extended; the latter will amaze you with its new 3D editing tools and its capabilities to analyze an image.

You can now download this beta version free of charge, in either English or Japanese. Also, it will be available for Windows users as well as Mac users. After downloading it, you will be requested to enter an Adobe ID in order to properly use it; this is a onetime request and you will find everything there is to know about it on their official website. Also, your feedback should be posted in the Photoshop CS6 beta forum, in order for everybody to have access to it.

 

A new update for Photoshop CS5 has been released

           

You should always make sure that your version of Adobe Photoshop CS5 is up to date, in order for the software to properly work. You should know that you can now download the 12.0 update without any extra fee.

It brings lots of new things to your Photoshop CS5 and here are some of them: the complex selection tools will be easier to use, you will have a greater control over the HDR images, there have been added lots of new painting effects, and you will get a better management of the media as well as increased performances.

If you are using Adobe Photoshop CS5 for design purposes, there is good news for you as well. You will be able to process your raw images with a state of the art technology, the workflow will be more efficient and you will get the possibility to use the Puppet Warp tool.

With this update, you will be able to make sure that you can enjoy using Photoshop CS5 at its fullest. It will give you more tools and increased control over the things that you can customize. There are new, interesting things to discover; so hurry up! Download and install this new update as soon as possible.

Make a Modern Glowing Loading Bar in Photoshop

This tutorial will teatch you how to create a nice loading bar for your website or other content.

01. First make a new document and fill the background with a color that you’d like. Also, you can jump straight to making the bar and skip making the background.

02. Then add some texture to the background, going to Filter – Noise – Add Noise and set the Amount to about 1. We don’t want it to be too “noisy”.

03. Then give a little bit of light in the middle of the background by using the Dodge Tool with big soft brush.

04. Now it is time to create an actual loading bar. Take a Rounded Rectangle Tool and drag a nice long shape along your background.


05. Double click in the layers window on your newly made shape layer and from the new window that opens, choose Color Overlay, set the Blend mode to Normal and color either dark grey or darker color of your background.


06. When color is set, go to Stroke, set the size to 1, Fill Type to Gradient, Angle to 90 and then set the color from one shade to another.


07. Then go to Inner Glow, set the opacity to 50% or lower and color to black (or darker shade of your bar main color).


08.Now pick Rounded Rectangle Tool again, set the Radius to 20, again, and drag a new shape inside your first one.


09. Double click on the new shape, from the new popup go to Gradient overlay, set the angle to 90 and color made of 2-3 colors – fist darker shade, 2nd lightest and 3rd darker again.


10. Then choose Inner Glow, set color the same as your lightest, Blend Mode Linear Light and Size something small like 5px.


11. Again, choose another Layer Style from the same popup – this time Outer Glow. Set the color the same as your lightest, opacity to around 50% and Size again something low as 4px.


Press OK and voila! your loading bar is ready for use!

How to Create a Paper Note in a Background Pocket in Photoshop

This tutorial will show you how to create a paper note as it would be in a pocket of a background.

01. Create a regular background with a color of your choice.

02. Now take the Rounded Rectangle Tool and drag your desired shape. It can be any color but should be noticable from the background.

03. Double click on your rectangle layer (Window – Layers) and from the popup click on the Drop Shadow. There choose a darker color for the shadow, set the angle to about 30, distance to 1 and size to 1.

04. Not take the Type tool and insert your desired text. It can also be logo or logo and text mixed.

05. Now hold down Ctrl and select the note and the text layer, right click and choose Merge Layers. Then go to Edit – Transform – Scale (or just Ctrl + T) and rotate the note a bit.

06. Create a new layer (Layer – New – Layer at the menu), pick the Marquee Tool, select half the area of the note and fill it with the same color as your background is.

07. Again, create a new layer, take the Brush Tool, set the color to black and with a bigger soft brush, make a one time dot on the background.

08. Now drag from the layers window the black circle layer between the note and the coverer layer. Then, while the circle layer still selected, go to Edit – Transform – Scale and move the circle on its right position and make it flat. Press Enter when you see good amount of shadow peaking in the middle of the note.

09. Give some finishing toutches with the eraser tool bu erasing all of the extra parts of the shadow that were showing from the sides or under the coverer.

And your note is safely in the pocket of your background. What a perfect way of displaying your logo or text on a background!

Web Design Elements – Create a Search Field With a Button in Photoshop

This tutorial will show you how to create a search field with a search button in Photoshop.

01. First lets create a background by picking the Gradient Tool, set the color and then drag in the direction you’d wish the color to set.

02. Take the Rounded Rectangle Tool and drag your first shape which will be the base of your search.

03. Double click on your new shape layer in the layers window (window – layers), a popup opens. There, first choose Stroke. Set it to small size 1 and pick a color that would be a bit darker than your background is. Hit OK.

04. Now create a text area by creating a shape inside your first shape with the Rectangle Tool.

05. Double click on the gray rectangle shape layer and go to Inner Shadow. There set the angle to 90, distance to 1 and size to 3.

06. Next go to Drop shadow and add a small white shadow on the lower part that may seem to be not very noticable but overall giver a good and clean feeling to the shape. For that, set the color to white, blend mode to Normal, ditance to 1 and size to 2. Hit OK.

07. Now it is the button’s time! Select the Rectangle Tool and create a nice rectangle on the other side of your shape.

08. Double click the rectange layer, go to Gradient Overlay and set the Gradient the same color with your background.

09. Then go to Stroke and add a 1 px stroke around the button. Don’t forget to put the Fill Type to Gradient and colors slightly darker shades of your button colors.

10. Then go to Inner Shadow and add a small white shadow on the upper part of the button. For that first set the color to white, then change the blend mode to Normal and then set the angle, disance, choke and size.

11. For the last toutch add some shadow in the Drop Shadow – distance to 2, spread 0 and size 2. Press OK.

12. Optionally, pick the Custom Shape tool and drag a search icon at the start of the text area.

13. Now take the Type tool and type in the Search text so it would be very clear where the text goes to and which is the clickable area.

14. Continue with the type tool by adding on the button some arrows that can be inserted by using certain keys on your keyboard >>. If ready, double click on your text layer and go to Drop Shadow. Add a small shadow under the arrows by setting the blend mode to Overlay, Angle to 90, Distance to 1 and Size to 2. Hit OK when done.

And now you know how a clean and nice searchbar is made!

Photo Editing in Photoshop – Fish Jumping Out of a Wine Glass

This tutorial will show you how to make a photomanipulation of a fish jumping out of a Wine glass in Photoshop.

01. First open three picture – a glass, a fish and some sort of a splash or irritated water. If your glass already has water inside, the more easier for you to follow the tutorial.

02. Position your glass on the document the way you’d wish it to be. Then drag the splash picture on your glass picture. Go to Edit – Transform – Scale (or just Ctrl + T) and scale the water in the right size and rotate to the right position by using the small squares.

03. Then go to the Layers window and set the water to Multiply so the glass under it would pass through.

04. If you need to transform the water even more, then go to Edit – Transform – Warp and position it any way you’d wish. Then take the Eraser Tool and delete all of the water that is outside the glass.

05. Now take the Smudge Tool, set the strength to 50% or higher, and drag the cut off part of the water downwards so you’d “fill” the glass with water.

06. Drag the fish on your glass picture, take the Polygonal Lasso Tool and cut the fish out of its background.

07. Then go to Edit – Transform – Scale and turn and resize the fish as much as needed.

08. Then go to Layers window and set the fish to Multiply. This step is especially needed when part of the fish is still in the glass, so all that needed becomes transparent.

09. Hold Ctrl down and select the glass and the water layer, right click and choose Merge Layers. Now the glass and the water is one layer. Then go to Image – Adjustments – Color Balance and try to give the glass a shade of the same color as your fish has. Press OK when ready.

10. Then go to Image – Adjustments – Hue and Saturation and Drag the Saturation bar into the minus to wash away all the unecessary colors. Press OK when you are satisfied with the result.

And your fish is ready to jump out of the glass!

Web Elements – Create a Clean Pagination Layout in Photoshop

This tutorial will show you how to create a clean pagination layout in photoshop.

01. Create a new document with any background color of your wish.

02. Now take the Rounded Rectangle Tool, choose the color white and create a small square.

03. Double click on your square layer (Window – Layers) and from the popup click on the Drop Shadow and there set the color, angle, distance spread and size.

04. After setting the shadow, set a small Stroke by clicking on the Stroke in the popup. Set the stroke to Gradient, angle to 90 and size a small 1.

05. Now take the Type tool and type in your first page number.

06. Repeat the previous steps with other pages, leaving a space for an active page. Or you can just duplicate the button by right clicking on the button layer and choosing Duplicate layer and adding the number separately for each button.

07. Now lets start with the active button. Again, create a small square, preferrably the same size as the other buttons.

08. Double click on your newly made shape and choose Gradient Overlay. There set the Gradient color, angle and scale.

09. Then go to Stroke, set it to small 1, fill type to gradient, angle to 90 and choose a darker color than the button color is.

10. Next go to Inner Shadow, set the blend mode to Normal, angle to 90, distance to 1, choke to 0 and size also to 0.

11. Then go to Drop Shadow and add a small shadow by setting the blend mode to Normal, distance to 2, size to 2, angle to 90 and lower the opacity. Press OK.

12. Now take the Type tool and type in the missing page number. This time with another color so it would stand out from the inactive pages. Then double click on the text layer and in the popup set a small drop shadow for the page number. Press OK.

13. Time to make Previous and Next buttons. Again take the Rounded Rectangle Tool and drag a longer shape.

14. Now repeat the steps from the blue button to add the same effects for your Previous button. To save time, just right click on the blue page button and choose Copy Layer style and then right click on your Previous button layer and choose Paste Layer style. Now add the text and the same shadow as 3 has and for the finishing toutch, create a small arrow with the Custom Shape tool and add the same shadow under it.

15. Repeat the steps with the Next button and your navigation layout is done!