Photoshop – Photoshop To WordPress

Photoshop

Artistic border to an image

Open a one-layer document, then click the Background on the Layers panel.
Choose the Rectangular Marquee tool (M or Shift-M), then draw a selection marquee. Position the marquee where you want the border to be.
On the Options bar, click Refine Edge.
In the Refine Edge dialog, choose On White view (W), then adjust the Radius,Smooth,Contrast, and Shift Edge values to roughen the edges.
From the Output To menu, choose New Layer with Layer Mask, then click OK.
Click the Background, then press Shift-Backspace/Shift-Delete. In the Fill dialog, choose Use: White, Mode: Normal, and Opacity: 100%, then click OK.

Just check your image it was so easy.

Photoshop

Step 1

create a document in Photoshopwith an dimensions of 600 x 400 px. Fill the background colour with #f0e9dd.

Step 2

Select Ellipse tool (U). Create a nice circle with the size you like.
Next, select the pen tool (P). Ctrl + click on the circle you just made. This should make the anchor points of the object show.
Again ctrl + click, but now only on the lower anchor point. You should see this now:

Step 3

With that anchor point selected, hold shift and press your down arrow twice. This should drop the point 20px down. There it is, the sort of upside down egg shape.

Let’s style that thing up!
All there is on there is:

· Gradient Overlay

· Inner shadow

· Stroke

Settings below:

Step 4

Next lets make a small shape on the bottom of of main shape as shown in the below.

I have used the pen tool (P) . next use some layer styles.

Drop Shadow
1. Blend Mode : Normal, Color #5C5C5C
2. Angle : 90 Degrees
3. Distance : 1 Px
Inner Shadow
1. Blend Mode : Multiply, Color #202020
2. Opacity : 50%
3. Distance : 2 Px
Color overlay
1. Blend Mode : Normal, Color #202020.

Now the image looks like same below.

Step 5

Lets create an inside of the colored circle.

Drop Shadow
1. Blend Mode : Normal Color (#FFFFFF)
2. Opacity 40%
Inner Shadow
1. Blend Mode :Normal Color (#000000)
2. Opacity : 40%
Inner Glow
1. Opacity : 15%
2. Color : #000000
Gradient Overlay
1. Overlay colors from #515151 to #393939

Like this:

Step 6

We’ll be adding text to this later.

Now it’s time for the orange loading bar. I guess there are more ways to make this. But I took the easiest approach. First, create an Ellipse again. about 10px larger than the one above. Make sure the layer is set beneath the dark ellipse and above the main shape.

Now we’re gonna modify this shape a bit with the pen tool by adding some anchor points and curving some lines. Try to make it like this:

This shape has 5 added layer styles, and next to that some lighting layers above which we will get to after this.

Layer styles:

Drop Shadow
1. Blend Mode : Normal color (#000000)
2. Opacity 55%
Inner Shadow
1. Blend Mode Hard light : Color (#FFFFFF)
2. Opacity : 35%
Inner Glow
1. Blend Mode : Overlay
2. Opacity : 30%
3. Color :FFFFBE
4. Size : 10Px
Color Overlay
1. Color : #FF7E00
Stroke (with gradient)
1. Size : 1Px
2. Position : Outside
3. Opacity : 55%
4. Fill type : gradient (colors from #353535 to #494949

It should be like this

Step 7

Now, make a new layer, (ctrl-shift+N) and ctrl click on the orange shape layer thumbnail. This should bring up a selection.

Put the new layer selected on Blending mode Soft light, grab the brush tool with about a 40px radius and white colour and start playing around to make some highlights on the orange circle.

Than, again a new layer. Still with the selection of the orange circle. Again on soft light, pull down the opacity to about 60-70% and pull a standard black-white gradient from top to bottom.

Now you should have something like this:

Step 8

Load the selection of the orange layer again (ctrl+click on the layer thumbnail). Rasterize the new shape we made and hit delete. This should delete all of the overlapping on the orange. Doe the same thing again, but now load the selection of the inner dark circle. So you only have the visible of the circle left. (The one-quarter piece). Let’s give it some styling.

Drop Shadow
1. Blend mode : Normal , Color #484848
2. Angle 120°
Inner Shadow
1. Blend Mode Multyply, Color (#000000)
2. Opacity : 75%
3. Angle : 90 °
Gradient Overlay
1. Colors From #000000 to #575757

Few things left to do.

Add the numbers in the middle.
Highlights on all the shapes.
Simple background shadow

Grab the text tool, with the Open Sans font, typ 75% in the middle on everything (16px, bold #ddd3c3). Give the text a drop shadow, deselect the Global lighting option and set the direction to -90 degrees. distance: 1, spread: 0, size: 0. Colour: #000.

Another text layer beneath the percentage. This will show the file size, or download speed. Whatever you like. Same styling same options, only not bold and 10px big now.

All set, now we have this:

Download the original PSD file here

Photoshop

Shape Buttons

Step 1

Create a Shape

Step 2

Copy the Layer Style

Step 3

Create 3 White shadows using different layers and apply overlay and soft light effect

Step 4

Create text.

Very simple! Enjoy :)

Download the source file Below.

[like_to_read][/like_to_read]

Photoshop

How to Aligning and Distributing Layer Content

The Move Tool has align and distribute functions in its tool options. These are useful for aligning and distributing the position of content on multiple layers in relation to each other or in relation to a selection.

Aligning Layer Content

Align and distribute only work on pixels with an opacity greater than 50%. If an object like the gradient circle from the last lecture was used, Photoshop would only consider the center areas of the circle in deciding where to position the object. There are 12 buttons in the Tool Options bar for aligning and distributing. We’ll start with the align function which uses the six buttons on the left.

If you’ve had experience with a word-processing application, you’ve probably aligned text so it’s left-aligned, center-aligned or right-aligned in relation to the margin. Photoshop alignment works in much the same way. In order to use the alignment function, the objects you want to align must be on separate layers and a minimum of two layers must be linked or selected. If the active layer isn’t linked to any other layers and no other layers are selected, the align options will be greyed out

The icon on each button is a visual representation of what the button will do. Admittedly, the icons can be confusing until you get used to them. If you have tool tips enabled, holding your mouse over a button will display its function. The first set of three buttons is for vertical alignment. The second set is for horizontal alignment.

The steps for aligning are:

Make sure the active layer is linked to other layers that contain the content you want to align. Alternately, select two or more layers at the same time. To select contiguous layers, select two or more while holding down the Shift key. To select non-contiguous layers, hold down the Ctrl(Cmd) key as you’re clicking layers to add them to the selection.
Select the Move tool.
Click on one of the alignment buttons.

The table below shows three objects on separate layers that are linked. The top image shows how they were positioned to begin with. Each of the following six images shows how they would align in relation to their starting positions. The red lines were drawn in to show the edges or centres that serve as the alignment point.

Alignment Options

Original Layer Positions
Vertical
Vertical	Top Edges	Vertical Centres	Bottom Edges
Horizontal
Horizontal	Left Edges	Horizontal Centres	Right Edges

The Active Layer is the Boss

The active layer’s contents will affect the outcome of aligning. For example, in the Left Edges example above, the pink rectangle was on the active layer. When the alignment was applied, the other two objects aligned to the left edge of the pink rectangle. Switching now to the table below, the first of the three images shows the same thing. The second and third images show what happens if the active layer contains the green object or the blue object.

Aligning to the Active Layer
Original Layer Positions
Left Alignment (The red arrow points to the active layer.)

Aligning to a Selection

The other option for aligning is aligning to a selection border. If a selection has been made in the image, clicking on an alignment button will align the objects to the selection, rather than to the object on the active layer. In this example, Align Left Edges was used. The result was that the left edge of each coloured object was aligned to the left edge of the selection. When aligning to a selection, you can align a single layer.

Menu Commands for Aligning

All of the Alignment options are available in the Layer > Align submenu. The Move tool doesn’t have to be selected when using the menu commands.

Distributing Layer Content

The distribute function inserts an equal amount of space between the designated edges or centres of objects on three or more layers. Objects on the middle layer(s) are moved in order to accomplish this. Like aligning, objects must be on separate, linked (or selected) layers. The distribute buttons are the six on the right side of the Tool Options bar.

The procedure for distributing is exactly the same as it is for aligning. However, it doesn’t matter which layer is the active layer when distributing. The results will be the same. The presence of a selection marquee doesn’t affect the results.

Distribute Options

Original Layer Positions
Vertical
	Top Edges	Vertical Centres	Bottom Edges
Horizontal
	Left Edges	Horizontal Centres	Right Edges

In the examples above, the red, two-headed arrows show how the amount of spacing is equal between the alignment points of each pair of objects. The pink and blue objects remain in their fixed positions. The green object in the middle is shifted around to create the proper alignment.

How to Align and Distributing Layer Content

A useful example of the distribute function is when setting up text on separate layers to create a graphical menu for a web page. Once you create the text layers, you’ll want to align them. You’ll also want to have an equal amount of vertical spacing between each menu item. The example to the right shows a vertical menu that has been left-aligned (1) and then distributed (2).

If you were to measure the distance between the vertical centres of each pair of text items, they would be identical. Keep in mind that only the middle item(s) will be shifted to assign equal spacing between all items. In the text example, the top and bottom text didn’t move during distribution. If you want less overall space between items, you’ll have to move the top and bottom text closer together before applying the distribute function.

Menu Commands for Distributing

All of the distribute options are available in the Layer > Distribute submenu. The Move tool doesn’t have to be selected when using the menu commands.

Aligning and Distributing Layer Content Summary

The Move tool has align and distribute functions that are accessed through 12 buttons in the Tool Options bar.
Objects can be aligned in relation to each other or in relation to a selection marquee. Objects are only distributed in relation to each other.
Only pixels with an opacity value greater than 50% will be considered for the purposes of aligning and distributing.
Objects must be on separate layers that are either linked or selected in order to use these functions.
There must be at least two linked or selected layers to use the align function. When aligning to a selection border, a single layer can be used.
There must be at least three linked or selected layers to allow distributing.
When aligning, objects will be aligned to the object on the active layer unless you’re aligning to a selection. It makes no difference which layer is active when distributing as long as it’s one of the linked or selected layers.
If you use menu commands to align or distribute, the Move tool doesn’t need to be active.

Photoshop

Creating a Corporate website Template in Photoshop

Step 1

Create a new Document in the Dimensions of 1024 X 768 Pixels.

Step 2

Now create Guides to manage our Workspace.

Create Guides at 140 Px. and 1140 Px. the our work area is visible by 1000 pixels.

Step 3

Change Foreground Colour to Grey(#333333)

Now select the Rectangle Tool (U) from the tool box and create a rectangle box with a width of 1200 Pixel and Height is 100 pixel.

Create a new Layer By clicking Shift+Ctrl+N after fill the Layer with Front ground colour(#333333) and name the layer to header Back ground.

Right now it looks like some light black colour is filled on the top of template. lets make some lively feeling for this.

For this just give some Noise to the layer.

choose Filter > Noise > Add Noise.

When the pop up shown, click OK button. And fill Amount with 0.8

Ok now its look some better.

Step 4

Now we will create the Navigation menu.

Select Horizontals type tool (T)from the tool box and create a text layer at little below Right side of header.

don’t forget to make the text as right align.

The parameters of text tool are

Font : Helvetica
Font Type : Bold
Font Size :12 pt
Font Color :E6E6E6

Step 5

Now we will create Logo.

Select Horizontals type tool (T) from the tool box and create a text layer at little below Left side of header.

The parameters of text tool are

Font : Mistral
Font Type : Bold
Font Size : 48 pt
Font Color : E6E6E6

Step 6

Now get image from resource images with an dimensions of 800 px and 500 px .(Most of the times from the client or else from the stock photo).

Make the image to horizontally Center of the page and just below our header.

Now let’s make shadow below the image. Select Rectangle Tool (U)then set the size into 530px by 70px. Change the color with black and name it dark.

Step 7

Now Transform (Ctrl+T). Edit> Transform Path > Perspective.

Step 8

we need to make the box blur. Filter > Blur > Gaussian Blur. enter the radius is some 23 Pixels as shown in below Image.

Ok guys now the shadow looks great.

Step 9

now we will make Slogan for the website, Select the Text tool (T), and type “Creative designs for your website” just below the Shadow. it didn’t look great so create some button at the end of the slogan text.

Select Rounded Rectangle Tool (T), and make the Radius 10px and the size 200px by 50px. Name the layer as Button.

and just give a stroke of 1 Px in Grey colour (#CCCCCC)

Step 10

Now create a text layer with White Text color Whit for text on button

you can make more attractive the button by adding some more shapes on the button.

Step 11

Now create one background for the total web site with a color of light Grey (#EEEEEE) and put it bottom of all layers.
Let’s create one line that try to divide image content of the website, select Line Tool (U)then make it 960px with color #ffffff and name it with Line 1 then duplicate , move down keyboard 1 time, and change the color into #999999.

This two layers make light grey with shadow effect.

Step 12

now lets come to create some content in the page. Select the Rectangle Tool (T) and create one box with sizes of 215 X 170 Pixels and fill the box with Grey color (#CCCCCC).

Now Duplicate the box for 3 time. totally we get 4 boxes and distribute them into horizontally center.

we will put image on the box, but before that, we need to make sure that the image are located in the middle of the box with right angles. Select layer(Ctrl+Left click) into active and choose Select > Modify> Contractthe fill it with 7px.

Now fill the Selection with White Color (#FFFFFF).

Do the same for all the other 3 boxes.

Step 14

Now get some images to fill these 4 boxes. and allign in side the white color.

Step 15

Now we will add Text and descriptions below the image. Select Text Tool (T)and fill the same as shown below.

Create one more box on footer with an width of 100Px height with a color of light grey(#31334)

Step 16

Now its time to create footer

Take text tool and type as recent posts with an font color of (#E2E2E2)as shown like in below image.

Lets add some text on on below it

Step 17

As shown above its not looking good there lets make some additions there. Make a new document of 6px by 6px. Zoom until a column is seen as 1px. Select Pencil Tool (B)and do the following.

now we will define this image as a pattern. after that we can use it in our template. Edit > Define pattern change the name to psd2web pattern.

Step 18

now get back to our template file and select rectanguler marquee Tool (M) and make th size by 210 X 7 Px.

Select the area below the RECENT POSTS and create a new layer and apply layer blending options > pattern overlay. as the paatern we created recently

Step 19

Now create one more line to separate the posts.

Step 20

We are almost finished now you have to add just copyright information in the footer.

Select the Text Tool(T) and write the copyright information on bottom box.

Download the original Source file

Photoshop

Photoshop buttons

here I am attaching the few free buy now and purchase buttons.

Download the original source files here

[like_to_read][/like_to_read]

Photoshop

Good PHOTOSHOP color Swatches collection

Hi guys here I am attaching my collection of PHOTOSHOP brushes

download here

Photoshop

8 and 16 bit per channel in photoshop

Photoshop knows two data modes:

• 8 bits per channel

• 16 bits per channel

WHY USE 16 BITS PER CHANNEL?

Many digital SLRs allow 12 bits per channel capture and this is later represented as 16 bits per channel in Photoshop (mostly 16 bit TIFF). If the images coming from your camera were perfect, these 4 bits would not make much of a difference as most printers only use a maximum of 8 bits. However, an image that does not require some minor correction is very rare. Once the saturation or contrast of a color image is corrected, the actual color information is soon reduced (due to rounding errors) by one or more bits. If you started with eight bits, you might end up having only six bits of real color information per channel left. The not so smooth color gradients indicate this loss. Starting with 12 bits ensures there is still a sufficient amount of color information available after even major corrections.Note: Stay as much as possible in 16 bits as you can afford (memory, disk space and performance). The test.Here is a test you can perform to experience the 16 bit vs. 8 bit difference. Open a photo in Photoshop, which is in 16 bits. Now perform some curves or levels. When finished changing the levels have a look at the histogram in the “Levels” dialog box. Open a photo in Photoshop but convert it to 8 bit just after you open the file and then do the same curves and levels operations. In the above figure you see is a histogram with many gaps. This indicates lost data and shows up in an inferior gradient smoothness, or posterization. Note: On the other side these gaps should not make you nervous. If the photo and print look fine, that’s all that counts. Conclusion: Remain as long as possible in the 16 bit mode.

Why would you ever use 8 bits per channel if 16 bits is so much better? Using 16 bits:

• Takes longer

• Needs more memory

• Creates larger files

• If you work with versions of Photoshop prior to CS many

operations (e.g. layers) are not available for 16 bits/channel. Before Photoshop CS was released, all our work was done in 8 bit layers and we also got good results. But if you have enough disk space, memory and fast processors, 16 bit is the best way to go.

Photoshop

Creating on off switches for your site

Hi All

Here i am giving the Model On Off switch.

Preview

[like_to_read][/like_to_read]

Photoshop

Creating animated Melted text in Photoshop

Step 1

Create a new document in Adobe Photoshop with an dimensions of 500 X 500 Pixels.

Step 2

Fill the background colour with Black (#000000).

Image with Black background

Step 3

Create a text by using Text Tool for melting effect here i am taking the text as Melting text, with an text color of White (#FFFFFF).

Image with Black background and white text

Step 4

Now go to blending options shown at bottom of layers panel and select Bevel & Emboss options.

Bevel And emboss Options

Step 5

Now Rasterize Right click on the text layer and select Rasterize select ok.

Step 6

Duplicate the text layer by pressing Ctrl+J Now Apply the filter Filter > Liquify (Shift + Ctrl +X) now drag on text it will be blurred.

Image with Black background and white text

Step 7

Repeat the step 6 until the text totally blurred.

Image with Black background and white text

Now open Animation Window > Animation now duplicate animation Frames duplicate layers that as many layers you have created in step 6.

Step 8

Duplicate the Animation layers as many as duplicated layers created in step 6.

Step 9

Now select frame1 & then Hide the all Layers beside Original Layer with the help of remove the Eye symbol.

Step 10

Now select the Frame 2 and select the second layer in layers list and hide visibility of remaining layers.

Step 11

Do the same for all layers Like step 10.

Step 12

now select the looping options shown bottom of animation window and select forever and change the frame delay time to 0.5 Sec.

looping options

Step 13

Now we have to save the image for web and Devises (Alt + Ctrl + Shift +S).

Select Gif 128 No dither from popup window and press Save.

That’s it Here is our final image.

Final image

Download the original file

Photoshop

Creating Image Poster with text

Lets prepare an image which will looks like image prepared by text

Step 1

First we are going to create a new document in Photoshop with 1024×800 pixels with all the default settings.

Fill the background layer with black color.

Step 2

Select Horizontal Type Tool (T) and place any text (white color, caps on, font Arial) filling all background as you can see below. Only use one text layer.

image with text

Rotate the text by 45 Degrees

45 degrees rotated image

Step 3

Open Another image and copy it to our canvas over text layer.

Go to Edit > Free Transform and resize photo to something similar to what I have.

photo

Step 4

Select text from text layer (Ctrl+left click on text layer thumbnail in layers). Press Ctrl+Shift+I to invert selection. With selection active, select photo layer and press Delete to clear selection contents

That’s it you are done.

Download the original PSD file here

Download Original PSD

Photoshop

Creating an Animated Loading GIF in Photoshop

Step 1

a. Create a new Photoshop Document with dimensions of 200 x 100 px.
b. Create a new layer (Shift+Ctrl+N) and select the Marquee tool (M).
c. Set Style to Fixed Size in the option bar with a Width: 4px and Height: 20px: (As shown like in below imaged)

Fixed Size

Step 2

Now just click on the canvas and a selection of these dimensions will be made automatically as 4 X 9 Px:

In The new layer, paint the selection with Black (#000000),

Step3

Now Duplicate The Layer . Select the Move tool, hold Shift and press the down arrow key four or five times – shift will move the layer in increments. We should now have two layers like so:

Duplicating the layer

Merge the layers Select the two layers and press Ctrl+E to merge the layers. Now duplicate the layer and Goto Edit > Transform > Rotate to 22.5 Degrees, and holding down the Shift key, rotate the duplicated layer to 22.5 degrees again do the same until you get the following image .

Now we should have 9 separate layers .

step 4

Next, we will change the color for them.Starting with the first, open up the layer styles and add a color overlay of light gray (#999999). Go for zoom in for a better look. Now right-click the layer you just added a style to and choose Copy Layer Style, then proceed to Paste Layer Style on each of the other, so we have this:

Step 5

Now let’s open up the Animation Window by going to Window > Animation.
You should see something like this.

Animation window

This is a timeline of our animation. Each frame shown in here will play in order for a set number of seconds.
set the frame to 0.1 Second.
We want to create different frames with different ‘spokes’ colored, in sequence.
So let’s start by changing the colors of the first spokes. Let’s change the color of the first three like so, fading from Black (#000000) to light gray(#999999).

We have our first frame. Now let’s click on the New Frame button and then the existing frame will be duplicated. Making sure our second frame is selected, let’s change the colors again – we can copy the layer styles if we want to move the colors along one spoke: You should notice that frame one remains the same and frame two will accept our changes. Now we only need to repeat this a few more time – one frame per spoke. Make sure you click on the New/Duplicate Frame button before changing the layer styles again!.
Once we’re done, we should have a timeline that looks like this:

full time Line

We can click the Play button at the bottom of the Animation window to see a preview. If the animation is too slow, we can change the duration in the bottom right corner of each frame. This specifies the duration for each frame to be visible. Let’s try 0.1sec. Hold Shift and select all the frames in the window, then choose 0.1 seconds (or choose Other and try 0.05 – or whatever you want) on one of them. This will change all of them, because they’re all selected.

Step 7

To export, goto File > Save for Web & Devices. Choose GIF from the DropDown menu – 128 being the best quality. And the dither will be 0.
you can also preview it here as well, using the controls buttons near the bottom: Finally, this is what our Animated loading GIF looks like:

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

preview

Step 1

Step 2

Step 3

Step 4

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Step 14

Step 15

Step 16

Step 17

Step 18

Step 19

Preview

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Step 1

Step 2

Step 3

Step 4

Step 1

Step 2

Step3

step 4

Step 5

Step 7

Search the site