Peep in my mind

Archive | Graphic Design

Tags: , , , , ,

Tutorial On Creating Your Favicon For Yor Website

Posted on 21 May 2009 by admin

Creating A Favicon

So I bet you all wondered like I did how do they create those neat icons on their web site and have it displayed in the bookmarks? Well here a few short steps on how to make one.

First you need to create a image that is 16×16 pixels because this is the size for the icons for the bookmark and browsers. Once you have Create that icon favicon (that one is mine) save it out as a .gif or a png with transparency if you need it.

Next we will go to our favorite web page http://tools.dynamicdrive.com/favicon/ where they are super nice and have given us a tool to create our favicon! Yes that right we don’t have to install any software just upload and download.

Once you have created your FavIcon for your website upload it somewhere on your website.  Please make sure you know where you saved it cause you will need to link back to that file.  I put mine in the same wordpress theme folder that I am currently using.

The next step is to open up your page and go to the HEAD section and add the link.

<link rel=”shortcut icon” href=”/favicon.ico”>

If your using wordpress and uploaded the icon to the theme folder you are using please use the code below. Just copy and paste the code in the HEAD section of that theme.

<link rel=”shortcut icon” href=”<?php bloginfo(‘template_directory’); ?>/favicon.ico”>

Once you’ve added the code save your page and your done.

Comments (1)

Tags: , , , , ,

The design process of a logo step 1

Posted on 12 February 2009 by admin

Before designing a logo there are a few things a designer should think about or ask. What type of business is it? What is the client looking for? How do the competitors logos look like? Should this logo be different or similar?  What will the logo be used for? For this example I will take a web development company named Superior Web Systems, and try to design a logo for them.  First off they want something Simple, Clean, Strong, and Unique.  Another thing is that they think their name is too long and might want to shorten it.

Continue Reading

Comments (0)

Tags: , , , ,

Adobe Kuler making Color Template for Web Design easy

Posted on 03 October 2008 by admin

It can be very challenging trying to pick the right color template for a web site.  Especially if you’re dealing with colors you don’t typically use.   But don’t threat! Kuler is too the rescue! Kuler is a product created by Adobe.  It lets users generate their own color combination by choosing the following options:

  • Analogous
  • Monochromatic
  • Triad
  • Complementary
  • Compound
  • Shades
  • Custom

After the user has generated their color theme the user can save it to a place called “Mykuler”. Users can also save color themes as Adobe Swatch Exchange files (.ASE) where users can import and use in Adobe Creative Suite.  The online application is very easy to use so definitely give Kuler a try.

Comments (0)

Tags: , , , ,

Creating web pages compatible to color bind viewers

Posted on 02 October 2008 by admin

Generally designers have an excellent eye for detail and a skill to differentiate between the slightest color values.  Especially now with 32bit colors being able to be displayed on our monitors the color patellae seems to be endless.  Unfortunately an estimated 9 to 13 percent of males and under one percent of female population have some form of color blindness.

Here are some color blindness definitions found on the web:

  • Protanopia means difficulties to distinguish between blue and green colors and also between red and green colors, or no sensitivity to red.
  • Deuteranopia is blindness to green.
  • Tritanopia is blindness to blue-yellow.

Designers who ignore color blindness can lose or confuse about 10 percent of potential viewers. To avoid this problem Vischeck has a nice tool that will load your website, and display how people with these symptoms will view your site.  From there you can see how clearly your sites is readable and adjust your site.

Comments (0)

Tags: , , , ,

Creating Color Palettes for Web Designs Templates

Posted on 13 June 2008 by admin

Web color insperation

Picking the right colors for web design can be hard at times. I know I’ve ran in to those days where any color I pick just don’t work with each other. Or I just ran out of inspiration and really didn’t feel like creating another blue or black themed web site. So I go online like most people and start searching the web for great ideas.

As I go through zillions of site with titles like ” Top site for color inspiration” or ” Picking colors the award wining way” I’ve noticed one thing they all use the same colors “blue, white, black” (yes yes black and white is not a color” but I’m sure you get the point). Any hoot enough of my ramblings and time for the meat.

So here my tip on trying to use different colors. Try using the color explore from Behr, Benjamin Moor, or whatever paint matching application you can find online and start picking some colors. What I like about these applications is that they pick some nice accent colors where you can start working with to generate your overall web theme. Another bonus is that the colors that are generated are nice and soft and easy on the eyes.

Well I hope you all give this a try. With some minor tweaks and adjustment you’ve got a great start on your next web site that is not blue.

Comments (0)

Tags: , , , , , ,

Creating Smoke in Photoshop

Posted on 04 June 2008 by admin

Create Smoke

1. Create black background.

2. Create New Layer and draw white lines to define shape.

3. Give it a Gaussian Blur (just blur it so that it’s nice and soft and you can still kind of see the strokes).

4. Filter\Other\Maximum to give it some shape for the center of the smoke lines

5. Duplicate the smoke Edit\Transform\Warp and Warp it a little to make it look more natural.

6. Apply a Twirl filter Filter\Distort\Twirl.

7. Adjust the opacity and you should have your smoke.

Comments (0)

Tags: , , , ,

Creating Animated Gifs or Movies Using Adobe PhotoShop CS3

Posted on 02 June 2008 by admin

Animate_gifs_movie_photoshop_tutorial

1. Go to File\Scripts\Load Files into Stacks… (This option will add all your image in as one file with separate layers).
2. Add all your images that you want in the animation.
3. Open the Animation Palette from Window\Animation
4. Click on the Flyout Menu on top right corner of the animation window and select Make Frames from Layers
5. Adjust the timing of each frame by selecting the 0 sec. on the frame

To save as animated Gif
Go to File\Save For Web & Devices Choose your Image Settings and Looping Options
Click Save.

To save as a Movie for Flv, IPhone, IPod, Quick Time, MPEG4 and so on
Go to File\Export\Render Video Choose your Settings.
Click Save.

Comments (1)

Advertise Here
Advertise Here

RELATED SITES