This is a nice photo, sure. It looks good. But immediately noticed are those sharp, boxy corners. The image appears raw and untouched. With powerful tools such as Photoshop, there is no reason this image can’t be enhanced.
By simply adding curved corners, this image will immediately become more warm and appealing.
The process
Within Photoshop, take a look at the Layers palette. The photo should be on it’s own layer, and we’re going to create another layer right on top of that.
On this layer, we are going to draw a rectangle, with the rounded rectangle tool.
Draw the rectangle on the new layer you created.
It doesn’t matter what the fill color is right now. Just try to center the rounded rectangle as best you can. Essentially, whatever falls inside this rectangle will be included in the picture.
Now, go back to the Layers palette, and select the layer that you just drew the rounded rectangle on. Double click on that layer.
The Layer Style palette should open up.
In the Advanced Blending area, slide the Fill Opacity percentage down to 0%.
Back in the Layers palette, click on the Paths tab.
With the current Path selected, click on the little arrow button, in the upper right corner of the Layers palette, and select "Make Selection..." from the select list.
In the "Make Selection" option box, make sure Feather Radius is set to 0 pixels, and Anti–aliased IS checked.
Hit OK. You should get a nice, smooth selection of the rounded rectangle that you created.
Almost done
Now, with the selection still pending action, go to Edit, Copy Merged. Create a new document, and leave the dimensions alone (they should reflect the copy you just made). In the new document, go to Edit, Paste. There you go!
The image should now have nice, smooth corners, instead of the sharp, boxy ones it had before.
First of all, be sure that Photoshop is CLOSE. Installing .ABR files could not be much easier. You simply need to copy the file to the correct directory. If you downloaded the brush set in a zip file, you can just extract the 'abr' file straight to the right place. That "right place" is in the 'Presets' directory of your main Photoshop program folder, under the subdirectory 'Brushes'. For example, using the default installation path for Photoshop CS2, my brushes reside here:
First of all, be sure that Photoshop is CLOSE. Installing .GRD files could not be much easier. You simply need to copy the file to the correct directory. If you downloaded the gradient set in a zip file, you can just extract the 'grd' file straight to the right place. That "right place" is in the 'Presets' directory of your main Photoshop program folder, under the subdirectory 'Gradients'. For example, using the default installation path for Photoshop CS2, my gradients reside here: C:\Program Files\Adobe\Adobe Photoshop CS2\Presets\Gradients\
Simply copy the file there, and the next time you start Photoshop, the gradients will be available from your gradients set menu.
Step by step procedure to create a simple object reflection. Only the layer mask and gradient tool is needed for this tutorial.
For tutorial I have used a free stock image of glass of wine
Step I
Create a new PS documents with the size 640 x 480px. Open up the image you wish to use as your reflection and copy and paste the image into the new Photoshop documents. To do this you choose Select > All then Edit > Copy. You then paste your image into the new document by selecting Edit > Paste.
You may wish to remove the background from your image.
Step II
Duplicate the layer by selecting Ctrl + J. And drag the duplicated image so that it’s directly underneath the original image. Make sure the images are touching. You image should look like below:
Now flip the duplicated image by selecting Edit > Transform > Flip Vertical. You image should now look like below:
Step III
Select Layer > Layer Mask > Reveal All. Now select the gradient tool with the foreground to transparent gradient selected. Hold down shift and drag the gradient from the bottom of the image to the top, like below:
This Photoshop tutorial will teach you how to create a simple object reflection. The effect is very easy and creates a nice effect. Only the layer mask and gradient tool is need for this tutorial.
For tutorial I have used a free stock image of glass of wine which is available at: www.sxc.hu
Object reflection in Photoshop
Step 1
Create a new Photoshop documents with the size 640 x 480px. Open up the image you wish to use as your reflection and copy and paste the image into the new Photoshop documents. To do this you choose Select > All then Edit > Copy. You then paste your image into the new document by selecting Edit > Paste.
You may wish to remove the background from your image.
Step 2
Duplicate the layer by selecting Ctrl + J. And drag the duplicated image so that it’s directly underneath the original image. Make sure the images are touching. You image should look like below:
Now flip the duplicated image by selecting Edit > Transform > Flip Vertical. You image should now look like below:
Step 3
Select Layer > Layer Mask > Reveal All. Now select the gradient tool with the foreground to transparent gradient selected. Hold down shift and drag the gradient from the bottom of the image to the top, like below:
Mysteries Of The Favicon.ico — How To Create A Favicon In Photoshop
A Favicon is a little custom icon that appears next to a website's URL in the address bar of a web browser. They also show up in your bookmarked sites, on the tabs in tabbed browsers, and as the icon for Internet shortcuts on your desktop or other folders in Windows. And when I say little, I mean 16 pixels by 16 pixels. So if you like a good design challenge try your hand at this one.
All you need to add a Favicon to your site is a Windows Icon (.ico) file usually called favicon.ico that you upload to the main directory of your website. Nowadays, most browsers besides Internet Explorer can use a GIF (including animated ones) or PNG (including full transparency) instead. But since all browsers including IE understand the .ico format, and because it's got a lot of intriguing features that GIFs and PNGs don't, read on to find out how to make one.
Download The Plugin You'll need the Windows Icon (ICO) file format Photoshop Plugin to export to the .ico file format. You can download the plugin from Telegraphics (temporarily unavailable - try here for now). The plugin reads and writes ICO files in 1, 4 and 8-bit Indexed and 24-bit RGB modes, and also reads and writes 32-bit "XP" icons (with 8-bit alpha channel). Make sure to install the plugin before you begin this tutorial.
Let's Begin Because 16 x 16 is such a small canvas area, it can be very difficult to be creative. So instead start your project with a canvas set at 64 x 64 (always use even multiples when you plan on resizing files). Do this by selecting File>New, and opening a new canvas that is 64 x 64 pixels in size.
The Design If you already have a logo you should reduce it to the 16 x 16 size to see if it holds up. If it doesn't look good at this size, work with the 64 x 64 canvas and try creating a simple design that incorporates colors from your website's palette.
When you're ready to test the design select Image>Image Size menu and enter 16 x 16. Click on Resample Image and choose "Bicubic Sharper" from the drop-down menu (CS only for this step). This is the best setting for making sure that an image doesn't blur as it's being resized. If it’s still not sharp enough, go back and oversharpen, oversaturate and/or heighten the contrast of the original image and then resize it again.
If you feel the icon is not quite what you wanted, just keep tweaking it until it is perfect. At this tiny size it can take a few tries before you get it right.
Saving The Custom Icon Go to File>Save As and make sure you name the file favicon.ico. Under Format you must choose Windows Icon (ICO) from the pulldown menu. This format will only be available in Photoshop after you download and install the plugin. In the next step you'll need to upload this new file to the root folder of your website, so it's a good idea to navigate and save it to that location on your hard drive now.
Uploading The Favicon.ico File Connect to your server and upload your Favicon.ico file to your website. You must place it into the same directory as your home (index) page, and leave it loose, making sure not to put it in an images directory or other folder. The standard location is the “root” folder of your site, which is same directory as your home (index) page, not inside an images directory or other folder. If you put it there (and name it favicon.ico), most browsers will find it automatically.
Some browsers will look for a direct link in the HTML source code to your site's favicon.ico file. You can help these browsers by adding this link in the head section of each page on which you want the Favicon.ico to appear.
Here is the link code to include:
Once you've added this code, upload all of your modified pages.
(Some people suggest that the following is actually more correct: You can use both if you want!)
If you want to use a GIF or PNG instead, use this format instead (just remember that it won’t work in IE):
or
Testing If your new Favicon does not show up right away, try refreshing the page or clearing your cache — or put a '?' at the end of the url, which will trick a browser into thinking the page is new and not cached.
Troubleshooting Browser Issues: Microsoft IE 6 for Windows will not display the favicon until the URL has been added to the favorites. Or try this trick: go up to the address bar, click on the existing (usually the IE default) favicon, then "jiggle" it a bit and let go. That will reload the page and should get the new favicon to show up.
Safari for the MAC will not display an updated favicon until the browser cache has been cleared. But choosing ‘empty cache’ from the menu won't help because Safari stores favicons in a separate cache. Go to Edit > Reset Safari, and check “Remove all website icons”. If you can’t find that, you must empty the icon cache yourself. Look for it in User>Library>Safari>Icons. On the Windows version of Safari, find C:\Documents and Settings\YourUserName\Local Settings\Application Data\Apple Computer\Safari\WebpageIcons.db. Quit Safari, delete the file, restart Safari. (Sometimes you need to restart the computer too.)
On FireFox, clear the cache and restart the browser. On Opera, just refresh.
Windows can actually be the most beligerent about not updating favicons for Internet shortcuts (on your desktop, for instance). This tip from www.vistax64.com/tutorials:
1. Right-click on the Desktop.
2. Select Personalize and select Display Settings (or simply Settings on XP).
3. Change the Color from 32 bit to 16 bit and click Apply.
4. Change the Color back to 32 bit and click Apply.
File Format Not Available: The Windows Icon (ICO) file format will not be available until you have downloaded and installed the plugin, and then Quit and Restarted Photoshop.
Troubleshooting Update One person who had trouble with Internet Explorer 7 has sent us a little tip:
I had some trouble with IE 7 — but the addition of these 2 lines of code solved the problem:
Multi-Resolution Favicons So if you’ve gotten this far, you can already see your favicon in your browser’s address bar, and it probably looks great. Feeling ambitious and want to go one step further?
In Windows especially, favicons show up all over the place. For instance, if you put a shortcut to a website on your desktop, Windows often uses the favicon of the site as the shortcut icon. But on the desktop, Windows uses a much larger size icon, usually 48x48 pixels. When this happens, Windows has to scale up your favicon and it will probably look blurry and not so great anymore.
You can fix this. One of the neat things about .ico files is that they can contain multiple versions of the icon, at different sizes and color depths (kinda like an animated GIF contains multiple frames). When they do, Windows uses whichever size and color depth is most appropriate. For the sizes, 16x16, 24x24, 32x32 & 48x48 pixels are most common, and all can put bundled together in a single .ico file.
Creating a multi-resolution icon isn't much harder than what you did to create your 16x16 favicon, Telegraphics, the same place you got your favicon plugin, also has another plugin http://www.telegraphics.com.au/sw/info/icobundle.html (temporarily unavailable) that allows you to bundle multiple icons together in a single .ico file. (There are also many standalone tools that will create a multi-resolution icon for you from a single starting image. Here's a couple that are free to try: www.sibcode.com/icon-studio and www.aha-soft.com/anytoicon.)
As for color depth... again, if you're on Windows, you may have noticed before that some icons on your desktop have jaggedy (aliased) edges, while others blend smoothly on the edges. The smooth blending is because those icons contain a version with 32-bit color depth, which allows true transparency, just like your layers in Photoshop. You can create a 32-bit version of your icon, along with 24-bit (16 million colors, gif-like transparency), 16-bit (256 colors) or even 8-, 4- or 2-bit... all of which could again be stored in one .ico file!
So if you want to make sure your favicon looks great wherever people might see it, try creating a few versions in your favicon.ico file. For example:
But don’t go too crazy, because every variation makes your favicon a little bit bigger, which means it will take longer to download.
Inspiration If you need some inspiration have a look through this nice collection of favicons. Also look at the nice categorized list of 50 remarkable favicons at Smashing Magazine. You might find something that triggers an idea for your own.
How To Resize Images And Maintain Original Sharpness You have a nice big beautiful photo. It is gorgeous. But you need it much, much smaller, and by the time the file is down to the right size, you might find that the image has started to take on a blurry look. This is a real problem with resizing images, but luckily in Photoshop there's a very simple solution.
This tip will only work with Photoshop CS and CS2. If you don't have a CS version yet I recommend you try and get one as soon as you can, because they are full of powerful new features. For earlier versions of Photoshop there's a workaround at the end of this tip.
When you want to reduce an image go to the Image> Image Size menu. Click on Resample Image and choose Bicubic Sharper from the drop-down menu. This is the best setting for making sure that an image doesn't blur. The example photo of the flower started at 2,000 pixels across. I stepped it down to 250, and then again to 125 with almost no loss of sharpness. For enlarging an image select Bicubic Smoother.
I found this to be such an effective trick that I wished it had been the default setting in Photoshop for the Image Size menu from the start. Then I discovered I could set it as the default myself. All you need to do is go to Preferences> General and you'll see Image Interpolation and there you can pick Bicubic Sharper from the choices.
Another thing to keep in mind when resizing is to try to do it only once on an image. Many people will resize repeatedly as they search for the perfect fit for a design element, and then end up with an image with a lot of blur. It's always better to experiment on a duplicate of the image. Then, when you've settled on the final dimensions, you can go back to the original and resize it just once.
Pre-CS Workaround In earlier versions of Photoshop simply zoom out so that your window and image are at either 50% or 25%, and then take a screenshot of the image window at this new reduced size. You'll find that the image will maintain its sharpness. Now open the screenshot in Photoshop, and crop and save. The trick to making this work is to use either a 50%, 25%, or 12.5% view size before making the capture. If you view the image at 66.7%, 33.3%, or 16.7%, the image will not be as sharp due to the way Photoshop draws images at those sizes.
Troubleshooting Never resize a GIF image. First change the mode to RGB Color (Image> Mode> RGB Color), and then resize. You can still save your resized image as a GIF, just do not apply resizing while the image is in the GIF mode.
A Favicon is a little custom icon that appears next to a website's URL in the address bar of a web browser. They also show up in your bookmarked sites, on the tabs in tabbed browsers, and as the icon for Internet shortcuts on your desktop or other folders in Windows. And when I say little, I mean 16 pixels by 16 pixels. So if you like a good design challenge try your hand at this one.
Go to File>Save As and make sure you name the file favicon.ico. Under Format you must choose Windows Icon (ICO) from the pulldown menu. This format will only be available in Photoshop after you download and install the plugin. In the next step you'll need to upload this new file to the root folder of your website, so it's a good idea to navigate and save it to that location on your hard drive now.
Browser Issues: Microsoft IE 6 for Windows will not display the favicon until the URL has been added to the favorites. Or try this trick: go up to the address bar, click on the existing (usually the IE default) favicon, then "jiggle" it a bit and let go. That will reload the page and should get the new favicon to show up.