Herself's Webtools

Scripts, HowTos, Templates, Plugins, Widgets, Tips

Archive for the ‘graphics’ Category

How to create iPhone icons and separate page icons

with 2 comments

Creating icons for iPhones and the iPod Touch is not all that different than creating bookmark icons. 

First you create a 57×57 png, 72×72, 114×114, and 144×144 image.

If you want one icon for all of your website or a default for pages that do not have individual icons then just name your images:

apple-touch-icon-57×57.png
apple-touch-icon-72×72.png
apple-touch-icon-114×114.png
apple-touch-icon-144×144.png

and upload them to your home directory.

If you are on Blogger or some other software where you can’t upload the icon you can place it anywhere on the web and create the following link in the ‘head’ section of your pages:

<link rel=”apple-touch-icon” href=”http://your-icon-location.com/your-icon-name.png”>

If you have different pages people might wish to bookmark and you wish to have a separate icon for each then:

– create the icons
– upload them to the root directory of your website
– In the head section of pages that you wish this icon to appear add the following:

<link rel=”apple-touch-icon” href=”http://your-site.com/icon-name.png”>

I tried doctoring photos and shrinking them and using them and the results were pretty good.  Gimp works well for creating icons this way.  One site reported that creating larger icons and letting Apple convert them resulted in clearer pictures. It didn’t for me but if you are using photo images you should give it a try.

Apple will round the corners and gloss up your icon.  You just need to create the square image and let Apple do the rest.  ‘Trust the force’. ;-)

I could not get this to work on an old section of a website that uses frames.  It may or may not work on framed sites.

If you change or add an icon it does not update on users phones/touches.  It must be rebookmarked for the new icon to appear.

Written by Linda MacPhee-Cobb

March 12th, 2008 at 5:00 am

How to create HDR images in Gimp with a single image

with one comment

HDR images are normally shot with your camera set up on a tripod and several images are taken of the same view in various lighting conditions. Then you layer the images on top of each other and blend them. If you want to learn how to do proper HDR images in Gimp try Flickr – Discussing HDR in Gimp. You’ll find everything you need there. Or try the Gimp blending exposures tutorial.

But if you are like me and taking wildlife shots you will find that the wildlife generally isn’t too keen on sitting and posing for several hours while the sun moves. Or maybe the local security officer is wiggy about you being parked in front of a building for several hours with a camera. So you only have one image to make it work.

before:

after:

First make a copy of your photo and open it in Gimp. ( You know better than to work on your originals right? )

Open up a layers dialog ( Dialogs->Layers )

Create a copy of the layer by clicking on the double image button at the bottom of the layers window.

Hide the top layer by clicking on the eye.

Select the bottom layer by clicking on it.

Go to your image and select Colors->Levels then Auto->OK

This makes your whites whiter and your blacks blacker. Don’t worry about whether it looks ok or not.

Go back to the Layers window and click the eye to make the top layer visible again

Click on the top layer to select it.

Select Mode->Multiply

Now adjust the opacity until you are happy with the image.

On darker images you might find Mode->Overlay works better

Also you might also try adjusting just one color in your color levels. In the Levels box Channel has a drop down menu – you can select all or a color to adjust.

On some images I adjust the levels on the top layer instead of the bottom. You want to experiment a bit and see what works best with your photos.

Another option is to open Filters->Lighting effects and add a light to one layer before blending the photos.

Here are Some excellent examples of HDR
And here are some more to get you motivated.
20 Beautiful HDR Pictures

Written by Linda MacPhee-Cobb

February 6th, 2008 at 5:00 am

Posted in gimp,graphics,how to

How to turn your photo into a 3d wood carving in Gimp

without comments

Before:

After:

1) Open a copy of your photo in Gimp
2) Select Dialogs->Layers ( a layer box will open )
3) Click on the copy layer button ( button with two photos on bottom row of buttons )
4) Select bottom layer by clicking on it in layers box
5) Go back to photo and select Filters->Distorts->Emboss ( an emboss box will open )
6) Select Emboss not Bumpmap
7) Click the OK button in the emboss box ( it may take a minute or two for the emboss function to finish)
8 ) Go back to the layers box Click Mode: and select Multiply from the drop down menu
9) Adjust the Opacity in the layers until you are happy with the result

* If you want to see what the bottom layer looks like before adjusting the layers just click the eye button next to the top layer and the top layer will become invisible.

This works better with less detailed photos than it does with more detailed photos.

Written by Linda MacPhee-Cobb

January 10th, 2008 at 5:00 am

Posted in gimp,graphics,how to

Create a CG photo effect for your website graphics using Gimp

without comments

Before:

After:

This is a very easy effect to create with The Gimp.

1) Open a copy of the photo you wish to change to CG
2) Go to Dialogs-> Layers ( a layer dialog box will appear )
3) Click the duplicate button in the Layers box ( button with 2 photos on bottom )
4) Select the bottom layer by clicking on it in the layers box
5) Go back to your photo and click Filters->Artistic->Cartoon ( a cartoon box will appear )
6) Click OK in the cartoon box
7) Go back to the Layers box and select the copy layer ( just click on it )
8 ) Go to the Mode drop down menu and select Overlay
That’s it!

When you do the cartoon effect you won’t see it because you are doing it on the bottom layer but the top layer is covering the bottom one. Just trust the directions.

Written by Linda MacPhee-Cobb

January 3rd, 2008 at 5:00 am

Posted in gimp,graphics,how to