Moving from Blogger to WordPress
Moving from Blogger to WordPress is a decision thats easy to take, but can be very difficult to implement. Or atleast lots of courage is required to start the procedure. Maintaining the Google Juice (PR, visitors, links etc.) is of prime importance. I am moving from http://thephotoshopper.blogspot.com to my own domain at http://designcranium.com
Read more
The Biggest Mistakes of Web Design
Find out what are the most common mistakes that you can make while designing a website, or getting one designed, and how to avoid them. Even though some effects/features might look appealing, they can hurt your Search Engine rankings, and even repel your visitors/customers away!
1. Splash Screens
) This raises the next point.
Another important point: Do NOT try to make the ads look like the content and trick the user into clicking on it. This will probably piss off the viewer. The user is more valuable to you if he/she returns to the site for another visit.
Illustrator for Beginners
Testing the deep waters of Adobe Illustrator. Find the wallpaper, link to the tutorial and a little help on saving Illustrations in raster (JPEG, GIF and PNG) formats, after the jump. Click “View Complete Article” to view complete article.
Creating JPEG/GIF/PNG in Illustrator. Need not worry!! Just check out the features in the pic above, and they are explained below: 1. All the major controls are on the right. You can see the format selection as a drop-down menu. Choose from JPEG (millions of colors), GIF (256 colors) and PNG. TO solve this issue, open the tab “Image Size” as shown in the figure above. Check-mark the option “Clip to Artboard“. This will make illustrator save only the image inside the artboard. Click Apply, and then Save. Done!! You have successfully saved the vector as a Raster!! You can find the complete tutorial that I followed here. Please comment on how you like the wallpaper. (Original Design by Chris Spooner). And please be kind, as this is my first Illustrator wallpaper and tutorial. Signing off,
Illustrator, by default, is set to save for print. That means the vector-based SVG format which retains the math involved so that the image can be stretched without quality loss.
To save in lossy formats such as JPEG/GIF, there is a nifty feature called as “Save for Web” in the “File” menu. Open that and you something scary like:
2. Quality can be set in a range from 0 to 100. With 100 being the best, but also creating the largest image in terms of memory. This is similar to the Photoshop Save option in case of JPEG.
3. Blur: Blur the image before saving. (duh)
Matte: to matte the image. (duh again) (Look up these terms in Google if needed)
4. Now the most important part that can cause come confusion. (It did for me) If your image is exceeding the size of the artboard (the image size you chose before starting is the artboard. But you can draw anywhere outside it too. This feature is not there in Photoshop). You need to save only the area inside the artboard as the image. But Illustrator tries to create an image of a larger size, including everything you have drawn, even outside the artboard.
The Photoshopper
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. I am simply posting all the screenshots that I took for this tutorial. Call it a writer’s block or laziness. Your call.
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.
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.
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!!
Awesome Bokeh Effect Tutorial
Hey all,
Here is the tutorial which was promised by me a long time back. The awesome bokeh effect tutorial!! This tutorial will also teach you how to make your own brush!! Believe me, brushes are one of the most powerful and useful tools in your Photoshopping arsenal. Now, You may ask what is this bokeh thingy?? Here is Wikipedia’s definition.
Bokeh (derived from Japanese, a noun boke ぼけ, meaning “blurred or fuzzy”) is a photographic term referring to the appearance of out-of-focus areas in an image produced by a camera lens using a shallow depth of field. Different lens bokeh produces different aesthetic qualities in out-of-focus backgrounds, which are often used to reduce distractions and emphasize the primary subject.
First, ALL HAIL WIKIPEDIA!! I mean seriously… I don’t even remember the time when I was looking for some information and couldn’t find it on Wiki first. Mark my words here: Wiki-ing is going to be the latest tech-verb after ‘Googling’.
Now to the Bokeh tutorial. As usual, here is the finished product first:
Step 1: Making your ‘+’ brush
1. Start with a 400×400px document. With black foreground color, type out a HUGE ‘+’ sign in Times New Roman font. Right-click on the layer name in the layers palette, and select “Rasterize Type”. Next, position the ‘+’ in the center of the document.
2. Go to “Edit>Define Brush Preset“. Name the brush to anything you want to. I name mine “Plus”. How original naa?
Step 2: The Background
1. Open a new document of the preferred size. I have used 2000×1600, I dunno why.
2. Select the Gradient Tool. Set the foreground color to #228fce and background to #015f94. Create a radial gradient from the center to the edges of the image.
Step 3: Set up the Brush
1. Select the Brush tool. From the dropdown menu on top, select the Plus brush that you just made. (It will be at the end of the list). Hit F5 or go to Window>Brushes.
2. Set the brush tip size to 400px. Make the following settings:
3. This will give you a nice spread out, random kind-of brush that doesn’t seem to work well if you haven’t done this before. Actually, it is supposed to be just like that. What you have to do next, will give a different result for all. Make a new layer and on it, just make a fast swipe with the brush across the canvas. You should get something similar to this:
4. Set the Blend-mode of the layer to Screen.
5. Go to Filter>Blur>Gaussian Blur. Apply a Gaussian blur of 25px.
Step 4: The Repetition
1. Repeat steps 3.3, 3.4 and 3.5 around 3 times more. But make sure that each time, you decrease the brush size to about a little more than half of the previous one. For eg. If your first one was 400px (thanks for following the tutorial word by word ), the next will be around 250px, then 150px, and finally 90px. Similarly, the Gaussian Blur will also go down. See images below for guidance.
Update:(This set of images is in reverse order. Sorry for that)
2. The final layer which has the smallest pluses, doesn’t get any blur.
And DONE!! Say Hurray!! Here is the wallpaper for download in different sizes:
Original 2000×1600 size:
Widescreen 1920×1200:
Normal 1280×1024:
Enjoy, and do comment!!
Merry Christmas!!
Hello Humans!!
Wishing you all a very merry Christmas!! May the Santa bless you
Here are 2 wallpapers to celebrate the Christmas spirit (unlike Scrooge)!!
The first one doesn’t seem to be worth a tutorial
Here is the tutorial for the second one:
1. Start with a new image, size 1900×1600. (I will now be making images in larger size on recommendation of Mayank )
2. Make a subtle dark to light blue gradient.
3. Make a christmas tree shape using the pen tool, or download mine.
4. Open the brush in Photoshop. Select the new brush and hit F5 to open the Brushes window. Apply following settings:
5. On a new layer, and foreground color set to dark-blue, make a horizontal swipe with the brush. Repeat twice using lighter colors on new layers. Merge the 3 layers.
6. Now for the snow… Search google for some nice snow flake brushes. You will find some good ones on Deviantart though. Select the new brush and apply following settings:
7. This step is all about hit and trial. Just go and blow some snow onto the canvas.
8. Now for the text. Type out in a suitable font. I have used “Chiller”. Apply following settings:
DONE!! Here is the final image:
Here is the same one which can be used once the Christmas spirit is over.
Tada!!
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.
