Animated Advertising Banner In Photoshop By PSdlovers.

Tutorial by PSDLOVERS. In this tutorial You will learn how to make a advertising banner for your site our your product.  Click On The Images for Full View Here i am making Advertising Banner og Iphone. Step 1: Creat a New document of size 900×120 px. Now we are going to make the baground of the banner. select your layer 1.Rignt click on it.Click on Blending options. Apply the settings shown in the below image. Result you get will be exactly like the below image. Step 2 : In this step we are going to add images i.e your products in the banner. Here i have used iphone 3g images.Im providing the psd of this banner so you can get them from the psd. I have also added Apple icon to make the logo related to the iphone. Adjust the Images in proper postion. Image shown below is the result i got after adding images to the banner. Step 3: In this step we are going to work on the text of the banner. Select your Text tool or press T. Type your text. I written “Apple Overstock” in black colour Now we are going to apply text effects to the banner. Select your text layer.right click on it and click on Blenging Options. Apply the following blendings shown in the below images. Image shown below is the result i got after applying the Blendings. Hide the text layer “Apple Overstock” now im going apply another text for this text we are going to use same settings, but i have written it in green colour. Image shown below is the result i got after applying the Blendings. Step 4: Here comes the best part.We are going to add Animation in the banner. Hide all the layers (unread the eye mark of the layers) except the baground layer i.e layer 1. We are going the animate the product i.e iphone.Open the animation window.Duplicate the frame. I have three images here.so lets start with first image. Unhide te image then decrease its opacity to 20%.

Step 5: Now we are going to add same animation to the text “Apple Overstock”. Unhide this layer and apply step 4 for this. Image shown below is the result i got after applying Step 4 and Step 5.

Step6: We are done with the first text.Now we will different animation to 2nd text. Unhide the 2nd text layer.then duplicate the frame.then hide the text layer. duplicate the frame then unhide the layer.do this step for four times. Set the timings of the frame 2sec or what it suits. Final Result you get will be

Animated Advertising Banner In Photoshop By PSdlovers.

Note: THIS TUTORIAL IS COPYRIGHT OF PSDLOVERS.IF YOU WANT TO SHOWCASE THIS TUTORIAL ON YOUR SITE THEN ASK THE PERMISSION HERE.

In this tutorial you will learn how to create a unique content box for your twitter feed on your WordPress blog. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Author:

Matthew Heidenreich

1. First thing we want to do is create a new canvas of 400×400

2. Next lets go ahead and get out our rounded rectangle tool and set the radius to 8px. Then make a rectangle similar to the following:

3. Now lets go ahead and add a few blending options to that layer. To do so right click the layer and choose blending options and input the following

4. Your document should look something like this:

5. Next we want to add a very slight highlight to the top of our rounded rectangle. The way we will do this is to CTRL+CLICK your rounded rectangle layer to make a selection of it. Next, lets go ahead and create a new layer and fill the selection with #FFFFFF. Using your arrow keys, and with your rectangle selected, move the selection down a couple pixels and choose EDIT>CLEAR

6. We want to go ahead and lower the opacity of this layer to about 30% and you’ll have something that looks like this:

7. Next we want to go ahead and add a Twitter icon to our content box. This is the one I choose to use

Icon From Iconfactory

8. Try to position it on the top as I have:

9. Next I added the heading to my content box. For ‘Latest’ I used #04a7ca, and for ‘Twitter’ I used #f84c6c, and a generic font, helvetica.

10. All that we need to do now is create how our tweets will be displayed. Using the rectangle marquee tool, create a selection similar to the following and fill it with #FFFFFF

11. Next, lets go ahead and input the following blending options onto that layer

12. Add some text above the box, and then you’ll have something that looks like this

13. Once you do that you can copy it down to fill up the box and your final result will look like this:

Hello my friends. Today I will show you how to create another website portfolio.
You can use this tutorial to create also a professionally blog layout.

Let’s start by creating a new document with the following sizes: 960 x 900 pixels. For start I will use the following color for the background #3b2f26
If you don’t know how to add the color, I suggest you to use Paint Bucket Tool, and after you select the foreground color click on your canvas.
One of the most importation parts of this layout is to the background. I will give you a nice seamless damask pattern for you to use. Download the following image on your computer, and then open it on Photoshop

After you have the texture opened, go to Edit > define pattern. Choose a name for this pattern and click ok. You can now close this document. On our layout please create a new layer above the background layer. The shortcut to create a new layer is (CTRL+SHIFT+ALT+N). Select Paint Bucket Tool, and on the top of your screen select Pattern.

Click on time inside your document, and then change the blending mode to Overlay

With Rounded Rectangle Tool, I will make some shapes

I will right click on the grey shape layer (and I will choose rasterize layer)

Then I will grab Rectangular Marquee Tool, and I will make a selection on the bottom part of the grey shape

Then hit the Delete key from your keyboard, and press CTRL+D to deselect

I will add the following layer styles for this shape

This is my result

With Ellipse Tool, I will create a dark shape. I will place this shape under the orange navigation bar

Then I will go to Filter > Blur > Gaussian blur. You will be asked if you want to rasterize the shape. You can click on OK, and then on the Gaussian blur window set the radius to 3.

I will lower the opacity for this shape to 20%

I will make one more time a selection on the bottom part of this shadow, and I will hit the delete key from my keyboard

Then I will press on CTRL+D to deselect my selection

With the same technique as above I will create on the bottom of the header a similar effect. I will not explain one more time the steps. This is my result so far. Click on the following image to see the full size layout

I will create another layer (press CTRL+SHIFT+ALT+N) on top of all layers, and with Pencil Tool, and with a small brush (1 pixel) I will create 2 lines

I will use one more time Rounded Rectangle Tool, to create another 3 shapes

For all these shapes I will add the following layer styles

This is my result so far

Now I will add some text and images. Please click on the next image to see the full size layout

I will work further on the header. ON the right side I want to create a slideshow. I will create there one round shape

I will cut the left side of the shape, and then with Warp tool I will modify the shape to look like mine

Then with Ellipse Tool I will create s small circles.

I will drag these small shapes under the white shape. The one where you will see some random images from your slideshow

I will duplicate the orange shape, and I will rotate it to the right. You can see that I will change the color for this shape to black

Then I will go to Filter > Blur > Gaussian Blur, and I will change the radius value to 2 pixels

I will select Custom Shape Tool, and I will add a small arrow over this orange shape

With The same technique I will create a similar design on the right side

I will create a new layer above the damask texture layer, and with Brush Tool I will add a simple drawing

Then I will change the blending mode for this layer to Overlay. This is my final result

Please note that you can change the look of this layout very easy. If you don’t like the Damask texture used in tutorial, you can use another seamless pattern from our set of  Photoshop Pixel Patterns.

Related Articles

• Related Blogs on portfolio layout
• Design a Simple Portfolio Layout
• Virus Protection

Here we will tell you how to make a Ford-car-automobile-logo-idea in photoshop.

[1] Take a new file of 500 pixels,300 pixels, of resolution 72 dpi in the RGB mode.

[2] Now take the Ellptical Marquee Tool create a new shape and fill with Black color.

[3] Go to Blending Option use the following settings.

[4] Your image should be look like this.

[5] Now take the Shape Tool and select this one.

[6] Create a shape and fill with Black color.

[7] Go to Blending Option use the following settings.

[8] Your image should be look like this.

[9] Take the Text Tool create your text.

[10] Now take the Elliptical Marquee Tool and create a shape fill with White color.

[11] Then change the Blending Mode and Set the Opacity.

[12] Your final image should be look like this.

]]> http://www.psdlovers.com/2009/05/ford-car-logo-in-photoshop/feed/ 0 http://www.psdlovers.com/2009/05/anime-blog-layout/ http://www.psdlovers.com/2009/05/anime-blog-layout/#comments Sun, 24 May 2009 09:46:14 +0000 psdlover http://www.psdlovers.com/?p=182

For those of you who love anime and love blogging I have come up with a wordpress layout so you can express both your loves together.

First you need to decide what the size of your blog is going to be but for tutorial purposes I am going to show you on an 800?600 scale.

Open PhotoShop and Create a New file and fill it with white. Then create a new layer and call it “Floor”. Now grab a guide and section off the bottom so the height is 110 pixels. Finally make a selection of that area and fill it with #E5E5E5.

Floor Guide

Now that you have the Floor layer ready we are now going to add some blending options. The blending option we are going to use are a DropShadow and a Stroke. Use the settings below to blend the “Floor” layer.

DropShadow

Stroke

This should be your result:

Floor Blended

Now create a new layer and call it “Canvas”. The canvas layer is going to be the section that houses your blog enteries. Now drag out two vertical and two horizontal guides to mark out the Canvas area. The two vertical guides should be at 150 and 650 on the horizontal ruler. The two horizontal guides should be at 60 and 550 on the vertical ruler. Like below:

Canvas Guide

Now make a selection using the guides and fill the selection with White. Now we are going to add some blending options to the “Canvas” layer as well. We are going to add a DropShadow with the Settings below:

Canvas DropShadow

This should be your result:

Canvas

Next we are going to add a more impressive shadow so your blog look like it is sitting in a 3D space. So create a new Layer under your “Canvas” layer and call it “CanvasShadow”. Then drag out three more guides two vertical and one horizontal. The new horizontal guide should be at 90 and the two new vertical guides should be at 250 and 700. Like below:

Shadow Guide

With the guides in place grab your pentool and mark out a section like the image below:

Shadow Outline

Fill the path with black and you should have something very close to this:

Shadow Outline

Finally go to Filter > Blur > Gausian Blur and set the amount to about 10 – 20 and hit ok. Then set the layer fill to 40%. Here is the result:

Canvas Shadow

Now that we have the base of the site set up we are going to move to the header and navigation. Create a new layer and call it “Header”. Grab your pentool and make an outline that looks like the selection below:

Header Outline

Fill the outline with white. Then we are going to add a Dropshadow and a Gradient Overlay like the settings below:

Header DropShadow

Header Gradient Overlay

Your header should look close to this:

Header

The next part of the header is the Navigation section. Again drag out 3 new guides. Two verticle and one horizontal, the two vertical at 20 and 720 and the horizontal at 120. Then grab the Rounded Rectangle Tool with a 10px radius. Draw section out and fill it with black to look like the image below:

Navigation Outline

Then we need to add three Blending options a Drop Shadow, Stroke, and Gradient Overlary in the settings that follow:

Navigation DropShadow

Navigation Gradient Overlay

Navigation Stroke

You should have something very close to this:

Navigation

Now we are going to add the font on the navigation. I chose NEUROPOL for my font but you can choose whatever you like. Set the font size to 20px. The first Button we are going to create is Home. So type out the word home in the navigation area just like the image below:

Home Black

Then we are going to add four blending options to this font. The Options are a Drop Shadow, Outer Glow, Gradient Overlay, and Stroke like below:

Home Drop Shadow

Home Outer Glow

Home Gradient Overlay

Home Stroke

Resulting in this look:

Home Button

Repeat those steps on the next sets of fonts until you have something like this:

Navigation Buttons

Now create some dividers between each word:

Navigation Dividers

Next step is to add the header title I named the site Anime Girl Blog, but the title is up to you. Make the font size 45 and select neurpol as the font again. Then add three blending options (Outer Glow, Gradient Overlay, Stroke) shown below:

Title Outer Glow

Title Gradient Overlay

Title Stroke

Resulting in this look:

Title

Next we are going to add a global date area for your Blog. Make a new layer and call it “Date”. Drag out 4 new guides (Two vertical {115, 150} and two Horzontal {570, 765}). Then grab the Rounded Rectangle Tool with a 10px radius. Create the box using those guides and fill it with black.

Date Guide

Now we are going to add three new blending options (Drop Shadow, Gradient Overlay, and Stroke)

Date Drop Shadow

Date Gradient Overlay

Date Stroke

Resulting in this look:

Date

Now that we have the date area it’s time to add the date. Use the same font we have been and set the font size to 14. Now use the present date and ad these four blending options (Drop Shadow, Outer Glow, Gradient Overlay, and Stroke) like below:

Present Date Drop Shadow

Present Date Outer Glow

Present Date Gradient Overlay

Present Date Stroke

Resulting in this look:

Present Date

We have now created most of the blog layout. The step is to add the Post area and our anime girl. You can use whatever you like for this section the steps will be the same. Drag out 4 new guides (Two vertical {115, 200} and two Horzontal {120, 215}). Now make that outline a selection and save it as “hostBox” so we can use it later. Then grab your image and paste it into the layout. Name the new layer and call it “Host”. Next adjust the size to what you would like and load the selection we saved early by going to Selection > Load Selection > select the name “hostBox” and hit OK. Then grab the magic wand tool and right click in the selection to copy out the are you want. Delete the layer with the part of the image that is not inside the box. Now you should have something close to this:

Host with No Blending

Finally add these Blending Options (Drop Shadow and Stroke) below:

Host Drop Shadow

Host Stroke

Resulting in this look:

Host

Now we need to create the post area so drag out 4 new guides (Two vertical {155, 550} and two Horzontal {220, 580}). Create a new layer and call it “Post” Now make a rounded rectangle selection in the guides and fill it with white. Then add a Drop Shadow and Stroke with the settings below:

Post Drop Shadow

Post Stroke

Resulting in this:

Post

Now that we have the shading done we need to duplicate this layer and call it “Post Header”. Add a new horizontal line (190) and drag out a rectangle marquee selectionand cut it out of the “Post Header” and delete the excess. Then apply the following Drop Shadow, Gradient Overlay, and Stroke:

Post Header Drop Shadow

Post Header Gradient Overlay

Post Header Stroke

Resulting in this:

Post Header

The Final step is to Slice this image into section for display in WordPress. Here is the final with a mock up post added and some optional decorations:

]]> http://www.psdlovers.com/2009/05/anime-blog-layout/feed/ 0 http://www.psdlovers.com/2009/05/how-to-create-a-futuristic-logo/ http://www.psdlovers.com/2009/05/how-to-create-a-futuristic-logo/#comments Fri, 22 May 2009 09:06:06 +0000 psdlover http://www.psdlovers.com/?p=177

How To Create A Futuristic Logo In Photoshop.

Step one: Start with a large black canvas, in your layers window make a new layer set and name it Futuristic Logo Design. Choose your ellipse tool, in a new layer draw a 86 x 86 pixels, #00B6CB colored circle.

Step two: With your step one layer add the following layer styles:

Step three: In a new layer draw a 72 x 72 pixels, black circle located as shown below. Then cut the bottom half of that black circle.

Step four: With your step three layer set the layers blending mode to lighten and add a gradient overlay layer style:

Step five: Add the same effect on the bottom side of the circle design.

Step six: Now duplicate your ‘Futuristic Logo Design’ layer set and go to Layer > Merge Layer Set. You should now have a copy of the entire circle design in a new layer, resize the duplicate and set the layers blending mode to Linear Burn at 27% opacity level. Make sure you place this layer inside the original ‘Futuristic Logo Design’ layer set.

Step seven: Select the polygon tool and set the sides to 3 with anti-aliased checked.In a new layer draw a large, #00B6CB colored polygon. Then add the following layer styles:

Step eight: Now move the polygon layer from step sevenbelow/under all your layers inside the ‘Futuristic Logo Design’ layer set. Then position the shape as shown below.

Step nine: In a new layer make the exact polygon shape from step six. Add the following layer styles:

Step ten: Create a new layer, make sure the layer is under all the circle layers then with your polygon tool draw a small black polygon facing up. Add a gradient overlay layer style:

Step eleven: Again duplicate your ‘Futuristic Logo Design’ and merge layer set. Resize the duplicate shape similar to the image below then rotate through Edit > Transform > Rotate 90. Place the layer behind your ‘Futuristic Logo Design’ layer set.

Step twelve: Add the same design from the last step on the other end of your futuristic logo.

Step thirteen: Choose your text tool and select font Harlow Solid Italic from the font list. Set the size to 54 pt, crisp and #00B6CB for color. In a new text layer type your name.

Step fourteen: With your step thirteen text layer add the following layer styles:

Final Image: Futuristic Logo Design.

Hi friends . . . you know how to create the Photoshop design flower logo icon in Photoshop?

Let’s see, how to create.

[1]-First of all open New Document of Custom size, Height & Width 400×400 pixels, Resolution 72 & Mode RGB Color.

[2]-Now select the ‘Brush Tool’ & use the following setting.

[3]-Now create the following shape with the help of ‘Pen Tool’ right click select “Stroke Path” &
use the following settings of stroke path.

[4]-Now go to Blending Options,& use the following settings
Photoshop Technique-How to use the Blending Options feature.

[5]-Similarly create the other shape with different colors like as shown below.

[6]-Now create the selection at new layer & press right click & go to the ‘Feather Option’ gives
the ‘Feather Radius’ 7 pixels.

[7]-Now see below for Final Photoshop Output. I hope this is a good tutorial & U can use these
Photoshop Techniques in your Graphics Design project.

Tutorial By Adobe person.

In this tutorial I will show you how to create a very simple but very attractive web hosting layout.

A few days ago i’ve showed you that images are very important when you create a layout. Here is the tutorial i am talking about: Tutorial. In this tutorial i will create a sleek web hosting layout without any image. All will be only text and very nice gradients. All from this set of 27.000 Gradients

Preview full screen psd layout

When you design web 2.0 layouts it is very good if you use only a few colors.
In this tutorial i will use this technique to show you how easy is to create a nice looking hosting layout

I will start with a new document with the following size: 960 x 900 pixels. With Gradient Tool, I will add a vertical gradient

With Rounded Rectangle Tool I will create a big shape. I will use a white color

I will duplicate this shape one time (select the layer first and then press CTRL+J). Change the color of this shape to #eaf5ff, and with Move Tool nudge the shape a few pixels to the bottom

I will select Rounded Rectangle Tool, and I will create 4 shapes

For all this shapes I will add the following layer styles

This is my result

I will create some buttons with Rectangle Tool

For this buttons I will add the following layer styles

And here are my buttons

I will add some text in this area

Then I will add some small arrows with Horizontal Type Tool

Then I will add some small pixel icons

I will follow the same steps also for my other 3 boxes. I will add different text until I have the following result

On the right side I will add another shape with Rounded Rectangle Tool

I will add the following layer styles for this blue shape

After I will add some text and a button this is how my info box looks like

I will create 2 lines with Line Tool. Both lines need to have the weight of 1 pixel

I will draw the lines under the Grafpedia text, then I will select both lines in my layer palette, and I will press on CTRL+E to merge the layers into a single one. With Eraser Too, I will delete the left and the right part of the lines

With Line Tool I will create other lines over my layout. Please press on the following image if you want to see the full size hosting layout

I will use different colors for the lines.
On the line number 2 I will add the following layer styles

This is my result

On the top of my hosting layout I will add some text button, and between them I will add some lines.

On my previous screen shot you can see a small arrow. I will zoom my document to understand how this small arrow was made. I have used Pencil Tool with a small brush (1 pixel) and I created the following arrow

On the right side of my simple hosting layout I will create some small pixel icons.

I am almost ready. I will write some text over my layout, and I am almost ready. Please click on the following image to see the full size layout

On the top of the website I will create another 2 shapes. I want to create a search box where your users will be able to search for domain names

I will create a new layer above all layers, and with Brush Tool I will make a small drawing with a smooth round brush

I will change the blending mode for this layer to Soft light

This is my final hosting layout. I hope you like it

Tutorial By GRAGPEDIA Download PSD