Photoshopku

Animated Ad Banner

2011-02-25T06:35:00.000-08:00

In this tutorial you will learn how to create, animate, and save a web banner. A preview can be seen below:

Open a new document 400×75.

Fill the canvas using the gradient tool with a lighter color and a darker color I chose green.

Using the eclips selection took make a selection like mine.Just make a circle out side of the document with some of it going in the document.

In this selection using your same colors fill it with the same gradient just the colors on the oppisite sides like mine.

Keep the selection still and go select > modify > contract with a setting of 5 this make your selection smaller. Then fill it with a different gradient i chose #CCCCCC and #F1F1F1 for mine which is a nice silver.

Add in your logo to the silver part.

Add in your company name

This gives the company name some life.

You can add your tag line here and your done or continue through the tutorial to find out how to animate your banner.

ANIMATION

For my animation I’m going to have some flashing words about the site so I’ll start with the word media I chose white.
After you have your word duplicate the word by pressing ctrl + j

hide your first text layer (Media) Now on your duplicate layer go filter > blur > motion blur with a setting of 11. It will ask you if you want to rasterize the layer click yes.

Now i do the same thing in the last step but with new word makshure each word and its blur are on differnt layers.

Now that you have all your text layers lets animate it.
Go windows > animation.

This will bring up your animation pallet it will show your frames.

Hide all of your text layers except the first (media)
then on your animation pallet click the new frame button 18.jpg
It will ad a new frame in your animation pallet tool now hide (media) and unhide (media blur) then add a new animation and hide the blur and unhide the next text layer ect… When you are through click the play button and watch your animation I got this.

SAVING ANIMATION

File > Save for Web, because you don’t get all the nifty image sizing and optimization controls right there. Nay, you have to do all these ahead of time. But at least saving the animation is just a one-step process.

Coloring black and white pictures

2011-02-24T18:54:00.000-08:00

Let in this post to learn how to colorize your photos that are in black and white with Photoshop, there are various techniques to paint the picture, in this tutorial I'll show how to color with the tool Hue and saturation.

1.First, let's paint the skin of the person, and we'll use the pen tool to select the skin of the woman.

2.Select with very careful to have good results.

3.After you have done all the selection of the skin, click the right selection you made with the pen and select the option, make selection, and let the options below:

4.Now go to color the Hue / saturation (CTRL+U) put the colorize option enabled, and place the following values in the fields of color:

5.Will be like this

6. We now color of the lips, repeat what we did in step 1, but with the lips

7. Once selected repeat step 3, only the option to leave the Feather Radius value "1"

8.Use the same tool as in step 4 and leave the following options

9. Now for all the end of the colorization process will repeat the same process we did before

10. After completing the tool again use Hue / Saturation to increase saturation a bit of the picture and give more life to it.

11. Final result

Monitor Icon Design

2010-07-24T08:15:00.000-07:00

STEP 1Let’s start out by creating a new file. I used a 400×400 pixels canvas set at 72dpi, and I filled my background with #242424 color shade. In a new layer draw a small rectangle with #101010 color shade and 39 x 17 px dimensions. Then uder Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options.

Result:

STEP 2
In a new layer draw a thin gray rectangle with #BEBEBE color shade below the first rectangle design. Then under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option.

Result:

Step 3:
In a new layer draw a dark rounded rectangle with #0B0F12 color shade and 117×113 px dimensions.

Step 4:
Under Layer Style(Layer > Layer Style) add an Inner Shadow and Inner Glow blending options to the dark rounded rectangle layer.

Result:

Step 5:
In a new layer draw a blue rectangle with #214984 color shade and 165×101 px dimensions.

Step 6:
Under Layer Style(Layer > Layer Style) add an Inner Shadow, Inner Glow, Satin and Gradient Overlay blending options to the blue rectangle layer.

Result:

Result:
Monitor Icon Design.

Design a Horror Movie Dvd Cover

2010-07-24T07:14:00.000-07:00

In this tutorial we will learn how to create an horror style dvd cover in photoshop. I love dvd design (I’m sure you too!) and to achieve the final result I have used textures, mask and layers blending mode. As always, you can download the psd file at the end of the tutorial. Lets start!

Step 1
Lets start downloading a free image of a forest. Create a new 600×800 document and paste in the forest image. Now use the Burn Tool to darker the edges of the image. You can follow the indications shown in the screenshot below:

Step 2
Now we need the image of a child. I think this image from stock.xchng is perfect for our purpose. Extract the child using the pen tool and paste him into the document.

STEP3

The aim of this step is to modify the face of the child. We want to hide eyes, nose and mouth. The simplest way is to zoom in and make a selection of an eye with the Patch Tool. Now drag this selection to the cheek. Simple! It is not important to have a perfect result, because later we will apply a grunge texture upon this image. Once you have hided eyes, nose and mouth, use a soft pink brush (hardness: 0%) to give to the face a more uniform color. OK! You should obtain something like this:

STEP 4

Lets add a texture. You can download this grunge texture, paste it into the canvas and set the layer blend mode to Overlay with opacity 60%.

STEP 5
I have accidentally found the image of a teddy bear by GiniMinig! We can paste it into the composition. We want to put the teddy under the hand of the child. So at first place the teddy image near the hand of our monster/kid. Ctrl+click on the layer of the child to select its pixels. Select the teddy layer and press alt+add layer mask button. The teddy is now completely under the child. With the layer mask selected, use a white brush and paint upon the teddy so that it will appears again, but don’t paint upon the fingers of the child. Done!

STEP 6
I think shoes are too clean for a monster kid alone in the forest. So simply select a grunge brush and paint upon the shoes.

STEP 7
I need the image of a screaming person that I want to place on the top of the composition. After have downloaded lots of images, I have found this little vampire. Paste him into the canvas, switch the layer blend mode to overlay and use a large soft brush to erase some parts of the image. We want to obtain a mysterious face among the trees.

STEP 8

It’s time for another texture. Download this metal grunge texture, paste it in and set the layer blend mode on Overlay.

STEP 9
To complete the work, simply add some text with nice gradient effects. The font I’ve used are Concursoitalian and Delicious. Finished! Hope you enjoy it!

Create Colorful Jumbo Avatars

2009-08-25T08:15:00.000-07:00

Avatars are useful on just about any website. They give you an identity apart from just your username. We’re going to show you how to create some cool and colorful oversized avatars in Photoshop that will make you stand out! The colors are also very easy to change, it’s almost too simple, really.

This Photoshop tutorial focuses on an under appreciated web element – avatars. An avatar is your online identity giving people thousands of miles away an idea of who you are. We’re going to show you how to take your avatar to the next level. These colorful avatars will make you stick out and they’re perfect for displaying your image with your name. Download the PSD at the end of this tutorial and use them however you’d like!

Final Product:

Step One: Creating the Bottom

Create a new Photoshop document, whatever size you’d like to use as it really doesn’t matter. We used a document size of 800×600 px just for the sake of this tutorial. Fill it with your choice of a color, although this tutorial works best on a light background.
The first step is to create our avatar’s basic shape. Select the Rounded Rectangle Tool (U) and create a selection with a similar size to the one below. Fill the selection with #5262BB.

To make our shape an actual layer you need to click the Paths box and right click “Work Path” then select “Make Selection”. This will make a new selection based on the shape of your path and you’ll see the marching ants. Make sure to create a new layer for this shape (Layer > New > Layer)!

Apply these layer styles to the bottom shape of the avatar:

Step Two: Creating the Top

Now that we have the bottom shape layer ready to go, it’s time to create the top. The top area is where you’ll put your picture.

Once you’ve created the top shape and filled it with #e9e1cf, go to Filter > Artistic > Underpainting and apply these settings:

Brush size: 6
Texture coverage: 16
Texture: Canvas
Scaling: 55%
Relief: 2
Light: Top
Click OK

Apply these layer styles to the top shape:

If done correctly you should have something like:

Time to finish off the bottom of the avatar by adding some “sun rays” that will blend into the background. First start off by creating some thin white lines. Then go to Edit > Free Transform and while holding [shift], rotate each line one click (it snaps at 45°). You can just do half then duplicate it and flip it horizontally.

Place your rays above the bottom shape and place them so it’s symmetric. Go to Filters > Blur > Gaussian Blur and blur the rays to a 3.0 pixel radius. Set the Blending Mode of the rays to Overlay and set the Opacity to 15%.

Step Three: Personalization

The rest is pretty easy, throw in a picture of yourself or a cartoon image and that part is finished. I just used a random image I found on Google. Adding the text requires some styling. Let’s tackle that now.

For the “Big Text” apply these layer styles:

For the “Little Text” apply these styles:

Done! Now, to change the colors simply use a different color for the bottom shape of the avatar. Back in Step One, we used #5262BB just use a different color and the result will be different! (The PSD includes 4 colors; blue, green, red and purple)
What the heck is this? Check out how we intended for this avatar to be used:

Thanks for reading! Hope this is useful to you.

Adobe Photoshop CS3 Icon

2009-08-23T10:01:00.000-07:00

Want to learn how to make your own Adobe Photoshop CS3 Replica Icon? Too bad!! This is a tutorial on how you can make replica Adobe Photoshop CS3 Icon, however you can use this to help you make your own custom icons.

1. Start with a new document 120×120 pixels with a white (#FFFFFF) background.

2. Create a new layer (Shift + CTRL + N), Using the Rectangular Marquee Tool (M) create a selection slightly smaller than the canvas and then fill it in with black

3. Now open the Blending Options Window by right clicking the layer and selecting Blending Options, then go to gradient overlay and choose the following settings-

4. Double click the gradients and then adjust the colours by double clicking onto the small boxes and replace the colour like below.

5. Then go on to the drop shadow menu and choose the same settings as below.

6. Then choose the text tool and write “Ps” with the font Calibri and make the font size 70. Make sure that the text is in the middle and also make sure that the colour of the text is white.

7. Last Step!! Go on to blending layer and then go on to gradient overlay. Double click the gradient and then use the settings from below.

8. Finished

I made one with my initials!!

How To Make Photo Sketch Effect

2009-08-23T09:27:00.000-07:00

Here is a simple trick to create a photo sketch effect.

Step 1:
open an Image.

Step 2:
Now go to Image> Adjustments> Desaturate.

Step 3:
Duplicate the layer.
Select the duplicated layer and go to Image> Adjustments> Invert.

Step 4:
Select the duplicated layer and set the blending mode to 'Color Dodge'.

After that It should be mostly or completely white. Step 5:
Finally select duplicated layer, go to Filter> Blur> Gaussian Blur and set the radius to 2-5.

Photo Sketch Effect

Realistic Stensil Graffiti

2009-08-22T19:30:00.000-07:00

This tutorial will walk you through editing text to look like real graffiti on a concrete wall. Hope you like it!

Final Image Preview

Preparation

The only assets we need for this tutorial are a concrete wall background and a stencil-like font. Here are links to what I used:

Image: “Concrete” by Jazza on stock.xchng
Font: “Gunplay” by Larabie Fonts on dafont

The Process

Start by opening up your wall image. I cropped mine down to 880 wide, so any measurements I give will be relative to that document size.

Next, select the Horizontal Type Tool and insert some text using your stencil font.

Right-click your type layer and select Rasterize Type. Go to Filter » Blur » Gaussian Blur and select a 1px radius.

Duplicate the layer. Go to Filter » Blur » Gaussian Blur again, but this time select a 3px radius.

Add a pixel mask to your newly blurred layer. (Not sure how masks work? Please read my introduction to Photoshop masking). Select the mask and go to Filter » Render » Clouds. This basically randomizes where your extra blur shows through.

I did this again procedure again with a slightly larger blur. So, 6px radius blur:

And masked with a cloud render. It’s a subtle effect, but those subtleties add to our realism:

Next, let’s add some stray sprays. Take a 65px brush, black, 0% hardness and click on a few of the letters. If you’re using a tablet, try out a 100px brush with pressure sensitivity on.

Privacy Policy

2009-08-22T00:01:00.000-07:00

If you require any more information or have any questions about our privacy policy, please feel free to contact us by email at arwan@ymail.com.

At photoshopku.blogspot.com, the privacy of our visitors is of extreme importance to us. This privacy policy document outlines the types of personal information is received and collected by photoshopku.blogspot.com and how it is used.

Log Files
Like many other Web sites, photoshopku.blogspot.com makes use of log files. The information inside the log files includes internet protocol ( IP ) addresses, type of browser, Internet Service Provider ( ISP ), date/time stamp, referring/exit pages, and number of clicks to analyze trends, administer the site, track user’s movement around the site, and gather demographic information. IP addresses, and other such information are not linked to any information that is personally identifiable.

Cookies and Web Beacons
photoshopku.blogspot.com does use cookies to store information about visitors preferences, record user-specific information on which pages the user access or visit, customize Web page content based on visitors browser type or other information that the visitor sends via their browser.

DoubleClick DART Cookie
.:: Google, as a third party vendor, uses cookies to serve ads on photoshopku.blogspot.com.
.:: Google's use of the DART cookie enables it to serve ads to users based on their visit to photoshopku.blogspot.com and other sites on the Internet.
.:: Users may opt out of the use of the DART cookie by visiting the Google ad and content network privacy policy at the following URL - http://www.google.com/privacy_ads.html

Some of our advertising partners may use cookies and web beacons on our site. Our advertising partners include ....
Google Adsense
Amazon

These third-party ad servers or ad networks use technology to the advertisements and links that appear on photoshopku.blogspot.com send directly to your browsers. They automatically receive your IP address when this occurs. Other technologies ( such as cookies, JavaScript, or Web Beacons ) may also be used by the third-party ad networks to measure the effectiveness of their advertisements and / or to personalize the advertising content that you see.

photoshopku.blogspot.com has no access to or control over these cookies that are used by third-party advertisers.

You should consult the respective privacy policies of these third-party ad servers for more detailed information on their practices as well as for instructions about how to opt-out of certain practices. photoshopku.blogspot.com's privacy policy does not apply to, and we cannot control the activities of, such other advertisers or web sites.

If you wish to disable cookies, you may do so through your individual browser options. More detailed information about cookie management with specific web browsers can be found at the browsers' respective websites.