The principle is simple: the ad consists of a styled link, the style consisting of positioning a background image with a rollover effect when the mouse passes over the image (hover). When clicking on the image the target page opens. A few years ago the rollover effect could only be achieved using JavaScript. The same effect can now be achieved using CSS and namely the pseudo-class :hover.

The rollover effect can be achieved using two separate small images which alternatively load as a background or by creating one big image containing multiple small images and by shifting the background position. (CSS Sprite).

For the purpose of this exercise we will use the CSS Sprite version.

The example shows the rollover effect as used on the homepage.

For our image we need the normal view as well as the hover view of the ad united on one image created in Photoshop: the image here below is 250 pixels wide and 250 pixels high.

In stead of creating two images we create only one and leave a vertical space between the two ads.

This results in an image of 250 pixels by 510 pixels.

Image used for the CSS Sprite

This image is 250 pixels wide and holds both views of the ad, each 250 x 250 pixels.

You may download the corresponding Photoshop Template File from HERE.

To place your ad in your html document, just embed the target link with a new css style class:

<a class="rollover8" title="Daily Live Conference at Yorgo Talk: 7 pm London time" href="http://yorgotalk.com/"></a>

As you see, we just embed the link with a class “rollover8” and a title for SEO purposes. You can choose any class name; I selected “rollover8” as there are already 7 previous rollovers on the site.

Now we just style our link by adding some code to the style sheet:

.rollover8, a.rollover8 {
display:block;
width:250px;
height:250px;
background: url('/images/ad250x250a.png') no-repeat top center;
float:left;
margin-bottom:9px;
}

a.rollover8:hover {
background-position:0px -260px;
width:250px;
height:250px;
}

I guess the style code is self explanatory.
Just try and if you need any help, just comment here below.
That’s it.

• 2011 css rollover effects
• how to create rollover ads
• rollover ad
• rollover effect html worpress 2011

Related posts:

1. Create 125 x 125 pixels Ads
2. How to create a Favicon with Photoshop
3. Simple Sprites Menu
4. Create a Favicon with Photoshop
5. Create Apple Touch Icons and Startup Images

The favicon or icon is part of the customization of a website. The favicons show namely in the browser tabs. Nowadays most browsers will also show .gif and .png icons; the .ico format is preferred by Internet Explorer.

A quick and easy way to create a Favicon is by using the online tool put at disposal by favicon.com. A better result can be achieved by editing the favicon in Photoshop; however Photoshop does not support the .ICO format in its native version. A plug-in can remedy.

To start with, download the free Plug-in from Telegraphics.

Paste the plug-in file (ICOFormat.8bi, or ICOFormat64.8bi for the 64 bit version) in your Photoshop: …Program Files/Adobe/Photoshop/Plug-ins/File Formats.

re-start Photoshop.

The .ico file format will only be available in Photoshop if you respect the following:

1. Maximum file size 256 x 256 pixels
2. RGB, Bitmap, gray-scale or Indexed mode
3. Maximum 8 bits per channel

To save an image as .ico, use “save as” and select from the drop-down the ICO format.

Favicons are small icons, very small icons, since they measure only 16 x 16 pixels. Designing an Icon is a challenge since its display should be meaningful. To work more comfortably with your photoshop, start your design with a larger square canvas, a multiple of 16 pixels, for example 64 pixels, 128px or 256 pixels.

For the purpose of this exercise I will use a 128 px x 128 px canvas with the following presets:

You may save these settings as Preset for further use.

Best results are achieved if you keep your design simple and rich in contrast.

1. Open a new file with the above presets:

2. Fill with your background color (or pattern)

3. Add content

Best result with vector graphics, custom shapes, good fonts  and such likes; just create a new layer and add …

4. Resize

Resize to 16px x 16px and resample selecting ‘Bicubic Sharper’:

We get now:

5. Save as .ICO

Now “Save as” (don’t use “Save for Web and Devices”) and select the ICO format. Rename the image to favicon.ico:

6. Embed your new Favicon

Most browsers will find your favicon.ico automatically if you just load it into your website’s root folder (where the index.html is located), others are looking for a direct link to the favicon. To help these last browsers just add the following lines to your header (between the <head> … </head> tags):

<link rel="Shortcut Icon" href="/favicon.ico">

Load your favicon to the root folder of your domain and make sure it’s called ‘favicon.ico’.

That’s it.

Related posts:

1. Create a Favicon with Photoshop
2. Create Apple Touch Icons and Startup Images
3. Semiomantics Shop for WordPress
4. Create Buttons with Photoshop
5. Logo Design with Photoshop

Get touchy on Apple

Tonight’s call will focus on two simple identifiers which are useful on mobile devices, namely on Apple devices such as the iPhone, iPod and iPad.

Apple Touch Icons

Apple Touch Icons are identifiers for your web page or application which can be placed on the home screen of devices, such as the iPhone as seen here above. When Bookmarking a site and adding an icon to the home screen, default icons would be a screenshot of an uncontrollable part of your web page.

Similar to favicons, we can add touch icons to our site, which will replace the default and become visible as a custom icon.

Apple Startup Images

They are similar to Icons in as much as they load while the user is waiting for the actual application is loading or if the app is offline.

When surfing a site for which you like to create a link (icon) on the home screen, just select as per here below:

You will end up with the icon on your home screen asseen on the image on top of this post.

Icon Sizes

Create your icons in 57 x 57 pixels, 114 x 114 pixels and 512 x 512 pixels and load them to the root folder of your site.

For the touch icon: call the image:

apple-touch-icon.png

or

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

and so on.

Apple will add the rounded corners and the gloss automatically.

Startup Image

The start up image has a standard size of 320 x 460 pixels and should be in png portrait format.

Name the image startup.png.

Embedding

If your icon is not in the root folder, just place the following codesnippet in your header:

<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" />

The above code would be for different image sizes.

That’s it.

More details and a step by step workshop at tonight’s call.

Related posts:

1. Apple Peel for WordPress
2. Apple Look for XO 2011
3. Create a Favicon with Photoshop
4. Create 125 x 125 pixels Ads
5. 4 Web Design Tips for Mobile Websites

Get touchy on Apple

Tonight’s call will focus on two simple identifiers which are useful on mobile devices, namely on Apple devices such as the iPhone, iPod and iPad.

Apple Touch Icons

Apple Touch Icons are identifiers for your web page or application which can be placed on the home screen of devices, such as the iPhone as seen here above. When Bookmarking a site and adding an icon to the home screen, default icons would be a screenshot of an uncontrollable part of your web page.

Similar to favicons, we can add touch icons to our site, which will replace the default and become visible as a custom icon.

Apple Startup Images

They are similar to Icons in as much as they load while the user is waiting for the actual application is loading or if the app is offline.

When surfing a site for which you like to create a link (icon) on the home screen, just select as per here below:

You will end up with the icon on your home screen asseen on the image on top of this post.

Icon Sizes

Create your icons in 57 x 57 pixels, 114 x 114 pixels and 512 x 512 pixels and load them to the root folder of your site.

For the touch icon: call the image:

apple-touch-icon.png

or

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

and so on.

Apple will add the rounded corners and the gloss automatically.

Startup Image

The start up image has a standard size of 320 x 460 pixels and should be in png portrait format.

Name the image startup.png.

Embedding

If your icon is not in the root folder, just place the following codesnippet in your header:

<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" />

The above code would be for different image sizes.

That’s it.

More details and a step by step workshop at tonight’s call.

Related posts:

1. Apple Peel for WordPress
2. Apple Look for XO 2011
3. Create a Favicon with Photoshop
4. Create 125 x 125 pixels Ads
5. 4 Web Design Tips for Mobile Websites

Free Button to Download

Our last two Photoshop workshops dealt with buttons. Creating buttons allows us to have a closer look at blending options as well to start working with vector masks.

Here is a sample of last night’s work:

As you can see, the button looks simple, sober and elegant. The secret is in the subtle blending. As we use custom shapes to create buttons we can re-size the buttons easily using the Place function in Photoshop or, as some designers prefer, using Fireworks.

Also, the change of colors is a simple task starting from the PSD file of your button:

To follow tonight’s session, you may want to download the PSD file of the above button, namely if you have not attended yesterday’s workshop. Please use the button below:

Related posts:

1. Create a Favicon with Photoshop
2. Watermark and Copyright with Photoshop CS4
3. Resizing Pictures in Photoshop
4. Book covers and Jewel Cases with Photoshop
5. Create your First Flash Document

Create Your animated 3D Logo Tonight

Let’s have some fun tonight at our relaxed Friday session: create your 3D Logo and make it spin!

For tonight’s participants we have a great logo creator in store which you may want to try out … and keep for future use.

bianca

Bianca Logo

or click on the below to see the animation:

bianca

Bianca 3D Logo

The Download link will be disabled in 3 hours from now!

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

Create a Favicon with Photoshop

While you are working on your image or brand, you may want to create your custom favicon which will display in your visitors browser tabs as a small image.

Here is how to create your favicon.

Create your Favicon

Before you start, you need to add a plug-in to your Photoshop to allow saving your image in .ico format.

1. Download the plug-in from here.

2. Unzip and extract the files.

3. Load the file ICOFormat.8bi into your Photoshop plug-ins folder. (This is typically in drive C under Programm Files – Adobe – Photoshop CS4 – Plug-ins)

4. Fire up your Photoshop and create a new image with size 64×64 pixels (the icon will be saved as 16×16 pixels but it’s easier to create on a bigger format).

Favicon Design 64×64

Favicon Design 64x64

Favicon Icon 16×16

Favicon Icon 16x16

When resizing the image from 64 pixels to 16 pixels, resample the image with ‘Bicubic Sharper’.

5. ‘Save as’ and select the .ico format.

6. Place the image as ‘favicon.ico’ into the root folder of your domain and add the link to the header script of your site.

Done.

Join our call tonight at YorgoTalk for further tips.

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.