Zo Nicholas IT Consulting » web design workshop

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:

Best WP Shop Custom Design

Yorgo Nestoridis — Mon, 28 Feb 2011 09:24:27 +0000

WordPress Shop Theme Customization

The week-end was busy with the Ycademy Seminar and the new doors opened by the Seminar Content lead to a busy schedule for our daily calls in the near future. There are two areas of development:

1. WordPress Shop Theme Customization and

2. WordPress Customization fo r the Mobile Web

This week we will focus on WP Shop Customization on the base of the Semiomantics eShop.

The Semiomantics Shop

The Semiomantics eShop is based on a clean and user-friendly WordPress Theme which has been adapted to comply with Semiomantics standards and requirements for high visibility and performance. The Theme is ideal for customers with a straight forward business selling namely to a targeted local audience. I say this right at the beginning: the shop does not offer multi-currency features or tax rates by country or state.

Besides this the Shop is flexible and bears quite a number of interesting built in features also for affiliate marketers as well as for people who would like to offer to their customers an affiliate program.

Considering the price, the Semiomantics eShop is the best deal online, second only to the Semiomantics Total E-commerce solution, which is more complex but satisfies the highest commercial aspirations and ambitions.

Most people needing an online shop will be happy with the Semiomantics Shop as it is the ideal platform for small business.

Semiomantics Shop Customization for WordPress

Our next few calls will focus on customization. As all Ycademy Seminar Participants have an own author website based on Semiomantics XO we will implement on the store site the branding and customization criteria used on XO.

First steps include colors and fonts as well as branding icons and logos.

The second phase will take care of product specific requirements: physical products vs. digital products for example and their delivery.

The Third phase will take care of marketing as well as of the affiliate program.

Daily Calls

As you see from the above, our next few calls will be workshops where we will help each participant to implement and customize the personal shop. It’s a great way also to look in more depths into some of the Shop features we may have gone through too fast at the Seminar. I am looking forward to working with you on your personal projects.

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:

Logo Design with Photoshop

Yorgo Nestoridis — Mon, 31 Jan 2011 09:44:02 +0000

How to design a simple Logo with Photoshop

After a rich Seminar, let’s relax with a simple Logo design at tonight’s call. The exercise will consist in using custom shapes, fonts and styles from Photoshop according to the below samples:

Semiomantics Logo

A colored version:

Semiomantics Logo in Helvetica

A neutral version in Helvetica:

Semiomantics Logo Impact Arial

Version using free fonts:

To prepare the session, please download the image and Photoshop file; we will use them as a base and then move on to profit from your creativity:-).

I am looking forward to seeing you tonight at the call.

Incoming search terms:

How to use Displacement Masks in Photoshop

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

Text Effects with Displacement Masks

Tonight’s short call will focus on using displacement masks in Photoshop. The below image will serve as an example for our exercise.

I am looking forward to seeing you there :-).

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:

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:

Create Buttons with Photoshop

Yorgo Nestoridis — Fri, 14 Jan 2011 08:52:22 +0000

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:

Incoming search terms:

Create Buttons with Photoshop

Yorgo Nestoridis — Fri, 14 Jan 2011 08:52:22 +0000

[ hide ]

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:

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:

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.

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

Zo Nicholas IT Consulting » web design workshop

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:

Best WP Shop Custom Design

WordPress Shop Theme Customization

The Semiomantics Shop

Semiomantics Shop Customization for WordPress

Daily Calls

Incoming search terms:

Photoshop Basics Workshop

More Photoshop Basics

Incoming search terms:

Logo Design with Photoshop

How to design a simple Logo with Photoshop

Semiomantics Logo

Semiomantics Logo in Helvetica

Semiomantics Logo Impact Arial

Incoming search terms:

How to use Displacement Masks in Photoshop

Text Effects with Displacement Masks

Incoming search terms:

3D Text with Photoshop

Spectacular 3D Text for Print and Web

Effects and Styles

Short Friday Call

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:

Create Buttons with Photoshop

Free Button to Download

Incoming search terms:

Create Buttons with Photoshop

Contents

Free Button to Download

Author: