Zo Nicholas IT Consulting » Photoshop

Creating a Favicon

Zo Nicholas — Mon, 28 Mar 2011 21:17:13 +0000

Creating a Favicon

As I have a brand new Semiomantics X0 3.1 script installed on my personal blog I have made a decision to also alter the look of my web site. The site will no longer display the flash slider, which is not smartphone friendly, but instead will display the SlideDeck Pro which is not only clearly visible on any mobile device like an ipad or iphone but also includes touchscreen interaction, cool eh?

One of the features when customising a website is creating a favicon which displays in a brower next to your website name. Both .jpg and .gif formats are accepted these days by most browsers however, to be visible on the IE browser you still need the .ico format.

You can create an image that you wish to display and then use a favicon generator to change the format to .ico or you can now create an image in Photoshop and there save it as .ico after having installed the neccessary plug-in. Both ways work perfectly well.

Creating a favicon image in Photoshop

I started creating my favicon image in Adobe Photoshop CS4, working on a larger canvas than neccessary, 256×256, (this way you can see better exactly what you are doing) and a larger size of the image is always useful to have. The first step was to create the background. A plain colour I prefer as in the end result any intricate background will not show successfully. The next layer was for the text/logo in this case just a simple ‘z’ in the same font as I use on my website.

You will notice that the English font use in my sites header is a thin font and when resized to 16×16, favicon size, the end result is not satisfactory. The font to be used for the purpose of a favicon must be bolder and more solid in order to be clearly visible in a browser when resized. The other font that I use on my website is Georgia, and when this was applied the end result was more pleasing and acceptable. However, still not totally the desired effect I was after.

Back to Photoshop. This time I changed the colour scheme around, light background, dark text. When resized it looks good in the browser. So now the next step is to save the resized 16×16 image as a favicon.ico which I can now do after having installed the photoshop plugin. The very last step is to save my work as a .psd for future reference.

Step 1 of the new look for zonicholas.com accomplished. Next step an apple touch icon. More to come…

Author:
Zo Nicholas, Media, Marketing, Publishing.

Co-Founder of YORGOO, Ycademy,YORGOO Press and Semiomantics.

If you enjoyed reading the above, please consider following future tips and strategies by RSS reader or Subscribe by Email.

How to create a Favicon with Photoshop

Yorgo Nestoridis — Wed, 09 Mar 2011 12:40:12 +0000

Create .ICO Files (Favicons) with Photoshop

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.

Download and install the Plug-in

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.

Parameters you must respect

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

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

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

How to Create an Icon or Favicon in Photoshop

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 … tags):

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

That’s it.

Incoming search terms:

Photoshop Basics Workshop

Yorgo Nestoridis — Wed, 23 Feb 2011 08:02:38 +0000

More Photoshop Basics

Tonight’s call will focus on more Photoshop Basics. The goal is to become familiar with more easy to use features to produce more interesting graphics for advertising or product presentation.

I am looking forward to an inspiring session :-).

Incoming search terms:

3D Text with Photoshop

Yorgo Nestoridis — Fri, 21 Jan 2011 08:01:46 +0000

Spectacular 3D Text for Print and Web

Tonight’s Photoshop Workshop will focus on Styling text, namely to give text a 3D aspect. The step by step walk-through will serve as an introduction to some spectacular effects and features of Photoshop.

Effects and Styles

The interest of the exercise is in discovering some smashing effects we can achieve with Photoshop without using the 3D tools.

We wil also see the number of operations needed to perfectly place shine, glow and shadows to give a glossy, high quality impression.

Short Friday Call

Please be on time as this exercise will take at least 1 hour to accomplish and understand. I hope you will be as smashed as I am by the result and this final session of our PS Basics workshops.

Incoming search terms:

Create 125 x 125 pixels Ads

Yorgo Nestoridis — Wed, 19 Jan 2011 19:00:56 +0000

Semiomantics Ads

At tonight’s call we will create some 125 px x 125 px ads. The idea is to brand the ads in line with product and website branding.

Advertising Elements

From a visual point of view, ads use the same branding as our business or product. In addition to that you may use slogans, space permitting. A 125 pixels ad does not provide much space; therefore the information must be concise and clear and contain — if possible — an element which will provoke the click, such as the price.

At tonight’s training we will look at the example from Semiomantics and then create individual advertising buttons.

Semiomantics Brand

Semiomantics uses basically 3 Fonts:

Capture it Regular
Myriad Pro
League Gothic

The Colors:

Grayscale
#222222
#eaeaea
Red C00C00
Black and White

The Styles:

Strictly minimalist and flat in B&W Red and Gray-scale

Sample Ads

The above ads use similar style as the sprite menu bar:

You could imagine using sprites for the ad or a hover effect similar to the menu.

Download the Photoshop file:

Try it using your own Colors and Styles.

Incoming search terms:

Free Button Template PSD

Yorgo Nestoridis — Fri, 14 Jan 2011 19:02:37 +0000

Free Photoshop Button

At tonight’s workshop we will build yet another Photoshop Button Template. As we progress, our buttons become more sophisticated as you will see.

Today’s button may inspire you to create your own button set and to put it up for sale on your website or shop.

Free Button Template for Photoshop

Here is the button we are building:

There are various interesting elements:

- The gradiant gray button background with a border and stroke

- The text style

- The Logo

- The Ribbon

Using Photoshop, these elements can be edited separately from the template by modifying the corresponding layers and masks.

For those who cannot attend the Workshop tonight, the button is available for free download here below:

Incoming search terms:

Photoshop Workshops

Yorgo Nestoridis — Fri, 14 Jan 2011 10:49:05 +0000

Bonus for Ycademy Seminar Participants

This month our daily calls are focusing on Photoshop basics. To prepare the sessions we are using the most popular resources and guides available out there. For Ycademy Seminar participants we have prepared a Library which we will feed before the Ycademy January Seminar time permitting.

Amongst the best resources are the ones from Lynda.com, as well as CS5 for Dummies and the CS5 Bible. We are using these to elaborate tutorials and exercises which we make available for download.

Please look out for a mail from Bianca with the access link and pass to the library.

Incoming search terms:

Greek Church Stock Photo

Zo Nicholas — Fri, 20 Aug 2010 19:29:51 +0000

By Zo Nicholas

Greek Church Stock Photo

Following upon the previous post, the Thursday Ycademy training session involved learning a few more Photoshop techniques in anticipation of the new Photo Media Stock site. We practiced some new techniques on a photo of a Greek Church taken by Yorgo Nestoridis. Techniques were used to enhance the photo image: with a few simple adjustments certain features on the photo were enhanced.

Photo Media Stock

Photos to be loaded to the new Photo Stock site need to be of the highest quality. Photo & Media Stock is a venture undertaken by Ycademy and the August Ycademy Online Seminar participants, to provide high quality, sharp and well focused media stock photos.

Adding Frames in Photoshop

Zo Nicholas — Sat, 15 May 2010 15:30:11 +0000

By Zo Nicholas

[ hide ]

The other day someone asked me how to add a frame to an image to give it the finishing touch.

Adding Frames

There are various ways to add a frame to any image. First you need to decide on the function of the graphic that is to be displayed. If the image is to be used for example in a blog then perhaps you just need to add a contrasting background to enhance the image and make it stand out. Making the background colour complimentary to the image used will create a more harmonious effect. Adding a background will also increase the file size of the image to be used.

Another way is to just add a drop shadow to the graphic to give it that 3D effect.

Adding Frames in Photoshop

In Photoshop when you want to add a frame to any image life is made easy with Action Scripts and brushes. You can find many of these Action Scripts on the web each ceating a different effect, it all depends on what you would really like to achieve.

In this example I have used a photo of a Lily which I used in an earlier post, and in Photoshop added a filter and then to this I added a Custom Shape Action – Art Deco frame to create a greeting card effect.

By experimenting with various images, backgrounds and frames you soon find out which are your favourite actions. On the other hand you may like to try your hand at creating your own Action Script in Photoshop.

This page is wiki editable click here to edit this page.

A Little Bit of Blur

Zo Nicholas — Sun, 02 May 2010 21:02:16 +0000

By Zo Nicholas

[ hide ]

A Little Bit of Blur

Following up on 5 Tips to take Pictures of Cars by Yorgo and the Ycademy Workshop I have applied the Photoshop Blur Action to a photo, a simple play on reflections. Blue on blue, and a car! Add a little bit of blur, a little bit of zoom and you have something different from the norm.

Photoshop Blur Action

The Photoshop Blur Action can be applied to any photo or image in few simple steps, very easy to use and takes the sweat out of the ‘don’t know how’. By making a few subtle modifications in the Action as and when prompted each image becomes unique, and created according to your own personal tastes. By post editing your photo in this way you can create your own focus on even the smallest of details.

Ycademy Trainings

Ycademy Trainings and workshops are a great way to meet others interested in the same subject and to learn, step by step and with guidance, new topics of interest. Why not join a daily call at 8p.m. London time in yorgotalk.com, all are welcome.

This page is wiki editable click here to edit this page.

Zo Nicholas IT Consulting » Photoshop

Creating a Favicon

Creating a Favicon

Creating a favicon image in Photoshop

How to create a Favicon with Photoshop

Create .ICO Files (Favicons) with Photoshop

Download and install the Plug-in

Parameters you must respect

How to Create an Icon or Favicon in Photoshop

Incoming search terms:

Photoshop Basics Workshop

More Photoshop Basics

Incoming search terms:

3D Text with Photoshop

Spectacular 3D Text for Print and Web

Effects and Styles

Short Friday Call

Incoming search terms:

Create 125 x 125 pixels Ads

Semiomantics Ads

Advertising Elements

Semiomantics Brand

Sample Ads

Incoming search terms:

Free Button Template PSD

Free Photoshop Button

Free Button Template for Photoshop

Incoming search terms:

Photoshop Workshops

Bonus for Ycademy Seminar Participants

Incoming search terms:

Greek Church Stock Photo

Greek Church Stock Photo

Photo Media Stock

Read more..

Adding Frames in Photoshop

Contents

Adding Frames

Adding Frames in Photoshop

Read more..

A Little Bit of Blur

Contents

A Little Bit of Blur

Photoshop Blur Action

Ycademy Trainings

Read more..