Skip to content

Posts tagged ‘Vista’

15
Aug

Windows 7 style Web Interface Button

I cant get myself to write a tutorial. I haven’t touched Photoshop in weeks. I feel like a down-and-out boxer, but without all the boxing. :P I am simply posting all the screenshots that I took for this tutorial. Call it a writer’s block or laziness. Your call.
















21
May

Lock and Load!!

Hey all,

My exams are finally over!! And these were the end-semester exams. That means the semester is over!! And this was the second semester. That means the first year of college is over!! This means I am now in the second year!! (Assuming of course, that I would clear all the exams. But I am sure that much can be assumed. :)


I am not at my home these days, so internet availability is a problem. (The place that I am at now, has the broadband from MTNL, but those guys are on strike… so internet works ocassionaly.. like now. :) I hate strikes. Even the movie producers are on strike (something like that. There is a fight amongst them and the distributors and the PVR chain. Due to this, no new movies are being released). So there is pretty much nothing to do, now that the holidays have started. I mean, watching movies and playing games on the computer is fun only when there is some important work to be done. Same goes for sleep. I feel sleepy when i know that something is still left to be done. If i finish my work early, poof! no sleep.

Anyways, here is a Windows 7 / Vista like wallpaper that I made in like 3 minutes (Seriously). This was just to test out Photoshop after I installed it on this new machine. (Yes, I carry the setup to Photoshop CS3 on my USB pendrive).

1280×800:

1900×1200:

I am now working on the new theme for this blog. Here is a screen-shot of the progress… Please do tell me how it looks. Suggestions and comments are required.

P.S. I really hate internet explorer. This theme, as well as another one(for someone else) is stuck in development phase due to problems in display in IE. IE6 doesnt support transparency, min/max width/height etc. This cause a real pain in the… Well, you understand. :) The theme works perfectly in Firefox, Safari, Chrome, Opera. Its only IE that screws up the design.

22
Mar

VLC Player Icon Tutorial

Hey all,

Here is the tutorial that I promised a few days back. Took me quite some time to write this one.. it is quite long. You will see :) That is probably because it is so long… Here we go…

This will be the final result:

1. Start with a document 256x256px in size. Transparent background. Once opened, create a new layer and fill it in with White.

2. Hit Ctr+R (PC) or Cmd+R (Mac) to toggle ruler visibility. These are the scales that appear on the left and top of your workspace. Next, Click and drag out from the rulers to create guides. These are the lines that will help you make a symmetric shape using the pen tool. Draw them out like this:

3. Pick up the Pen Tool. Try to draw out a path similar to the following. I have taken screenshots at almost every step/point. So imitate!!



4. Close the path by clicking on the starting point. Right click anywhere on the image, and select “Make Selection”. This will convert the path to, guess what, a selection!! Fill in the selection with the color #f5721b.

5.
Save this selection. It will be needed later if you lose the selection somewhere.

6. Pick up the Gradient Tool. Set the gradient style to Black to Transparent. One a new layer, create gradients similar to the ones shown below. I have shown a white arrow depicting the motion of the mouse. Keep the length and angle exactly the same.

7. Create a Rectangular selection covering the right half of the cone. Then go to “Select>Load Selection”. Select the selection that you saved in the earlier step. If you didnt save it, dont fret, read on.
Hold down Alt and create the rectangular marquee on the right half. Holding Alt instructs Photoshop to subtract the new selection from any previous ones that are there on the screen.

8. Pick up the gradient tool. White to transparent. On a a new layer, Create a gradient from the right of the selection to the left. Set opacity to 30%. This creates an organic reflection.

[Sorry, no screenshot for this step. See the one below]

9. Load the previous conical selection. If you didnt save it, Ctrl+Click on the thumbnail of the cone layer.
Create a gradient as shown. Set opacity to 5-10%. This will give the cone a natural looking shade.

10. Pick up the Custom Shape tool. Click on the little arrow in the upper toolbar. This will give you more options for the custom shapes. Select the one shown. The name’s “Bull’s Eye” if I remember right…

11. On a new layer, make a stretched shape as shown. I have shown the black background only for clarity. You can work directly on your icon.

It will look like the following in your image… I have made a selection around it for clarity purposes. you wont see it in your image. :)

This completes your cone. Now for the base.

12. On a new layer, pick up the Rectangular Marquee Tool. Make a selection as shown, and fill with any color you like.

13. Hit Ctrl+T to free transform it. Right-Click on the rectangle, and select Perspective.

14. Click and hold the top-right corner and drag inwards. This will give your rectangle a 3D look. Like a vanishing point. Hit Enter to accept the changes.

15. Go to “Layer>Blending options>Gradient Overlay” for the new rectangle you just created. Set the following settings. Colors are #f9b200 and #f47e00.


16. Create a selection of the layer by Ctrl+Clicking on the thumbnail of the layer. Pick up a large soft, round brush. Set color to a dark maroon. Click once in the top right corner to create a shadow for the cone.

17. Next, open the layer styles again, and apply the follwing. the color is #cb4b00.
This will make an edge reflection kind of look.

18. Copy this layer onto a new one (ctrl+J). move it down a few pixels. A good way is to pick up the Move tool, and hit the Down cursor key a few times. Go to the Layer Styles of this layer, and select the color overlay. Set the color to a dark maroon.

19. This does make it look 3D, but it looks like a shadow instead of a thick base. To resolve this, make a selection similar to the follwing. Fill it with the same maroon color. This closes the edges, to make it look like a solid base.


20. Now comes the interesting part that finishes off the tutorial.
Select all the layers that have something to with the cone. (cone, black showdows, white highlights etc.). Once all are selected, drag then out to the New Layer button. This will create a copy of each of the selected layers, and put all of these copies together on top of all other layers. Now hit Ctrl+E to merge all these layers.
Now, go to “Edit>tranform>Flip Vertical”. This is what you wiill have:

21. Move this layer to below the original cone layer. Move it down so that it aligns perfectly with the base of the cone as shown. Erase the bottom part using a large soft eraser.

Final Results after some more tweaking:::

This is the image:

This is the 256×256 PNG icon that can be used in Vista. (XP doesn’t support PNG icons, you can use an addon for Photoshop that can save images as .ICO files)

Do comment on this long, long, long tutorial… PLEASE!!

16
Dec

The Vista Interface Tutorial

Heyloz people!!

Long time no post!! Here comes a tutorial that you have all been waiting for (hopefully).
This time ’round I will be telling you how to make the popular Vista transparency effect in Photoshop. Like always, here is the finished product first:

Looking nice huh?? Well then, let’s begin!!

Step 1: The Basic Shape

Start with a suitable background. I used this:

Using the “Rounded Rectangle Tool”, and the foreground color Black, draw a suitable sized rectangle on a new layer. The placement/position doesn’t matter because this window will be movable like the real one!!

Open up the layer styles window for this layer by Right-clicking on the layer name and selecting “Blending Options”. Set the “Fill Opacity” to 0%. Mind it that this is the “Fill Opacity”, not the normal “Opacity”. This will make your layer contents transparent while retaining the opacity of the layer-styles that we will apply. Sweet huh?? :)

Next apply the following settings:



[Be sure to select "Contour"]

[The color and its opacity is totally your choice]

This completes our basic shape and effects for the Vista window. But there is still a lot more to come!! This is what you should have by now…

Step 2: Move over the basics

Ctrl/Cmd + Click on the thumbnail next to this layer to make a selection of all visible pixels on this layer. Save this selection by going to “Select>Save Selection”. Give it any name you like. I named mine “windows”.

Now, pick up the “Rectangular Marquee Tool”, and while holding down the “Alt” key, make a selection out of the LOWER half of the rounded rectangle. Let me explain… Holding down Alt ensures that what-ever you select next, is subtracted from any already existing selection on the canvas. This is what you will get:

With the Gradient Tool selected, and the forground color set to White, set the Gradient mode to “Foreground->Transparent”. Drag out from the center of the window (the one we are making) to the top of the same. Apply a Gaussian blur of 3-5px.

Reduce the opacity of the layer to 40%. This finishes the environmental reflection.

Step 3: The Details

Pick up the Rectangular Marquee Tool, white foreground color, and on a new layer, make a rectangle in white color as shown:

“Free Transform” (Ctrl/Cmd + T) this rectangle and rotate it to an angle of -45 degrees. (You can set it in the bar at the top). Hit ‘Enter’ to accept the free transformation. Go to “Select>Load Selection” and select the selection you saved earlier by the name of “windows”. Select “Intersect with Selection”. Hit OK. This will create a selection out of the areas that were intersecting in the two selections that you had made.

Hit “Ctr+Shift+I” to invert this selection. This will select everything but the earlier selection on this layer. Hit “Del” to delete. This leaves you with the white area only in the Vista window.

Apply a Gaussian Blur of about 3-5px. Pick up a large, soft eraser and rub out the right side edge of the white rectangle.

Repeat the above step to make more such reflections. 4-5 will do.

Step 4: The final touches

This finishes the window effect. To put in some material in the window, again pick up the rounded rectangle tool, and with the foreground color set to Black, make a rectangle which leaves equal spaces on the left, bottom and right, while around triple of this space at the top.

Now for the window title. Microsoft uses the Segoe UI font in size ’8′ by default. Type out the title in Black color. Open up the “Character Palette”, and change the “Horizontal Spacing” to 50. Open up the Blending Options window for the text layer, and set an Outer Glow of White color. Spread: 8%. Size: 13px.

Done!!

I will be adding the Close, Minimize and Maximize buttons soon. Will put up their details in the next post probably. That also reminds me that I have to put up a tutorial for the Bokeh effect. By the way, I learned this effect from Tutorial9.

13
Sep

Vista Taskbar Tutorial

Hey all!!

Here comes a tutorial that imitates the Windows Vista taskbar. And I think that it looks pretty good. I mean, it looks totally same as the real thing. Sometimes I amaze myself at my expertise. (Talk of being humble :) )

You can use this effect to make navigation bars on your website, or to simply make the taskbar.(Though I dont know what you can use a taskbar for…) So let’s start…

Step 1: The Basic Structure

Start with a suitable canvas. I used a 450×50 white background. We will use the “Rectangle Marquee Tool (M)” to make the taskbar. Make a new layer. Select the tool, and from the dropdown menu on top, select “Fixed Size”. Set the size to 450×30. Simply click on the canvas to make the rectangle.

Step 2: The Background

Set up a gradient from a very dark gray to black. See picture below for help.

Step 3: The glossy effect

Create a new layer, and select the “Rectangle Marquee Tool (M)”. Using “Fixed Size” with settings height: 15px, width: 400px. Simply click on the canvas to make the rectangle.

Using the “Gradient Tool (G)”, make a white to transparent gradient on the top layer, as shown:

Set the layer opacity to 60%.

Make a new layer. Select the “Single Row Marquee Tool” and make a single row selection simply by clicking on the canvas. It should be 1px or 2px below the upper edge of the taskbar.
Hit “Alt+Backspace” with the foreground color set to White, to fill it with White.

Step 4: The Buttons

We will again use the fixed size marquee tool. Set the size to height: 13px, width: 150px. Click on the canvas to make the rectangle. You will (must/should) notice that actually the vista taskbar buttons are quite rounded. To do that, we go to “Select>Modify>Smoothen”. Set the radius to 2px. The rectangle is now smoothed/rounded.

Fill the rectangle with the same dark gray as that in the gradient. Then go to “Layer>Layer Style” or simply double-click on the layer next to the layer name in the layers palette.

Next, we have to do again what we did in step 3 (the glossy effect). Make a fixed size rectangular marquee of height: 13px, width: 150px. Make the selection rounded (smoothen, 2px). Fill with white to transparent gradient from the top.

For inactive button:
Set opacity of the gradient to 60%.

For inactive button:
Set opacity of the gradient to 30%. Also go to the layer styles for the inactive button layer, and add an “inner shadow” to make it look engraved. Use settings:

Distance: 1px
Choke: 0px
Size: 1px

Step 5: The Text

On a new layer, type your text. Use font “Segoe UI” which is the official Vista font, and color “#fffdf2″, which is a little off-white. And voila, you are done!!

To make a navigation bar for your website, in the first step, instead of a simple rectangle of size 450×30, make it rounded (smoothen, 2px). That will make it look stand-alone.

Hope you liked the tutorial and were able to make the taskbar effect in Photoshop. I tried to make it as simple as possible. Please do vote in the sidebar regarding the level of difficulty of my tutorials!! And also, please do comment!!

Signing off,
The Photoshopper

7
Sep

Transparent Glass Text

Hey again!!

In this tutorial, we will make a transparent glass effect text ala Vista style. We will use layer styles to make the basic transparency and gradients+opacity to make final glass effect. I did not come up with this effect, but learned it some time back from “PSDTuts”. I have linked to it at the end of the post.
You can use this effect to make vista like glassy, shiny buttons also!! Here is what we will be making:

Lets begin…

Step 1: The Background

We need a nice gradient to set the mood. You could use the default gradients, but I made one up with 3 colors in it. To make your own gradient, select the gradient tool, and then, on top, click on the small rectangle that shows you the sample gradient.

Step 2: The Text

To make glass text, I think we will need some text :)
Here I use the letter ‘G’ in font “Monotype Corsiva”, because it gives a nice curvy G. And also, I will be writing the word GLASS.

Step 3: The Transparency

Now for the transparency and light effects. Select the text layer, and open up the blending options (Layer>Layer Styles>Blending options). Apply settings as shown:


The most important and interesting thing here is the “Fill Opacity”, that only changes the opacity of the text, not the layer styles. It is very useful, so remember it!!

Step 4: The Glass Effect

Now for the glass effect i.e. the reflection and refraction (sorry for the technical terms, but since I am doing a B.Tech in CSE, it is a force of habit :) )
“Ctrl+Click” on the thumbnail on the text layer next to the layer name, in the layer palette. This will make a selection of everything on the layer. In this case, the letter G.

After making the selection, pick up the gradient tool, and select the “White to Transparent” style. Then on a new layer, make a gradient starting from the center of the background gradient to the middle of the letter G. This gives the effect that the light is coming from the bottom right. Set the layer mode to “Overlay” to fade it into the text.

Next, on another new layer, make another similar gradient, this one starting from the top of the letter ‘G’ to the middle. Set the opacity of this layer to 40%.

Now press “Ctrl+D” to deselect the selection. Pick up the “Elliptical Marquee Tool” and make a large ellipse on the same layer.

Press “Ctrl+Shift+I” to invert the selection, and hit “Del” on the keyboard to delete the selected part. This will make the gradient end suddenly, giving it the popular glass effect.

Step 5: Final Touches

I used a star brush I downloaded from DeviantArt to make some glossy sparkles to add the finishing touch. Make these with a polygon tool if that is what you like :) . Just make sure you add them to the brightest spots on the letter.

DONE!!
You will a more detailed tutorial (the one where I learned this effect) here.
People, please do comment!!

16
Jun

Vista-like effect tutorial

First of all, I call it “vista-like effect”, and not “vista effect”. This is primarily because what I have made looks a little like the vista wallpapers. The official ones are very different. Here goes.

1.Open an image that has lots of dark and light areas.
2.Apply Filter>Blur>Gaussian Blur, with setting of 75px. (yes, a lot!) Then repeat blur a few times. You will get something like this:

3.Go to Layer>New Adjustment Layer>Color Balance.
4.Play around with settings to get something that is dark in the area you want the ribbons in. It takes some practice, as there are 9 settings to apply.

5.Using the “Elliptical Marquee tool”, make a really large ellipse such that only a portion of it is visible in the image. this will give you a nice soft curve.
6.Use a soft brush of any size you want, and color the inside of the curve you just made. make sure it is soft and even.

7.Press “Ctrl+D” to deselect, and “Ctrl+T” to free transform the curve.
8.Turn it a few degrees and place at a suitable location.
9.Set mode to “Overlay”.

10.Apply shadow settings as shown:

11.Now that you have made the first wave/swipe/ribbon, make more like these, but all of them on new layers, and all of them on “Overlay” mode.
12.I placed a Windows Vista logo, I got from the Microsoft website also. Here is the final image:

« Older Entries