Web design Tips,Tricks,Tutorials,Resources,Design tools,Essential website lists

10 Best Free Web Editors

2011-10-04T00:54:00.000-07:00

There are lots of Web page editors available in both text and WYSIWYG that are free. But not all of them are good. You need to know which one is best for you. It takes time if you want to try to choose right one for you from best 100 editors. SO i make this list too short for you which will helps you to find your web editors.

1.Komodo Edit
Komodo Edit is hands down the best free XML editor available. It includes a lot of great features for HTML and CSS development. Plus, if that isn't enough, you can get extensions for it to add on languages or other helpful features (like special characters). It's not the best HTML editor, but it's great for for the price, especially if you build in XML. I use Komodo Edit every day for my work in XML and I use it a lot for basic HTML editing as well. This is one editor I'd be lost without.

2. Aptana Studio
Aptana Studio is an interesting take on web page development. Instead of focusing on the HTML, Aptana focuses on the JavaScript and other elements that allow you to create Rich Internet Applications. One of the things I really like is the outline view that makes it really easy to visualize the DOM. This makes for easier CSS and JavaScript development. If you are a developer creating web applications, Aptana Studio is a good choice.

3. NetBeans
NetBeans IDE is a Java IDE that can help you build robust web applications. Like most IDEs it has a steep learning curve because they don’t often work in the same way that web editors do. But once you get used to it you’ll be hooked. One nice feature is the version control included in the IDE which is really useful for people working in large development environments. If you write Java and web pages this is a great tool.

4. Bluefish
Bluefish is a full featured web editor for Linux. And the 2.0 release adds a lot of great new features. There are also native executables for Windows and Macintosh. There is code-sensitive spell check, auto complete of many different languages (HTML, PHP, CSS, etc.), snippets, project management, and auto-save. It is primarily a code editor, not specifically a web editor. This means that it has a lot of flexibility for web developers writing in more than just HTML, but if you’re a designer by nature you might not like it as much.

5. CoffeeCup Free HTML Editor
The CoffeeCup Free HTML editor is a text editor with a lot of potential. A lot of the features it has in the menus require that you buy the full version. The free version is a good HTML editor, but I would recommend you purchase the full version of the editor to get the real juice from this product. One important thing to note: many sites list this editor as a free WYSIWYG editor, but when I tested, you had to buy the full version to get WYSIWYG support. The free version is a very nice text editor only.

6. Notepad++ (Windows)
Notepad++ is a solid, open source code editor, and a good replacement for the built-in Windows Notepad. It supports tabbed windows, HTML and CSS syntax highlighting, code folding, and auto-completion.
The find and replace options are comprehensive, including support for regular expression searches and searching in multiple files.
Notepad++ also has a plugin system, allowing you to extend the editor with additional features such as FTP uploading.
Other useful features for a Web coder include:

A file comparison tool
Built-in HTML Tidy functionality
Keyboard shortcuts for previewing in major browsers

7. Eclipse
Eclipse is a complex development environment that is perfect for people who do a lot of coding on various different platforms and with different languages. It is structured as plug-ins so if you need to edit something, you just find the appropriate plug-in and go. If you are creating complex web applications, Eclipse has a lot of features to help make your application easier to build. There are Java, JavaScript, and PHP plugins, as well as a plugin for mobile developers.

8. SeaMonkey
SeaMonkey is the Mozilla project all-in-one Internet application suite. It includes a web browser, email and newsgroup client, IRC chat client, and composer — the web page editor. One of the nice things about using SeaMonkey is that you have the browser built-in already so testing is a breeze. Plus it's a free WYSIWYG editor with an embedded FTP to publish your web pages.

9. jEdit (Windows, Mac, Linux)
jEdit is an open-source, cross-platform text editor written in Java. On the plus side this means that it runs nicely on Windows, Mac OS X, Linux and more. On the downside, the interface is a bit clunky, with non-standard widgets, dialogs and keyboard shortcuts. However, if you can get round the drawbacks then jEdit is a nice editor with a lot of power up its sleeves.
jEdit has all the features you'd expect from a decent code editor, including syntax highlighting, macros and multiple clipboards. However, to get the most of jEdit as a Web coder, install the XML plugin (you can easily do this by choosing , then clicking the tab and selecting the XML plugin). This plugin gives you auto-completion for HTML and CSS, a document tree browser, code beautification, and more.

10. Alleycode
Alleycode is a free web editor that focuses on search engine optimization. There are a lot of built-in features and links to the Alleycode website so that you can check your site ranking, optimize your meta data, and otherwise improve your search rankings. While I don't recommend sites that “guarantee” top-level ranking like Alleycode does, that doesn't mean that their web editor isn't any good. One feature I really like is the conversion tool to convert HTML tags and text from upper to lowercase and back. Very handy.
According to their website: Alleycode will no longer be supported or upgraded after January 1, 2010.

Know About CSS Layout Types and Their Uses

2010-11-28T01:06:00.000-08:00

WHich is the ideal width of web sites ?
Most of the new designers have this common question. So i decide to write about this topics to gives them idea about width of web sites.Theres are variations in monitor display resolutions. We designers need to decide first How i am gonna represent my site content to users.To do this we need to know first that there are three primary layout types available to design a website. After reading this article any of you can decide which one you can use for your design.

1. Fixed-width Layout (Using pixel-based units for the dimensions of the page)
2. Liquid or Fluid Layout (Using %-based units)
3. Elastic Layout (Using em-based units)

Lets start seeing more details with examples to undetstand what those means.

1. Fixed-width Layout

As the name suggests fixed layouts stop the web browser from having the freedom to format text as it sees fit, This is one of the most popular techniques on the web, with websites such as facebook and the BBC applying the design. This basically means that the width your content is contained and stays fixed no matter what, this is typically achieved using something called a wrapper, or container, which holds all the content within it. The fixed width design can be set to the left, center or right of the a page, very easily.

The real bonus of working with a fixed width design is that you can set imagery and design around the consideration that your width will always be the same. This is a real positive if you want a banner image, for example, which needs to be 900px, you will not have to problems when resizing, issues which you would encounter with a fluid design.

The downside of a fixed design however is the dead space that you are left with where your design does not fill the page. A fixed-width design can also force designers to prioritize. As a site grows and content competes for top placement, it must still fit within a specific width.

2. Liquid or Fluid Layout (Using %-based units)

The most relaxed method of providing a dynamically expanding or contracting design makes use of the ever-popular percentage (%) unit measurement.

This layout type has gained mass popularity because it is the ultimate way of allowing the total opposite of a fixed layout where the content will simply take whatever space is available to it.

Absolute LayoutsPercentages require careful calculation as you can’t give more than 100% without issues!

The limited guarantees you hold on the viewport being used goes beyond screen resolutions (imagine your site on a 6-inch screen versus a 100-inch screen, even just at 80% width).

Though it goes without saying that a liquid layout is useful in almost every web-based situation because it adjusts its width depending on how big or small the user’s viewport is — so it’s definitely worth looking into.

3. Elastic Layout (Using em-based units)

An elastic layout scales with users’ text size.

More accurately, an elastic interface scales with browser text size—commonly a default of 16px—which users can change if they wish. Some people make a permanent change for accessibility reasons, others use the UI controls to increase text size if they need to.

Elastic design uses em values for all elements. Ems are a relative size, written like this: 1em, 0.5em, 1.5em etc. Ems can be specified to three decimal places like so: 1.063em. “Relative” means:

1. They are calculated based on the font size of the parent element. E.g. If a
<div> has a computed font size of 16px then any element inside that layer —a child— inherits the same font size unless it is changed. If the child font size is changed to 0.75em then the computed size would be 0.75 × 16px = 12px.
2. If the user increases (or decreases) text size in their browser, the whole interface stretches (or shrinks.)

10 Most Useful & Handy online CSS Code Generators

2010-11-06T01:32:00.000-07:00

Cascading Style Sheets or CSS allow you to control the layout and look of your page easily. CSS tags or properties are easy to use and affect the look and feel or style of your pages. But it is not easy for most people to write CSS code that implement a desired design. In fact a lot of people have difficulties mastering CSS. In This article i provides 10 Most Useful & Handy online CSS Code Generators that can be very useful to create CSS faster and to learn about how CSS is structured.

CleanCSS
CSS clean is very useful CSS formatter. It helps to make your CSS code in clean and understandable. It is providing a test box for CSS code and check box for change the functionality of CSS code.

CSS Creator
Creates a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.

Grid Designer
Grid designer works according to the name, creating the different types of grid layout with the help of provided functionality. It has well interface for designers to creating attractive grid layouts.

Typetester
The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated. Typetester’s code structure is XHTML, styled with the finest CSS and driven by the JavaScript for manipulating DOM structures. Typetester will not work without JavaScript enabled.

Telerik Visual Style Builder
An online CSS customization tool that allows you to easily, point-and-click customization of skins for the RadControls for ASP.NET AJAX. This visual style builder eliminates any need to have working knowledge of the front-end HTML and CSS structure of the RadControls to create custom skins.You’ll have complete control over the elements of the RadControls’ skin and allows you to develop a custom built skin in very short time.
This tool is ideal for ASP.NET developers. Probably one of the easiest ways to create a RadControls skin. This tool also satisfies your need for ready made menus and images for calendars and such.

css-generator
This tools lets you input your XHTML code in a box displayed on the front page, the code will be sent back to them and they will return your code with a corresponding CSS frame. This service is completely free This is great for the developer that’s big on multi-tasking.

CSSportal
Online CSS Editor allows you to edit an entire CSS file at once with a dynamic preview shown below. The preview will show the exact line you’re editing, and it will update as you type. If you want to show the entire file then move focus to the start or the end of the CSS text. When you have finished editing your CSS, be sure to validate the code with CSS Validator.

Drawter
Written in JavaScript and based on the jQuery library enables you with the possibility to draw your website’s code. Every tag is presented as a layer you have drawn.It can run on every single web-browser which makes it really useful and versatile.

Working knowledge of HTML and CSS is required in order to utilize Drawter, however developing code is easier then writting by hand. Drawter anticipates a version where you will not need much knowledge of CSS and HTML, this is foreseen in the near future.

CSSMate
CSS mate a very famous online CSS code editor. It allows to change multiple in fonts, color, text color, border and list.

CSS Type Set
Ahands-on typography tool which allows the every day designer and developer fully test and learn how to style Web content. You’ll be able to test different font-styles throughout a piece of text and also allows you to select a font-style and easily copy/paste into your stylesheet.

CSS Sprites: What They Are and How to Use Them

2010-09-19T00:51:00.000-07:00

CSS Sprites

A visually appealing website must have a great design. And usually with a great design, comes great images. And with great images, comes loading time. And with loading time, comes slow pages. ect, ect. Images are key in most web designs, so it’s always important to keep in mind how to optimize your images for the best user experience.
There are countless methods on minimizing the load time on your site, but this post will address one way in particular: sprites. More specifically, CSS sprites.

The use of CSS sprites is a fairly common practice with web designers. But what are they? The name may be a little misleading, as CSS sprites aren’t small, but big images containing dozens, and even hundreds, of little images.

History

Super Mario Bros. Sprites
Sprites originated in video games, back during the 8-bit glory days. Every visual item in a game was drawn as an individual image that would later be ‘layered‘ into the game as it was being played. However, as the complexity of games increased, game developers realized the benefits from combining all the images for a game into a singe sprite. By combining all the images into a single sprite (in a grid like formation), they could program the game to map positions of each individual graphic, and selectively placed them into the game.

What does this have to do with web development? Well, aren’t websites not unlike 8-bit games? Eh?

Why Sprites?

Sprite image from Google
Having all these images individually makes for smaller files sizes and fast loading, right? You may think so, but no. While it may look like your page loads fast, since there are dozens of images half loaded, they’re actually loading slower.

For each image, an HTTP-Request is called to download the image, and having a few dozen of them called at the same time slows down the entire process. Not to mention that despite a single image being smaller than a large sprite, file sizes add up, and fast. Combining a bunch of your images into a single sprite cuts down of your HTTP-requests, lowers the total file size, and your page then loads faster.

Example

Here’s a comparative example of the difference between a single sprite image, and 20 small images.

While the individual images on their own are smaller in size, collectively they’re more than 5x larger than the single sprite image.

Another great benefit to using sprites is when you use images for the :hover state. Normally, you’d have to use JavaScript to pre-load an image used in a :hover state, but if you’re using a sprite, and simply change the background position on :hover, there is no need to pre-load the image, since it will already be loaded.

Use and Limitations

One you create a single sprite image, you’ll have to use some CSS trickery to display the right image from the sprite.

Here is the CSS for the sprite image above:

.arrow { background-position: 0 0; }
.biggrin { background-position: 0 -20px; }
.confused { background-position: 0 -40px; }
.cool { background-position: 0 -60px; }
.cry { background-position: 0 -80px; }
.eek { background-position: 20px 0; }
.evil { background-position: 20px -20px; }
.exclaim { background-position: 20px -40px; }
.idea { background-position: 20px -60px; }
.lol { background-position: 20px -80px; }
.mad { background-position: 40px 0; }
.mrgreen { background-position: 40px -20px; }
.question { background-position: 40px -40px; }
.razz { background-position: 40px -60px; }
.rolleyes { background-position: 40px -80px; }
.sad { background-position: 60px 0; }
.smile { background-position: 60px -20px; }
.surprised { background-position: 60px -40px; }
.twisted { background-position: 60px -60px; }
.wink { background-position: 60px -80px; }

In my opinion, easiest way to apply sprites are to assign a base class that declares the background image and any other attributes, and then a sub-class that handles the background position.

<div class="smiles wink"></div>

.smiles {
background-image: url(smile_sprite.gif);
background-repeat: no-repeat;
width: 15px;
height: 15px;
}
.wink { background-position: 60px -80px; }

/* ect. ect. */

CSS sprites are really only good for background images. So they’re useless for anything in an img tag. They’re also are not good for images you want to be repeated on both the x and y axis, as when you repeat an image, the entire image is repeated, not just what is visible.

There is a workaround however for repeating sprites on one axis (in this example, the x). Here is a situation:

The height of the element is 20.
The width is dynamic.
The images are arranged in the sprite vertically, in one column
The image is repeated on the x-axis

There are other ways to work with repeating a sprite, but this was just one example.

So…

There are lots of resources out there for CSS sprites, from generators, to more detailed information. Here is a great generator that allows you upload a .zip file full of images, and will automatically generate a single sprite image, CSS styles included. :eek:
CSS Sprite Generator
I suggest trying sprites out. The concept can be difficult to adapt your methods to at first, but the more you use it, but more second nature it becomes.

10 Best Tutorials on Converting PSD to XHTML/CSS

2010-07-04T04:31:00.000-07:00

IT is a good habit to start a new project by designing a mockup in photoshop before starting coding for a website. There are lot of people who can design a web page in photoshop but not have good skill to convert this photoshop design into html/css.
I search over the web for best article on psd to html/css. Here i share 10 best link from where you can learn psd to html building step by step.If someone follow this link and study those articles carefully i am sure anybody can success on this job.

1. From PSD to HTML, Building a Set of Web Designs Step by Step

Collis Ta’eed published a post about five months ago at NETTUTS that takes a very detailed look at the process of coding a site with a PSD file as a starting point. This is a site that Collis designed in Photoshop and the post goes through every step of getting it to the point of being a working site, with all the CSS and HTML coding provided.

2. Build a Sleek Portfolio Site from Scratch

A few months prior to the previous post, Collis also published this exceptional tutorial. This post was the 2nd part of a series that included a tutorial on PSDTUTS for creating the design in Photoshop. The two posts form one of the most useful sets of tutorials for any aspiring web designer, or other designers who could use some pointers for the process of starting with a design in Photoshop.

3. Encoding a Photoshop Mockup into XHTML and CSS

Chris Spooner also did a similar two-part series of posts for creating a design in Photoshop and then coding the site with XHTML and CSS. While Collis showed us how to code a portfolio site, Chris focuses his tutorial on blog design.

4. Tutorial: Coding a Layout

This tutorial from Eratic Wisdom is not nearly as detailed as some of the others on this list, but it does a good job of looking at the process quickly. If you’re interested in going through a shorter tutorial on the subject rather than spending a large chuck of time on all the details, try this one.

5. From PSD to HTML – How to turn your designs into usable web interfaces

Part Digital Design gives us another detailed tutorial for coding a site from a Photoshop file. This tutorial is very detailed, from slicing the interface to the coding.

6. From PSD to CSS/HTML in Easy Steps

These are the first in a series of tutorials in which they build a fully working Photography site, all in clean Xhtml and CSS. All the code, templates and files are available for you to play with, and they encourage you to download and play with what is provided.

7. Converting a Design From PSD to HTML

8. BLOOpress CSS Template

9. PSD HTML Slicing Tutorial

10. Design and Code a Slick Website From Scratch – Part II

15 awesome web services for web designers.

2010-06-21T03:54:00.000-07:00

In this post i will share 15 amazing usefull web services for designers which can helps a lot in our daily work. Personally i use some of them regularly. Hope you will cosider it as i am because i found some of them really helpfull . Most of them are free for use. You dont feel the output of this services untill you use by youself. If you have any other good services in your mind dont hesitate to share it by your valuable comment because i hardly believe that sharing is the great way to fulfill our knowledge.

1. Snipplr

What: Social snippet repository
Cost: Free
Link: http://snipplr.com
Why: Snipplr is a public source code repository that gives you a place to store and organize all the little pieces of code that you use each day. Best of all, it lets you share your code snippets with other coders and designers. Did we mention it works with TextMate, too? It’s code 2.0.

2.Domainr

What: Pick a original domain name with other TLDs, in the del.icio.us fashion
Cost: Free
Link: http://domai.nr
Why: Desirable .com domain names are scarcer than profitable investment banks. But Domai.nr makes finding pithy URLs easy by querying 280 top-level domains and another 2,014 second-level ones for domain hacks, turning real English words into unique and memorable Web addresses like del.icio.us, internetfamo.us, gee.ky, and iamthewalr.us. Plus, it’s free. — Wired

3. Are My Sites Up?

What: Check whether your websites are up or not and get noticed when they go down.
Cost: Free for up to 5 sites; $25/$50/$75 per year for premium services.
Link: http://aremysitesup.com
Why: When your websites go down, shouldn’t you be the first to know?
Our free plan will check up to five of your sites at least 25 times per day. You get unlimited email and SMS notifications and we will do our best to tell you WHY your site was down by providing the HTML status error code.

Our premium plans offer significantly more features: Faster site checks, an iPhone application, RSS feeds, Twitter integration, Keyword search, premium-level support, and more!

All for just one dollar per site per year (or cheaper!).

4. Templatr

What: Create a simple design with little or no effort.
Cost: Free
Link: http://templatr.cc
Why: It should should be easy to create an individual Design with the templatr. With a little experimentation you will be able to reach the desired result much more quickly than with endless written explanations.

5. SurFTP

What: Web-based FTP client
Cost: Free
Link: http://surftp.com
Why: Once you are logged in, you will be able to navigate the FTP server, upload files, download files, zip files, unzip files, install software, copy, move and delete, copy or move to a second FTP server, rename and chmod.

6. Bespin

What: Open, extensible web-based framework for code editing
Cost: Free
Link: https://bespin.mozilla.com
Why: Bespin is a Mozilla Labs experiment that proposes an open, extensible web-based framework for code editing that aims to increase developer productivity, enable compelling user experiences, and promote the use of open standards. [built using HTML5 technology]

7. Genfavicon

What: Convert images into favicons for your website.
Cost: Free
Link: http://www.genfavicon.com
Why: Genfavicon is a site that features an application that allows you to create an icon out of the image of your choice. Simple select your image, by pasting in the URL address or uploading the image. Then choose which part of the image you wish to make the icon by dragging the mouse and cutting the desired shape. You must then select the size of your icon; 16X16, 32X32, 48X48, 64X64, or 128X128.
Preview what you have chosen and then finalize your icon.
You can then use your icon for your webpage or any other place you would like to put it.
Making your favicon could not be easier, in three quick steps you have made an icon that you can easily paste on your webpage.

8. CSS Sandbox

What: Experiment with CSS styles in real time
Cost: Free
Link: http://aurelio.net/css-sandbox/
Why:
A toy.
A teacher.
A live demo.
A quick reference.
A web application.

A single HTML page.
The CSS Sandbox can be described by all these sentences.

It’s a simple and quick web toy that lets you explore CSS in real time. Just click and see the effect instantly, no Reload needed. It’s fast and funny!

Once you’re satisfied with the style of the Sandbox, roll your mouse over the handy CODE button. A panel will pop, showing all the necessary CSS code to apply that formatting to your own site.

9. Typetester

What: Compare screen type
Cost: Free
Link: http://www.typetester.org
Why: The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

10. Wofoo

What: Form builder
Cost: Free for limited number of entries and one form only; from $9.95/month for more intensive usage
Link: http://wufoo.com
Why: Wufoo strives to be the easiest way to collect information over the Internet.
Our HTML form builder helps you create contact forms, online surveys, and invitations so you can collect the data, registrations and online payments you need without writing a single line of code.

11. BrowserCam

What: Cross Browser Compatibility Testing Tools
Cost: 24 hours free trial; prices vary from $20 to $1000/month
Link: http://www.browsercam.com
Why: See your web design on any browser on any operating system. Check javascripts, DHTML, forms and other dynamic functionality on any platform. Not just yours. Use our bank of testing machines remotely to test your website.

12. Zoho Suite

What: Productivity, collaboration and business apps
Cost: Free for personal use; pricing varies depending on the services needed
Link: http://www.zoho.com
Why: While Google Docs seems to be the first product people think of when online office suites come up, the lesser-known Zoho Suite offers more apps and features. See how Zoho stacks up against Google Docs. — LifeHacker

13. Time59

What: Track time and expenses, handle invoicing and payments.
Cost: Risk-free 30 days trial, $49.95 per year
Link: http://time59.com
Why: Be more organized with less effort. Time59 keeps track of the work you do, gets your invoices out quickly, and manages client payments. Your Time59 account can be accessed from any internet connected computer… at home, at your office, or on the road. Getting started with Time59 is easy. There’s nothing to install, just sign up and you’re ready to go.

14. Mint

What: Web site analytics
Cost: A single site license is $30
Link: http://haveamint.com
Why: Mint is an extensible, self-hosted web site analytics program. Its interface is an exercise in simplicity. Visits, referrers, popular pages and searches can all be taken in at a glance on Mint’s flexible dashboard.

15. CrazyEgg

What: Supplement your analytics with visuals and actionable data
Cost: Plans start at $9/month
Link: https://crazyegg.com
Why: Analytics only give you a static interpretation of your site visitor’s activities. You may be able to tell how many people have visited your site, or viewed a particular page, but you won’t be able to gauge effectiveness of design elements, link placement or popular areas of your site. If you want to know where people are clicking on your site, and which areas could use improvement, you need Crazy Egg. Crazy Egg helps you visualize your visitors.

Top 90+ Fantastic Design Resources Site For Web Designers

2010-06-08T04:41:00.000-07:00

While designing a site we need more resources and information to improve our design skill. While you searching for design resources over web you can easily lost and confused with the ever-changing stream of information and advice about design. I’m a big collector and bookmarker of design resources. Here I’ve tried to pull together the best design resources site I’ve found from over the web.Hope this can helps you in your everyday design works.

CSS Galleries
The Best Nature Sites on the Web: CSS Nature Website Gallery
A Frequently Updated Gallery of Sites: CSS Mania
An Organized List of Nice Sites: Most Inspired
CSS Gallery of Quality Sites: CSS Design Yorkshire
A Selection of Only Nature Based Sites: CSS Nature
A Selective List of Well Designed Sites: Web Creme
High Quality CSS Showcase: CSS Tux
Nice CSS Websites: The Designed Tree
A CSS Collection Organized by Category: CSS Elite
More about css

Website Templates
A Few High Quality Wordpress Themes: Evan Eckard
Over 2000 Free Web Templates: OSWD
A Large Selection of Nice Templates: Free Website Templates
A Large List of Free Templates: Free CSS Templates
Nice Wordpress Templates for Download: Free CSS Templates
A Combination of Free and Pay Templates: Free Templates Online
Affordable, Quality Templates: Templamatic
Free Blog Templates: Blogging Themes

Coders
$50 per page awesome psd to xhtml DROPNCHOP.COM (We recommend them, and use them)
Quality Programming: XHTMLized
Professional Web Slicing: PSD Slicing
Affordable, Quality Coding: PSD2HTML
From Design to Code, Quick and Cheap: Front Enders

Inspiration
A Great Site About Everything Type: I Love Typography
An Incredible Illustrator: Burst of Beaden
A Great Designer and Illustrator: Fully Illustrated
Customizable List of Design Resources: Cork Dump
The Society of Graphic Designers of Canada: GDC
Freelance Advice Blog and Resources: Freelance Switch
Amazing Collection of Logos: Logopond
Stunning Desktop Wallpapers: Desktopography
A Graphic Design Magazine: Computer Arts

Design Blogs
A Frequently Updated Design Blog: Veerle’s Blog
A Design Magazine and Blog: Smashing Magazine
A European Design Blog: Design In Europe
A Unique Nerdy Blog: Design You Trust
The Personal Blog of a Graphic Designer: Larissa Meek
A German Design Blog: David Hellmann
The Blog of a Canadian Geek/Model: Mostly Lisa
A Graphic Design Blog: Bittbox
A Blog About Freelance Graphic Design Advice: Freelance Switch
A Design Blog Full of Resources: You The Designer
A Popular Design Blog: Fazai 38
More design blogs list

Colour Palettes
A Flash Site of User Generated Colour Palettes: Adobe Kuler
Using Colours From Photos: Colr
Colours, Palettes and Patterns: COLOURlovers
A Colour Palette Generated From Your Images: Color Palette Generator
See The Results of Your Palette on a Website: Color Spire
Create and Email Colour Palettes: Color Blender
More Color Tools

Free Font Downloads
Free Fonts and Other Resources: Web Page Publicity
Huge Collection of Free Fonts: Da Font
Nice Selection of Free Fonts: Urban Fonts
Fonts and Other Freebies: Simply The Best Fonts
1001 Free Fonts for Download: 1001 Free Fonts
Over 9000 Free Fonts: Creamundo
A Small List of Free Fonts: Best Free Fonts
More Free Fonts Lists

Paid Font Sites
A Large Selection of Fonts for Purchase: My Fonts
Quality Fonts for Purchase: Veer
Information and Fonts for Purchase: Fonts
Font Resources and Sales: Font Haus

Stock Photos and Vectors
The Best Stock Photo and Vector Website
Quality Photos for Purchase: Shutterstock
Stock Photos and Other Pay Downloads: Veer
Quality, Affordable Vectors for Purchase: Vector Stock
Stock Photos With a Great Selection: Jupiter Images
Stock Photos and Photography Network: Stock Vault
Quality Stock Photos: Corbis
Free Stock Wedding Photos Wedding Photographer Victoria Vancouver BC

Free Photos and Vectors
Submit Vectors or Download Others for Free: Free Vector Art
Tons of Great Free Vectors and Photos: Deviant Art
59 Pages of Free Vector Art: Free Vectors
Quality Vector Downloads: Vector 4 Free
Neat Collection of Free Photos From Around the World: Free Stock Photos
Great Collection of Free Vectors and Resources: You The Designer
Great Free Stock Photos: Free Foto
A List of Free Downloads: Bittbox
700 Free Stock Photos: Free Picture Click

Free Photoshop Downloads
A Couple Free Patterns for Download: Design Spice
Free Photoshop Brushes: Design Fruit
Free Photoshop Actions: Visual Blast
Tons of Free Photoshop Brushes: Brusheezy
A Few Nice Free Photoshop Brushes: Obsidian Dawn
Great Grunge Brushes and Others: Photoshop Brushes
Free Background Patterns for Photoshop: Free BG
Over 150 Free Background Patterns: Squidfingers

Tutorials
The Best Photoshop Tutorials: PSD Tuts
A Talented Photoshop Designer: Abduzeedo
Photoshop Tutorials and Web Design Resources: Web Design Library
Tutorials for Photoshop, Illustrator and More: Tutorial Vault
A Few Neat Illustrator and Photoshop Tutorials: Design Spice
Great Photoshop Tutorials and Downloads: PS Wish
Tutorials for Every Computer Program: Tutorialing

10 Awesome CSS3 Features which makes designers dreams come true.

2010-06-02T03:06:00.000-07:00

In this post i will share about some CSS3 basic properties. Today is the day for which i am always waiting for. By using this properties we can make some awesome effect instantly with small amount of code such as Border Radius,Box Shadow,Text Shadow,Text Stroke,Linear Gradient, Radial Gradient,Rotate,Reflection,Resize,Outline etc. So here i tried to explaing them in a sort way. Hope it will helps you.

1. Border Radius

Earlier we used to use images to get border radius, which is bit a long procedure and lots of codes are needed to complete this. But now with CSS3 Border Radius Property we can do it in second. View alos css curve button

Code

#border-radius {
width: 200px;
height:100px;
background-color:#398ebe;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Demo

Browser Support : Firefox 3+, Chrome 4+, Safari 3.1+

2. Box Shadow

This is the new property of CSS3 which gives shadow to selected DIV. Using Box Shadow we can set the X and Y offset of shadow, color of shadow along with Blur in pixel.

Code

#box-shadow {
width: 200px;
height: 150px;
background-color:#398ebe;
-webkit-box-shadow: #244766 5px 5px 10px;
-moz-box-shadow: #244766 10px 10px 10px;
box-shadow: #244766 10px 10px 10px;
}

Demo

Browser Support : Firefox 3.5+, Chrome 2+, Safari 4+

3. Text Shadow

This is the new property of CSS3 which gives shadow to selected DIV. Using Box Shadow we can set the X and Y offset of shadow, color of shadow along with Blur in pixel.

Code

#text-shadow {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:50px;
color:#398ebe;
text-shadow: #555 3px 3px 3px;
-webkit-text-shadow: #555 3px 3px 3px;
-moz-text-shadow: #555 3px 3px 3px;
box-text: #555 3px 3px 3px;
}

Demo

Browser Support : Firefox 3.5+, Opera 9.6+, Chrome 2+, Safari 4+

4. Text Stroke

This is the new property of CSS3 which gives stroke/outline to Text. Here we will use syntax as text-fill-color for color of text, text-stroke-color which gives color to the stroke and text-stroke-width for width of stroke/outline.

Code

#text-stroke {
font-family:Arial, Helvetica, sans-serif;
font-size:50px;
font-weight:bold;
-webkit-text-fill-color: #398ebe;
-webkit-text-stroke-color: #000000;
-webkit-text-stroke-width: 2px;
}

Demo

Browser Support : Chrome 2+, Safari 4+

5. Linear Gradient

Linear Gradient gives a gradient to any HTML elements. View also css gradient button for more details.

Code

#linear-gradient {
width: 200px;
height: 150px;

/* For Firefox */

background-image: -moz-linear-gradient(top, #83cbf4, #d1ecfa);

/* For Safari/Chrome */

background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d1ecfa),color-stop(1, #83cbf4));
}

Demo

Browser Support : Firefox 3.5+, Chrome 2+, Safari 4+

6. Radial Gradient

This CSS3 Property gives a radial gradient to any selected element of XHTMl. Visit Webkit and Gecko for more detail on this property.

Code

#radial-gradient {
width: 200px;
height: 150px;

/* For Firefox */

background-image: -moz-radial-gradient(center 45deg, circle closest-corner, #d1ecfa 10%, #83cbf4 70%);

/* For Safari/Chrome */

background-image: -webkit-gradient(radial, center center, 10, center center, 90, from(#d1ecfa), to(#83cbf4));
}

Demo

Browser Support : Firefox 3.5+, Chrome 2+, Safari 4+

7. Rotate

This CSS3 Property allows any html element to rotat

Code

#rotate {
width: 200px;
height: 150px;
background-color:#398ebe;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
}

Demo

Browser Support : Firefox 3.5+, Chrome 2+, Safari 4+

8. Reflection

This CSS3 Property allows reflection of text or boxes.

Code

#reflection {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:18px;
color: #398ebe;
-webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(100, 100, 100, 0.4)));
}

Demo

Browser Support : Chrome 2+, Safari 4+

9. Resize

This CSS3 Property allows resizing of box on horizontal, vertical and both axis.

Code

#resizing {
width: 200px;
height: 100px;
border:1px solid #398ebe;
overflow: hidden;
resize: both;
}

Demo

Browser Support : Chrome, Safari

10. Outline

When we style any element with outline then we can have a outline specified with offset to that particular element. Suppose we want to have an outline which is 5px away from the element box then we use outline property.

Code

#outline {
width: 200px;
height: 150px;
background-color:#398ebe;
outline: solid 1px #398ebe;
outline-offset: 5px;
}

Demo

Browser Support : Firefox, Chrome, Safari

10 Essential Firefox Addons Every Web Designer Should Know

2010-05-25T05:42:00.000-07:00

It’s no secret that web designers and developers love Firefox! Firefox provides an endless amount of functionality that you simply won’t find in any other modern Internet browser.
One of the greatest aspects of Firefox is the ability to install add-ons to do just about anything and everything a browser can possibily do. As a web developer this functionality is extremely useful to us.

Firefox has some cool add-ons which make the job of website designers much easier. There are many useful add-ons for Firefox out there and we use several pretty much every day for work.

Since there are so many different add-ons available to download, it can be a little overwhelming to pick out which ones you should be using. I compile a list of the 25+ Essential Firefox Add-ons (along with brief descriptions) that every web designer should know about. Be sure and let me know if i missed anything!

01. Web Developer

The Web Developer Extension is a extension for the Firefox browser and it’s a great tool for web designers. It has a variety off essential tools that allow you to code quality websites and troubleshoot problems easily. It’s a powerful all in one plugin. Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. The added benefit of having Web Developer Tool is the ability to edit CSS on the fly. If you want to try a different font, different size, different color, background, borders, margins, padding, practically anything to do with CSS, you can make the changes in the Web Developer tool and see the changes instantly. The Web Developer tool saves you time when playing around with CSS.

02. Firebug

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Firebug gives you full control over the CSS, HTML and JavaScript of any page that you choose. Inspect and edit HTML, Tweak CSS to perfection, Visualize CSS metrics, Monitor network activity, Debug and profile JavaScript, Quickly find errors, Explore the DOM, Execute JavaScript on the fly, Logging for JavaScript. Best of all, every change that you make is done live and instantly, so you can quickly test out different changes and see the results of those changes instantly.

03. Codetech

Codetech is another wonderful firefox extension which allows you to edit your documents right next to your web pages as you surf. This web page editing tool has the feel of Dreamweaver in a Firefox extension. For a web developer or designer, which offtenly deals with HTML source code, Codetch is a lite version of a application like Adobe Dreamweaver. It has a similar layout, yet less features, but it helps the user to complete its source based tasks.
Author description says it all. It’s the closest you can get to a professional web editing interface in a browser. Install it as an extension today and have a full featured editor right beside your web pages as you surf!

04. Colorzilla

An other one of my favorite Firefox extensions is ColorZilla indeed. ColorZilla add-on features an online eyedropper, which makes it quite simple to get the exact value of a specific color. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. In addition to color picker, ColorZilla offers a DOM color analyzer which allows you to locate elements on the page that correspond to a given color and find out the CSS rules that specify a certain color. ColorZilla also features a online palette viewer that allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. With this beautiful extension you can Zoom the page you are viewing and measure distances between any two points on the page.s

05. FireShot

FireShot is an advanced screen capture add-on for Firefox. In addition to giving you the ability to capture an entire web page, FireShot also allows you to add add graphics and notes directly to your screen captures.

FireShot gives you several options for handling your screen captures. Not only can they be saved in a variety of file formats, but they can also be saved to your computer, emailed to others or saved on the free FireShot hosting server. As a result of its wide range of features, this add-on has attracted over one hundred and fifty thousand active users, and has proven itself to be invaluable for web designers and other Internet professionals.

06. MeasureIt

As someone who creates designs for the Internet, one of the most chellanging job is to create design elements aligned. In that case MeasureIt comes in handy and allows you to overlay a ruler on a browser page so you can verify width, height and alignment of page elements.

07. CSS Validator/HTML Validator

CSS Validator is a Firefox extension which Validates a page using the W3C CSS Validator. Adds an option to the right-click context menu and to the Tools menu to allow for easy validation of the CSS of the current page. Opens the results in a new tab. Will only work on pages that have a CSS file associated. For example it will work with http://www.w3.org/ as the URL has a CSS file. When using the HTML Validator, you can choose to validate directly in the browser (where any errors are shown as a status bar icon), show the source with explanations of errors after the validation or a validation with proposed solutions to any errors.

08. GridFox

One of the most frustrating issues that a web designer undoubtedly encounter when coding grid-based layouts. How can a designer be sure that the grid is maintained from the original mockup to the final coded version? When I coded my first grid-based layout, I found myself regularly taking screenshots of the site and comparing them with my original grid in Photoshop. There had to be an easier way.

GridFox is a great extension that will overlay a grid on a selected website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize, allowing you to create the exact grid you designed your layout around.

09. CSSViewer

With this extension you can view CSS properties of related page elements. Very handy, when You got large CSS file with styles overlapping each other, to analyze why something is not displayed in the way You wanted.

10. Browser Window Resizer

The Browser Window Resizer is useful tool for testing different screen sizes. It accurately resizes your browser so you can test to see if the web page you’re working on looks right in all of the standard resolution sizes. This will allow you to see if your design is going to look good to visitors who aren’t using the same resolution as you. The best thing about this add-on is that if you are using it in conjunction with the other add-ons in this list (specifically Firebug), when you see that something isn’t displaying properly, you can instantly make adjustments to your code and see if that fixes the problem, all without ever leaving your current browser window. Browser Window Resizer add-on resize your Firefox window to 640×480, 800×600, 1024×768, 1280×1024 and 1600×1200 resolution sizes.

If i miss any other addons which you think essential for designer please feel free to share it by your valuable comment.

10 excellent and inspirational examples of Horizontal Navigation Menus

2010-05-18T04:44:00.000-07:00

I think Navigation Menu is second important part of any site because they Mostly appear right next to the logo. Anybody can attract users by designing unique and nice looking menus. In my previous post of Navigation menus i provide Top 70 CSS Navigation Menu link. From those link you can learn how to create menus for your site. Today i share couple of inspirational Horizontal Navigation Menu design example site where you can see nice and exceptional design of Horizontal Navigation Menus.

Hope you will be inspired by those menu design and create unique and excellent menus for your site.

Benjamin Christie

Single Hop

Tutorial9

kriesi

Loodo

Skialpine

Designerscouch

Twitterevolutions

Boukarabila

Boomawebdesign

10 Best Color Tools For Web Designers

2010-05-16T06:00:00.000-07:00

Right Color for the Right combination is very important while you designing a web page because color play major role to make your web project successful. So sometimes its difficult task for web designer to select decent and beautiful color combination for every design. In that situation color tools can helps you determine matching color or even suggest sets of matching color palette when you are totally clueless.

There are numerous free online tools to help in your decision, so many that it can take time just choosing which tool to choose. Rather than creating a long list of what is available I have chosen 15 best tools which i like most because they are easy to use.

colorexplorer.com

colorotate.org

kuler.adobe.com

colourlovers.com

colorjack.com

pourpre.com

colorschemedesigner.com

colorcombos.com

colorhunter.com

colourgrab.com

Why You Should Validate Your Website.

2010-05-08T03:23:00.000-07:00

It is very inportant to validate your website because it helps in many ways. From making it load right / the same in all browsers to helping you in the SEO area.
What exactly is validation? It's the process of checking the syntax of your HTML code to find places where you've violated the rules of the language. The official rules for writing HTML are defined by the World Wide Web Consortium (W3C).

Those rules include strict definitions stating which HTML and tags are legitimate parts of the language, and how you should structure your HTML and CSS documents.

Here i provide some essential tools for validatign your website :

1. W3C Markup Validation : This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific content such as RSS/Atom feeds or CSS stylesheets, MobileOK content, or to find broken links, there are other validators and tools available.

2.W3C CSS Validation : This service will validate your CSS. If you want to validate your CSS style sheet embedded in an (X)HTML document, you should first check that the (X)HTML you use is valid.

3.Feed Validation : This tool will validate all versions of RSS feeds as well as Atom feeds. This will ensure that readers will not have problems while receiving your feed.

4.[Firefox] Web Developer Toolbar : The Web Developer toolbar extension for Firefox has tools to check HTML and CSS validation. You can use this addons on a daily basis.

5.[Browser Independent] W3C Validator Favelets : A quick and easy way to give just about any major browser a way to validate HTML and CSS is by using favelets. Favelets are bookmarked snippets of JavaScript to add extra functionality.

6.Development Editor : Most development editors offer validation tool. Adobe Dreamweaver is my editor of choice and it provides validation tools.

So validating your pages is a wise precaution, particularly if you write the HTML and CSS code by hand. Clean, well-written HTML,CSS is important if you want to ensure a good search engine ranking. It also helps guarantee that your page will be displayed properly on older, or more obscure browsers that are less forgiving.

Create CSS gradient buttons without image.

2010-04-29T03:28:00.000-07:00

Its a dream of any web designers to create css gradient button without image. There are lots of limitation in designing a web page for browser compatibility issue. For this reason we designer cannot express our creative thinking as we think. But from now i think we can express our creative idea without any hassle. We web designer always need to keep some point in our mind when designing a webpage.

One of the serious issue is web page load time. To do that always we try to make page smaller in size.we know that using image in design is a nightmare. Its always make our page heavy.

To get rid from this hassle CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. Here in this post i will show you how to code for the CSS gradient button to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome.

The XHTML is below:

<a href="http://webdeziners.blogspot.com/" class="red">http://webdeziners.blogspot.com/</a>

The css style is below:

.red {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.5);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #fffbf9;
border: solid 1px #980401;
background: #c50503; /* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#ff8a50), to(#c30000)); /* For Webkit Browsers */
background: -moz-linear-gradient(top, #ff8a50, #c30000); /* for Firefox */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8a50', endColorstr='#c30000'); /* for IE */
}
.red:hover {
background: #c50503;
background: -webkit-gradient(linear, left top, left bottom, from(#c30000), to(#ff8a50));
background: -moz-linear-gradient(top, #c30000, #ff8a50);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c30000', endColorstr='#ff8a50');
}
.red:active {
border: solid 1px #ec3331;
color: #f9baae;
background: -webkit-gradient(linear, left top, left bottom, from(#dc3921), to(#ffb36a));
background: -moz-linear-gradient(top, #dc3921, #ffb36a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dc3921', endColorstr='#ffb36a');
}

If you use above css and html code the button will be look like following image :

Please note not all browsers support CSS gradient. To be safe, you shouldn’t rely on CSS gradient when coding the layout. It should only be used for enhancing the layout.Hope you enjoy it as much as i do.

Pearl Crescent Page Saver for firefox

2010-04-28T05:40:00.000-07:00

Page Saver lets you capture images of web pages, including Flash content. A web page screenshot can be saved in PNG or JPEG format. Using Page Saver, you can capture an entire page or just the visible portion. To allow you to control the image capture process, a wide variety of options are provided including a file name pattern and an image scale setting (e.g., save at 50% of original size).
Images may be captured using a toolbar button, the browser context menu, or from the command line.

Add to Firefox
https://addons.mozilla.org/en-US/firefox/addon/10367

A Pro edition of Page Saver is available that adds features such as file upload, extensive command line options, and the capability to select a region on the page. For more information
visit http://pearlcrescent.com/products/pagesaver/pro/

HTML & XHTML Character Entities List

2010-04-27T23:29:00.001-07:00

Using character entities is very helpful when the encoding set doesn’t express all the characters that you might want to use in your document. For example, if you were authoring a document in English and wanted to use an inverted exclamation mark for a Spanish quotation, In this situation you must use an entity to create that character. Other character entity references help control space, symbols, and so on.

There are three types of character entities available in HTML and XHTML. Follow the links to the complete chart listings for that entity type.

ISO 8859-1 characters. This set includes the Latin set of character entities.
Symbols, Mathematical Characters, Greek and Latin Letters. This set includes entities for various symbols (such as copyright symbols and so on), math characters, and Greek and Latin letters.
Markup-significant Characters. This set includes internationalization characters such as those required for bi-directional text.

Named Entities in HTML & XHTML

Example	Named Entity	Numeric	Entity Description
			non-breaking space
¢	¢	¢	cent sign
£	£	£	pound sign
¤	¤	¤	currency sign
¥	¥	¥	yen sign
¦	¦	¦	broken vertical bar
§	§	§	section sign
¨	¨	¨	diaeresis
©	©	©	copyright sign
ª	ª	ª	feminine ordinal indicator
«	«	«	left-pointing double angle quotation mark
¬	¬	¬	not sign
			soft hyphen
®	®	®	registered sign
¯	¯	¯	macron
°	°	°	degree sign
±	±	±	plus-minus sign
²	²	²	superscript two
³	³	³	superscript three
´	´	´	acute accent
µ	µ	µ	micro signB5
¶	¶	¶	pilcrow sign
·	·	·	middle dot
¸	¸	¸	cedilla
¹	¹	¹	superscript one
º	º	º	masculine ordinal indicator
»	»	»	right-pointing double angle quotation mark
¼	¼	¼	vulgar fraction one- quarter
½	½	½	vulgar fraction one- half
¾	¾	¾	vulgar fraction three- quarters
¿	¿	¿	inverted question mark
À	À	À	Latin capital letter A with grave
Á	Á	Á	Latin capital letter A with acute
Â	Â	Â	Latin capital letter A with circumflex
Ã	Ã	Ã	Latin capital letter A with tilde
Ä	Ä	Ä	Latin capital letter A with diaeresis
Å	Å	Å	Latin capital letter A with ring above
Æ	Æ	Æ	Latin capital letter AE
Ç	Ç	Ç	Latin capital letter C with cedilla
È	È	È	Latin capital letter E with grave
É	É	É	Latin capital letter E with acute
Ê	Ê	Ê	Latin capital letter E with circumflex
Ë	Ë	Ë	Latin capital letter E with diaeresis
Ì	Ì	Ì	Latin capital letter I with grave
Í	Í	Í	Latin capital letter I with acute
Î	Î	Î	Latin capital letter I with circumflex
Ï	Ï	Ï	Latin capital letter I with diaeresis
ð	ð	Ð	Latin capital letter eth
Ñ	Ñ	Ñ	Latin capital letter N with tilde
Ò	Ò	Ò	Latin capital letter O with grave
Ó	Ó	Ó	Latin capital letter O with acute
Ô	Ô	Ô	Latin capital letter O with circumflex
Õ	Õ	Õ	Latin capital letter O with tilde
Ö	Ö	Ö	Latin capital letter O with diaeresis
×	×	×	multiplication sign
Ø	Ø	Ø	Latin capital letter O with stroke
Ù	Ù	Ù	Latin capital letter U with grave
Ú	Ú	Ú	Latin capital letter U with acute
Û	Û	Û	Latin capital letter U with circumflex
Ü	Ü	Ü	Latin capital letter U with diaeresis
Ý	Ý	Ý	Latin capital letter Y with acute
þ	þ	Þ	Latin capital letter thorn
ß	ß	ß	Latin small letter sharp
à	à	à	Latin small letter a with grave
á	á	á	Latin small letter a with acute
â	â	â	Latin small letter a with circumflex
ã	ã	ã	Latin small letter a with tilde
ä	ä	ä	Latin small letter a with diaeresis
å	å	å	Latin small letter a with ring above
æ	æ	æ	Latin small letter ae
ç	ç	ç	Latin small letter c with cedilla
è	è	è	Latin small letter e with grave
é	é	é	Latin small letter e with acute
ê	ê	ê	Latin small letter e with circumflex
ë	ë	ë	Latin small letter e with diaeresis
ì	ì	ì	Latin small letter i with grave
í	í	í	Latin small letter i with acute
î	î	î	Latin small letter i with circumflex
ï	ï	ï	Latin small letter i with diaeresis
ð	ð	ð	Latin small letter eth
ñ	ñ	ñ	Latin small letter n with tilde
ò	ò	ò	Latin small letter o with grave
ó	ó	ó	Latin small letter o with acute
ô	ô	ô	Latin small letter o with circumflex
õ	õ	õ	Latin small letter o with tilde
ö	ö	ö	Latin small letter o with diaeresis
÷	÷	÷	division sign
ø	ø	ø	Latin small letter o with stroke
ù	ù	ù	Latin small letter u with grave
ú	ú	ú	Latin small letter u with acute
û	û	û	Latin small letter u with circumflex
ü	ü	ü	Latin small letter u with diaeresis
ý	ý	ý	Latin small letter y with acute
þ	þ	þ	Latin small letter thorn
ÿ	ÿ	ÿ	Latin small letter y with diaeresis

Symbol Entities in HTML & XHTML

Example	Named Entity	Numeric Entity	Description
ƒ	&fnof;	ƒ	Latin small f with hook
Α	Α	Α	Greek capital letter alpha
Β	Β	Β	Greek capital letter beta
Γ	Γ	Γ	Greek capital letter gamma
Δ	Δ	Δ	Greek capital letter delta
Ε	Ε	Ε	Greek capital letter epsilon
Ζ	Ζ	Ζ	Greek capital letter zeta
Η	Η	Η	Greek capital letter eta
Θ	Θ	Θ	Greek capital letter theta
Ι	Ι	Ι	Greek capital letter iota
Κ	Κ	Κ	Greek capital letter kappa
Λ	Λ	Λ	Greek capital letter lambda
Μ	Μ	Μ	Greek capital letter mu
Ν	Ν	Ν	Greek capital letter nu
Ξ	Ξ	Ξ	Greek capital letter xi
Ο	Ο	Ο	Greek capital letter omicron
Π	Π	Π	Greek capital letter pi
Ρ	Ρ	Ρ	Greek capital letter rho
Note: There’s no Sigmaf, ” final sigma”, ΢ defined in iso-grk
Σ	Σ	Σ	Greek capital letter sigma
Τ	Τ	Τ	Greek capital letter tau
Υ	Υ	Υ	Greek capital letter upsilon
Φ	Φ	Φ	Greek capital letter phi
Χ	Χ	Χ	Greek capital letter chi
Ψ	Ψ	Ψ	Greek capital letter psi
Ω	Ω	Ω	Greek capital letter omega
α	α	α	Greek small letter alpha
β	β	β	Greek small letter beta
γ	γ	γ	Greek small letter gamma
δ	δ	δ	Greek small letter delta
ε	ε	ε	Greek small letter epsilon
ζ	ζ	ζ	Greek small letter zeta
η	η	η	Greek small letter eta
θ	θ	θ	Greek small letter theta
ι	ι	ι	Greek small letter iota
κ	κ	κ	Greek small letter kappa
λ	λ	λ	Greek small letter lambda
μ	μ	μ	Greek small letter mu
ν	ν	ν	Greek small letter nu
ξ	ξ	ξ	Greek small letter xi
ο	ο	ο	Greek small letter omicron
π	π	π	Greek small letter pi
ρ	ρ	ρ	Greek small letter rho
ς	&sigmaf;	ς	Greek small letter final sigma
σ	σ	σ	Greek small letter sigma
τ	τ	τ	Greek small letter tau
υ	υ	υ	Greek small letter upsilon
φ	φ	φ	Greek small letter phi
χ	χ	χ	Greek small letter chi
ψ	ψ	ψ	Greek small letter psi
ω	ω	ω	Greek small letter omega
ϑ	&thetasym;	ϑ	Greek small letter theta symbol
ϒ	&upsih;	ϒ	Greek upsilon with hook symbol
ϖ	ϖ	ϖ	pi symbol
•	•	•	bullet
…	…	…	horizontal ellipsis
′	′	′	prime
″	″	″	double prime
‾	&oline;	‾	overline
⁄	&frasl;	⁄	fraction slash
℘	&weierp;	℘	script capital
ℑ	&image;	ℑ	blackletter capital I
ℜ	&real;	ℜ	blackletter capital R
™	™	™	trade mark sign
ℵ	&alefsym;	ℵ	alef symbol
←	←	←	leftward arrow
↑	↑	↑	upward arrow
→	→	→	rightward arrow
↓	↓	↓	downward arrow
↔	↔	↔	left right arrow
↵	&crarr;	↵	downward arrow with corner leftward
⇐	⇐	⇐	leftward double arrow
⇑	&uArr;	⇑	upward double arrow
⇒	⇒	⇒	rightward double arrow
⇓	&dArr;	⇓	downward double arrow
⇔	⇔	⇔	left-right double arrow
∀	∀	∀	for all
∂	∂	∂	partial differential
∃	∃	∃	there exists
∅	∅	∅	empty set
∇	∇	∇	nabla
∈	∈	∈	element of
∉	∉	∉	not an element of
∋	&ni;	∋	contains as member
∏	∏	∏	n-ary product
∑	∑	∑	n-ary summation
−	−	−	minus sign
∗	&lowast;	∗	asterisk operator
√	√	√	square root
∝	&prop;	∝	proportional to
∞	∞	∞	infinity
∠	&ang;	∠	angle
∧	&and;	∧	logical and
∨	&or;	∨	logical or
∩	∩	∩	intersection
∪	∪	∪	union
∫	∫	∫	integral
∴	&there4;	∴	therefore
∼	&sim;	∼	tilde operator
≅	&cong;	≅	approximately equal to
≈	≈	≈	almost equal to
≠	≠	≠	not equal to
≡	&equiv;	≡	identical to
≤	≤	≤	less-than or equal to
≥	≥	≥	greater-than or equal to
⊂	⊂	⊂	subset of
⊃	⊃	⊃	superset of
⊄	&nsub;	⊄	not a subset of
Note: &nsup; , ⊅ “not a superset of” is not defined.
⊆	&sube;	⊆	subset of or equal to
⊇	&supe;	⊇	superset of or equal to
⊕	&oplus;	⊕	circled plus
⊗	&otimes;	⊗	circled times
⊥	&perp;	⊥	up tack
⋅	⋅	⋅	dot operator
⌈	&lceil;	⌈	left ceiling
⌉	&rceil;	⌉	right ceiling
⌊	&lfloor;	⌊	left floor
⌋	&rfloor;	⌋	right floor
〈	&lang;	〈	left-pointing angle bracket
〉	&rang;	〉	right-pointing angle bracket
◊	&loz;	◊	lozenge
♠	&spades;	♠	black (solid) spade suit
♣	&clubs;	♣	black (solid) club suit
♥	&hearts;	♥	black (solid) heart suit
♦	&diams;	♦	black (solid) diamond suit

Markup-Specific Entities in HTML & XHTML

Example	Named Entity	Numeric Entity	Description
"	"	"	quotation mark
&	&	&	ampersand
<	<	<	less-than sign
>	>	>	greater-than sign
Œ	&OElig;	Œ	Latin capital ligature OE
œ	&oelig;	œ	Latin small ligature oe
Š	&Scaron;	Š	Latin capital letter S with caron
š	&scaron;	š	Latin small letter s with caron
Ÿ	&Yuml;	Ÿ	Latin capital letter Y with diaeresis
ˆ	&circ;	ˆ	modifier letter circumflex accent
˜	&tilde;	˜	small tilde
	&ensp;		en space
	&emsp;		em space
			thin space
‌	&zwnj;	‌	zero width non-joiner
‍	&zwj;	‍	zero width joiner
‎	&lrm;	‎	left-to-right mark
‏	&rlm;	‏	right-to-left mark
–	–	–	en dash
—	—	—	em dash
‘	‘	‘	left single quotation mark
’	’	’	right single quotation mark
‚	&sbquo;	‚	single low-9 quotation mark
“	“	“	left double quotation mark
”	”	”	right double quotation mark
„	&bdquo;	„	double low-9 quotation mark
†	&dagger;	†	dagger
‡	&Dagger;	‡	double dagger
‰	&permil;	‰	per mille sign
‹	&lsaquo;	‹	single left-pointing angle quotation
›	&rsaquo;	›	single right-pointing angle quotation
€	€	€	euro sign

10 Best Websites To Download Free Fonts

2010-04-25T02:53:00.000-07:00

When designing a Web page, you will most certainly use fonts. Some of my friends ask me about free fonts. They want to know information about best free font resources. So here i share top 10 free fonts site, from where you can download nice and exceptional free fonts.

1. Search Free Fonts

2. 1001 Fonts

3. DaFont

4. Daily Free Fonts

5. Urban Fonts

6. Wonder Fonts

7. Abstract Fonts

8. Font Stock

9. Font Cubes

10. Simply The Best Fonts

Create Rounded corners by CSS without image which supports in all Browsers

2010-04-20T05:49:00.000-07:00

In this tutorial i will show you how to Create rounded corners by css without image which supports in all Browsers. I use this technique in my professional work and the output is outstanding. Just you need to edit the css file to make different color rounded box. No image editing sofware needed to create curve image. All you just need to do is understanding the css code. Analyze whole css carefully and see which class use for when and where.

If you are beginner level in css and html i suggest you just copy and paste my css and html code and study the code. Its not too hard.
Hope you will enjoy it. If you like this technique just let me know i will show more excellent tricks in my next post.

Basic idea :
The basic idea of this rounded corners without image is that we style the corners using four or five pixel high strips before and after the main content div. These strips are created using styled <b></b> tags. <b> tags have been used because they are faster to type than <span></span> and take up less file space (as good a reason as any).

Each strip is created using a background color, a left and right border color and a left and right margin.

Heare is a diagram to show how each strip was organized.

The basic curved corner is comprised of four strips labelled b1 to b4 and in the example above the background color is a Orchid , the border color is white and the outer background color is light grey.

The XHTML is below:

<div class="inset">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>Create rounded corners by css without image which support in all Browsers.</h1>
<p>Rounded corners with inset borders</p>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>

The css style is below:

.inset {
background:transparent;
width:40%;
}
.inset h1, .inset p {
margin:0 10px;
}
.inset h1 {
font-size:2em; color:#fff;
}
.inset p {
padding-bottom:0.5em;
}
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {
display:block;
overflow:hidden;
font-size:1px;
}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {
height:1px;
}
.inset .b2 {
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #aaa;
}
.inset .b3 {
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #ddd;
}
.inset .b4 {
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #eee;
}
.inset .b4b {
background:#ccc;
border-left:1px solid #aaa;
border-right:1px solid #fff;
}
.inset .b3b {
background:#ccc;
border-left:1px solid #ddd;
border-right:1px solid #fff;
}
.inset .b2b {
background:#ccc;
border-left:1px solid #eee;
border-right:1px solid #fff;
}
.inset .b1 {
margin:0 5px;
background:#999;
}
.inset .b2, .inset .b2b {
margin:0 3px;
border-width:0 2px;
}
.inset .b3, .inset .b3b {
margin:0 2px;
}
.inset .b4, .inset .b4b {
height:2px; margin:0 1px;
}
.inset .b1b {
margin:0 5px;
background:#fff;
}
.inset .boxcontent {
display:block;
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #fff;
}

After applying above code the box will be shows like following image

Thats it. Take the code and customize as you want. If you have any question just ask. I will try to give you a better solution. Enjoy making rounded corners by css without image.

Top 20 Design Blogs Every Designer Should Be Reading

2010-04-17T01:05:00.000-07:00

In this post i share top 20 design blog authored by talented designers. They delivered high quality content and resources which can helps you in many ways. So i advise those designer who always want to learn new thing and wants to inspired by exciting visual and interface design.

Six Revisions

Smashing Magazine

Webdesigner Depot

Abduzeedo

1st Webdesigner

Tutorial 9

PSD TUTS

Noupe

Line 25

Design Instruct

Inspired Mag

PSD Fan

WebDesignDev

You The Designer

Grafpedia

Dzine Blog

Smashing Share

Web Designer Wall

Design Shack

Blog.SpoonGraphics

All You Wanted To Know About the Flash Loader Component

2010-04-12T05:50:00.000-07:00

Apparently, Adobe flash (preciously Macromedia Flash) is quite a revolutionary design program that allows more than just simple design and animation for a host of purposes. Now we all know that flash is most useful in the area of website development and game design. From increasing the face and real value of many websites with interactive applications and animations to offering addictive desktop and online games, flash has given more than enough reasons for designers to practice their imagination.

But did you know that flash can even be used to enhance your designs through text or image uploads into a flash application from another location? That’s right! Flash lets you expand an already built flash application through what we know as the loader component, and by virtue of its abilities it’s been increasingly used in the area of flash game design .

But the loader component of flash doesn’t just stop there as it finds its use in flash web development as well. In fact, flash is one program that has evidently been known for its multipurpose ability. And to define just that aspect, let’s look at how the loader component offers its benefits. The loader component can be used to pull content from a different location and to upload it into a flash application or in an application that has pictures. What’s worth knowing here is controlling the timing of the image or content loading keeping a tab on the progress during the process. It is noteworthy to know that some components like Alert, ComboBox and Menu might not be functional if certain version 2 components are loaded into the loader component.

Flash graphic design is one more area where the loader component finds great use due to its ability to affix script from other locations. So, in case you want to insert a logo or a caption into a page, you can easily do so by uploading it from a remote location.

Color chart for web design.

2010-04-08T05:30:00.000-07:00

Web colors are colors used in designing web pages.Authors of web pages have a variety of options available for specifying colors for elements of web documents. Colors may be specified as an RGB triplet in hexadecimal format (a hex triplet); they may also be specified according to their common English names in some cases. Often a color tool or other graphics software is used to generate color values.

Here are 216 web color codes. There are a variety of ways to color web sites. These hexadecimal codes can be used in both XHTML and CSS.

FFF

FFF

CCC

CCC

999

999

666

666

333

333

000

000

FFC

C00

FF9

900

FF6

600

FF3

300

Web color chart

99C

C00

CC9

900

FFC

C33

FFC

C66

FF9

966

FF6

633

CC3

300

CC0

033

CCF

F00

CCF

F33

333

300

666

600

999

900

CCC

C00

FFF

F00

CC9

933

CC6

633

330

000

660

000

990

000

CC0

000

FF0

000

FF3

366

FF0

033

99F

F00

CCF

F66

99C

C33

666

633

999

933

CCC

C33

FFF

F33

996

600

993

300

663

333

993

333

CC3

333

FF3

333

CC3

366

FF6

699

FF0

066

66F

F00

99F

F66

66C

C33

669

900

999

966

CCC

C66

FFF

F66

996

633

663

300

996

666

CC6

666

FF6

666

990

033

CC3

399

FF6

6CC

FF0

099

33F

F00

66F

F33

339

900

66C

C00

99F

F33

CCC

C99

FFF

F99

CC9

966

CC6

600

CC9

999

FF9

999

FF3

399

CC0

066

990

066

FF3

3CC

FF0

0CC

00C

C00

33C

C00

336

600

669

933

99C

C66

CCF

F99

FFF

FCC

FFC

C99

FF9

933

FFC

CCC

FF9

9CC

CC6

699

993

366

660

033

CC0

099

330

033

33C

C33

66C

C66

00F

F00

33F

F33

66F

F66

99F

F99

CCF

FCC

CC9

9CC

996

699

993

399

990

099

663

366

660

066

006

600

336

633

009

900

339

933

669

966

99C

C99

FFC

CFF

FF9

9FF

FF6

6FF

FF3

3FF

FF0

0FF

CC6

6CC

CC3

3CC

003

300

00C

C33

006

633

339

966

66C

C99

99F

FCC

CCF

FFF

339

9FF

99C

CFF

CCC

CFF

CC9

9FF

996

6CC

663

399

330

066

990

0CC

CC0

0CC

00F

F33

33F

F66

009

933

00C

C66

33F

F99

99F

FFF

99C

CCC

006

6CC

669

9CC

999

9FF

999

9CC

993

3FF

660

0CC

660

099

CC3

3FF

CC0

0FF

00F

F66

66F

F99

33C

C66

009

966

66F

FFF

66C

CCC

669

999

003

366

336

699

666

6FF

666

6CC

666

699

330

099

993

3CC

CC6

6FF

990

0FF

00F

F99

66F

FCC

33C

C99

33F

FFF

33C

CCC

339

999

336

666

006

699

003

399

333

3FF

333

3CC

333

399

333

366

663

3CC

996

6FF

660

0FF

00F

FCC

33F

FCC

00F

FFF

00C

CCC

009

999

006

666

003

333

339

9CC

336

6CC

000

0FF

000

0CC

000

099

000

066

000

033

663

3FF

330

0FF

00C

C99

009

9CC

33C

CFF

66C

CFF

669

9FF

336

6FF

003

3CC

330

0CC

00C

CFF

009

9FF

006

6FF

003

3FF

X-Ray for Firefox

2010-04-05T06:30:00.000-07:00

See the tags on a page without viewing the sourcecode.
When you applied to a page it can help you see how the document was constructed without having to go back and forth between the sourcecode and the page in your browser. Is that list made of li, dd or p elements? Is that an h3 tag or just some bolded text? X-Ray shows you what's beneath the surface of the page.

Add to Firefox
https://addons.mozilla.org/en-US/firefox/addon/1802

Lists of standard Doctype Declarations. must know every web designer.

2010-04-04T00:25:00.000-07:00

In every web page we must need to add a Doctype Declarations at the top of the html file. Doctype Declarations(DTD) is not only use for validate the page it also use to activate the standards compliant rendering mode in Internet Explorer 6, Mozilla/Firefox and Opera browsers. The Doctype Declaration(DTD) must be exactly spelling and it is case sensitive. So you must type it as it is shown in W3C recommended Doctype Declaration to have the perfect effect.Here Is a list of W3C recommended list of Doctype Declarations.

You can use it in your web document. I suggest you to copy and paste this declarion code into your web document to ease the work. Otherwise if you make any mistake when you type, it will be difficult to have output from it.

Where to use doctype declarations ?
Use the following markup as a template to create a new XHTML 1.0 document using a proper Doctype Declaration. See the list below if you wish to use another DTD.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>An XHTML 1.0 Strict standard template</title>

content="text/html;charset=utf-8" />

</head>

<body>

Your HTML content here

</body>

</html>

(X)HTML Doctype Declarations List

HTML 4.01
* Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

* Transitional1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

* Frameset1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 2

* Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

* Transitional1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

* Frameset1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

50 ways to become a better designer

2010-03-11T04:08:00.000-08:00

What is design? Design is both the process and the final product of an endeavour to fulfil a personal or professional brief. Whether you are creating a piece of graphic work, a website, or a design for a new product, the underlying principal is the same the creative process is everything. Bad design results from faults with this process poor planning, ignoring the conventions of the media, poor technical skills or poor communication. So how can you streamline your working methods?

How do you go from haphazard doodler to a well-oiled design machine? Listen to the experts.

We approached 17 leading designers working in print, video and on the web, to obtain their words of wisdom on every stage of the design process, from ideas and planning, through to best practice and software skills, and finally putting the finishing touches on their work. We also asked each of our experts to reveal their worst experiences, and how they turned them to their advantage.

Despite their very different backgrounds, many of our designers offered the same advice about reading the brief, and planning your work on paper. Design is a subjective thing, and we all have different ways of getting results, but take heed of the expert advice offered within the following pages and youre sure to improve the way you work.

The ideas stage
A blank canvas can be terrifying, so where do you start? Our experts reveal ways to force your ideas into motion

01 ROUGH COMPS
I put a rough composition together using scans or low-res images found on the web. This enables me to use the assets I like without worrying whether I have them at the right size or in the right colour. Once the rough is complete, I recreate it in a high-res format shooting, recycling or buying any photography I need to complete the piece.

SUPPLIED BY: DARREN FIRTH

02 METAPHORS
Themes and metaphors are great platforms for ideas and I try to develop them both from a holistic perspective (ie, basing a site around a playground metaphor) as well as a design perspective (colour schemes and layout styles, for example). If you can hit a decent theme that allows you to convey and house the content, its a good place to be.

SUPPLIED BY: LAITH BAHRANI

03 FROM WORDS TO PICTURES
When I receive a commission, the first thing I do is read it and underline key phrases. Then I draw some very small rough thumbs for each. Once Ive got a bunch of little thumbnails together, I look at them all and see which ones make good symbols and which are identifiable and relevant to the content of the story.

SUPPLIED BY: DEREK LEA

04 BRAND THINKING
I would recommend going on any brand courses run by the likes of the Design Business Association. Brand thinking is essential; it encourages you to develop a visual way of thinking and helps you develop keywords to hang everything off the essence of the idea. Above all else, keep it simple. If it gets complicated it isnt going to work.

SUPPLIED BY: JAY ARMITAGE

05 KEEP YOUR BRAINSTORMS REALLY SHORT
When coming up with ideas its essential to bounce ideas around with a colleague, but the secret is to keep the brainstorms as short as possible, otherwise theyll get stale. Its better to have a couple of smaller sessions than a single mammoth session.

SUPPLIED BY: JASON ARBER

06 USE A SKETCHBOOK
I usually plan my work in an A4 hardback book, which I carry with me at all times. Any ideas I have (often when on public transport staring out of the window) go in here, and they can then be referred to at a later date. Diagrams, sketches, thoughts, book titles and reference URLs go in, too.

SUPPLIED BY: OZ DEAN

07 GET AWAY FROM YOUR COMPUTER
I find the worst thing is to sit staring at a blank canvas on screen. Get out of your chair and take a ten-minute walk in the fresh air. If you cant do that, I find it helps to grab a Thesaurus and look up synonyms for the key words in the design brief.

SUPPLIED BY: RIGEL

08 JOIN A FORUM
Freelancers walk that lonesome road, but that shouldnt stop you from seeking feedback while in the concept stage. If you have creative friends, great! If not, join an art forum to bounce ideas off of your peers.

SUPPLIED BY: DAVE CURD

09 TAKE A SHOWER
I get a lot of my thinking done in the shower. Running water increases brain productivity, apparently, which explains why some of the best ideas are hatched in the shower. I try to read a brief well in advance of working on it, allowing ideas to gestate in the run up to the actual work.

SUPPLIED BY: OZ DEAN

10 SPECS!
Taking into account the different media that will be required in your project is really important. If there will be photography, illustration, 3D renderings, charts or diagrams then all this has to be taken into consideration and planned for. The printing spec should be explored as soon as possible with the printer its pointless waiting until the last minute, because some processes always take longer than others to complete.

SUPPLIED BY: JEFF KNOWLES

Best practice
Work smarter, not harder, with advice for best working practice

11 KEEP A LIBRARY
When working with Flash files, I always make a point of giving my layers and symbols relevant and self-explanatory names. I also keep a file called library, which contains timers, loopers, buttons, code snippets and symbols that I use regularly. This really speeds up production.

SUPPLIED BY: OZ DEAN

12 WEB STANDARDS
When designing websites you can save loads of time by using Firefox extensions such as Web Developer, HTML Validator and Fangs. Each will reduce the time it takes to create standardscompliant, accessible websites.

SUPPLIED BY: ODOG

13 KEEP IT CURRENT
Visit sites such as pixelsurgeon.com or designiskinky.com and read Computer Arts. Staying up to date with design doesnt mean just looking at the work of others, you should know the industry and stay ahead of the software curve. Dont fall behind as many designers do, but dont chase fads either.

SUPPLIED BY: JJ JOHNSTONE

14 KEEP IT SIMPLE
My illustrations can be quite complex, so I always place one limitation on myself. If I have an illustration with a lot of visual elements and textures, l force myself to use a simple colour palette. If I want to use loads of different colours I ensure that the illustration is kept simple. That way colour and design dont fight against each other.

SUPPLIED BY: DEREK LEA

15 RECORD YOUR ACTIONS
If there are procedures you do repeatedly in Photoshop, its worth recording them as an Action. I only learned this trick recently, and its a great time-saver.

SUPPLIED BY: RIGEL

16 SAVE, SAVE, SAVE!
Computers always seem to know when youre hitting a deadline and choose that moment to crash, destroying any unsaved work. So hit Save as often as possible.

SUPPLIED BY: JASON ARBER

17 STORE YOUR ASSETS
Everyone has their own way of doing things. I like to keep lossless versions of all the assets Im going to be using in a piece to allow for any last-minute changes of size/format by the client. This is helpful should someone decide to take a postcard design and turn it into an A0 poster. Keeping things at maximum editability is handy, too dont flatten layers in Photoshop until the very end, for instance.

SUPPLIED BY: JON BURGERMAN

18 COLLABORATE
Since there are only two of us, nothing gets released without approval from us both. If the other person thinks that it still lacks something, he/she will work on it. Or if one of us doesnt like the first draft, we start from scratch. Being on the same page makes the work easier and, more importantly, fun.

SUPPLIED BY: INKSURGE

19 GET IT RIGHT FIRST TIME
Even if you factor-in time for testing a website into your initial workflow, problems and client vacillations will inevitably eat into it, and its not unheard of for sites to go live with only cursory testing. For web designers, however, this quality assurance process is worth its weight in gold, even if project managers start sweating at the expense. Getting a site right the first time is the kind of cherry on top that can ensure you get more work from the same client.

SUPPLIED BY: JASON ARBER

20 PRACTICE ALWAYS MAKES PERFECT
The more projects you work on and the more time you spend using programs, the quicker and more efficient you become. You learn not only from your mistakes but also from your successes, and these will help raise your standard of production.

SUPPLIED BY: LAITH BAHRANI

Software skills
A bad workman blames his tools, so make sure your software works for you, not against you

21 ALPHA CHANNELS IN PHOTOSHOP
Take the time to experiment with Alpha Channel-based selections. I find that Alpha Channels are often the key ingredient to bringing real-world elements and textures into my artwork. Once you get into the groove of working with channels it changes the way you observe things in the real world.

SUPPLIED BY: DEREK LEA

22 BUY MORE RAM
My number-one tip would be to buy as much RAM as you can afford, because Photoshop will devour as much as you can throw at it. I tend to use lots of layers and so small jobs, such as designs for websites, can quickly grow into mammoth files.

SUPPLIED BY: JASON ARBER

23 GRADIENTS IN PHOTOSHOP
To prevent gradients from banding when printing, add a small amount of noise to the layer, varying the amount depending on the size and resolution of your canvas.

SUPPLIED BY: RIGEL

24 MORE LAYERS
From past experiences, my best suggestion when producing work in Photoshop (especially complex compositions) is to use as many layers as possible, avoiding merging objects together if you can. There is nothing worse than merging something together that later you wish to delete or change especially if you have gone past its History state.

SUPPLIED BY: DARREN FIRTH

25 AIRBRUSH IN ILLUSTRATOR
Lowering the Opacity of a path, adding a Gaussian Blur and combining them with a Clipping Mask in Illustrator allows for wonderful airbrushed styles to be built up with a level of control that isnt found in Photoshop.

SUPPLIED BY: INKWORM

26 EVIL FLASH
Never ever, ever, ever use the default Green-to-Black Gradient Fill tool in Flash. This is evil and will ultimately bring about the demise of humanity.

SUPPLIED BY: LAITH BAHRANI

27 NAME CONVENTIONS
Rather frustratingly, for me and everyone else, I always seem to approach projects in slightly different ways even naming files differently from job to job, with Photoshop versions named with 01, 02, 03 suffixes for one project, and then A, B, C for the next. So, no matter how smoothly the job goes, I admit that there is plenty of room for improved consistency in my approach!

SUPPLIED BY: JASON ARBER

28 GROUP LAYERS
Setting up Layer Group colours and Shy Layers in After Effects can be a massive time saver when it comes to client alterations and amends. I like to take the vector image into Photoshop for a bit of final colour tweaking. I usually do the same in After Effects using a Pre-Comp. I find it unifies the image colours just that little bit more.

SUPPLIED BY: JAMES WIGNALL

29 FORBIDDEN FRUIT
Weve all hit that stage when mastering Photoshop where we forbid ourselves certain filters or effects, but if you take some time to refresh yourself with these forbidden fruits, youre bound to discover some new tricks. For example, while you might not use difference clouds to make a blue and white sky, you can use it to make a selection while in Quick-mask mode, and you could exploit that selection to help render a more organic sky.

SUPPLIED BY: DAVE CURD

30 THINK ON PAPER
Use often-ignored tools called a felt-tip pen and sketchbook first, then a scanner, then various applications the usual suspects. My tip is to think with a pen and paper first, then use computers. It will lead to a stronger, more original voice.

SUPPLIED BY: JEREMYVILLE

Finishing work and finessing
An eye for the final details often makes the difference between a good and great piece of work. So read on and learn to how to put the cherry on top

31 WALK AWAY
I find that it is best to finish my illustration and then walk away from it for a day if I can. Sometimes by the time something is finished I am completely spent, especially when Im up against a tight deadline. Once Ive had a break (even a short one), Ill start up my machine and open up the finished file one last time. If I dont have any finishing touches in mind already Ill usually come up with some refinements that need doing after I look at the finished piece again.

SUPPLIED BY: DEREK LEA

32 ACROBATICS
For print designers, checking overprints, spot colours, trapping and knock-outs in Adobe Acrobat Professional is an often-overlooked step that can save you money and goodwill if your print settings are not right.

SUPPLIED BY: JASON ARBER

33 KERN!
and get a fresh pair of eyes to look at your work. I always ask my girlfriend to look at something Ive been working on. This is mainly because she is not a designer and sees things I dont look for she has a good eye for detail.

SUPPLIED BY: OZ DEAN

34 BACK TO THE BRIEF
Get feedback from the team as well as people not involved you need to stand back at the end and go back to your original notes and thinking. Check it still meets what you set out to achieve.

SUPPLIED BY: RALPH AND CO

35 ENOUGH IS ENOUGH
The most important thing with finishing touches is knowing when to stop. There is always a danger of pushing a piece of work too far. The advantage of computers is that you always have the undo options, but its all too easy to put some cherries on top for the sake of it, when all that it needs is a subtle sprig of parsley.

SUPPLIED BY: INKWORM

36 PRINT FINISHES
I find printing techniques a great way to enrich a project once it leaves the computer. Theres a multitude of ways to enhance a piece that cant be achieved in the digital world. Metallic inks, spot varnish, embossing, de-bossing, foil blocking, matt-laminating or diecutting can all be used individually or together to great effect.

SUPPLIED BY: JEFF KNOWLES

37 ADDING TEXTURE
I suppose most of my work has an organic feel, so for me the finessing is adding various textures and handmade marks such as pencil and crayon. Your instinct should tell you when the piece is complete although this does tend to be more tricky when it comes to personal projects!

SUPPLIED BY: KERRY ROPER

38 BE PREPARED
Working in the motion world can be tough. Print has tried and tested processes for high-quality work, but motion and video work is less predictable. Learn about your compressors and try to learn what works best for you and your projects. Make sure you stay lossless for the entire project a little bit of compression early on will just magnify as the project progresses. Save compression for the final output, and save lossless versions of your final version as well.

SUPPLIED BY: JJ JOHNSTONE

39 A LITTLE SHADING
The last things I normally add to my digital pieces are shadings, shadows and minor tweaks to the colours. These can help to solidify the piece and make it look all nice and polished.

SUPPLIED BY: JON BURGERMAN

40 BULGING EYES
Once a design, site or animation is virtually complete, its good to step back from the whole thing, take a deep breath and stare at it until your face turns blue and your eyes start bulging like that bit in Total Recall. During this time you should look for elements that could be tweaked, polished, scaled, added or removed to some effect. With designs, especially, Ill look for colours that could be made stronger or knocked back, and elements that could be nudged around to balance or otherwise complement the composition.

SUPPLIED BY: LAITH BAHRANI

Things to avoid
Finally, learn from your mistakes. Ten things you should avoid when working with clients

41 READ AND RE-READ!
When writing an email, do not fill the address bar until last. Go back and read what you have written at least twice. Too many people have horror stories about sending an email to somebody that it was not intended for. Dont become one of those people. Its not possible to undo a sent email.

SUPPLIED BY: OZ DEAN

42 BE SPECIFIC
Be specific when working with new clients, especially as far as revisions or changes are concerned. In my excitement to work with a client I didnt spend the necessary time going over the details of what was included in the fee. I received a call out of the blue from one of Canadas leading magazines. I simply said that minor tweaks and revisions would be fine.

SUPPLIED BY: DEREK LEA

43 DONT RELY ON THE SPELLCHECKER!
Dont rely on your computers spellchecker! Always proofread any text extremely carefully. Preferably, get someone else to proofread your work because you may be too familiar with it.

SUPPLIED BY: RIGEL

44 STICK TO THE BRIEF!
In the earlier days we used to do too much to try and win a pitch and produced way too much work on spec it made us look desperate when we were just enthusiastic. Stick to the brief and make sure you have answered it dont deviate, just answer it in the most creative way possible.

SUPPLIED BY: RALPH AND CO

45 WORK WITH CLIENTS
Everyone knows about thinking outside the box, but in creative circles, the real excellence comes from finding the best possible solution inside the clientmade box. Dont look at external direction as a damning prison wall, but instead as a clue to finding your solution.

SUPPLIED BY: DAVE CURD

46 STICK TO WHAT YOU KNOW
Definitely avoid briefs that are not your core strength and style. Ive been that hapless salmon trying to swim uphill with a terribly inappropriate brief on a few occasions, and I now avoid those types of jobs. Choose your clients as well as they choose you. Turn a bad experience to your advantage by not repeating the same mistake again.

SUPPLIED BY: JEREMYVILLE

47 DONT ASSUME ANYTHING
Once we had a very bad experience when we asked for a dummy mock-up from the printers for some packaging with the assumption that we were on the same track. They only showed us a blank mock-up and we assumed it was right, but when they started to print it, we noticed that the cover was on the other side! So never, ever make assumptions.

SUPPLIED BY: INKSURGE

48 JUSTIFY YOUR ACTIONS
I have worked with a few fashion brands recently and they can seem like the worst clients in the world, but I think if you provide valid reasons for your actions and maybe provide several solutions to their requests, you can steer things back into your control. I tried this recently and it proved successful.

SUPPLIED BY: DARREN FIRTH

49 DESIGN HISTORY
Ive never really had any problems, but one thing I always do is to have back-up files. Keep some of the original ideas that you may have presented sometimes people change their minds and this makes it much easier to revert back to earlier stages.

SUPPLIED BY: KERRY ROPER

50 MANAGE EXPECTATIONS
A good way to avoid client problems is definitely to be as up-front about what they can expect and when before the project is fully underway. If expectations are managed as early and openly as possible you can avoid misunderstandings and unreasonable demands. As a rule-of-thumb, a good way to deal with clients is actually to treat them with the contempt you would a small horned imp from the ninth layer of hells gate.

SUPPLIED BY: LAITH BAHRANI

Source: http://www.computerarts.co.uk

Difference between pixels and em.

2010-03-10T23:53:00.000-08:00

Here I tried to describe difference between pixels and em. This text is for those specially who are new in css. As a designer I am always face a question about this topic. So I decide to share my knowledge here because from my view this is a common mistake make every designer at the beginning.
First of all need to know about css. CSS means "Cascading Style Sheets".

It is a system of properties which directly effect the display properties of your web page. By using css you can handle your web site design easily. I think css is not so hard to learn. Because at first I don’t know about web design,css,html. But now I can design a site by css. All I do is just study the syntax of css and learn about every property and value. And at last know how to use css in a site. That’s it you are ready to go. You don’t need to have programming knowledge to learn css. So don’t be afraid keep going.
Now focus all of your thoughts or mental activity in following text to understand difference between pixels and em.

Content is the main power of any website. Those site are good who arrange their content in a clean way. To do this you must need to arrange your text give them perfect font style,size,color etc. You can give font size by css in couple of ways. Here I talk about pixel and em.

Apply font size with pixels
By setting font size with pixel you can fully control over the font size.

Example:

h1 {font-size:60px}

h2 {font-size:40px}

p {font-size:16px}

Above examples allows Chrome, Firefox, and Safari to resize the text, but not Internet Explorer.

The text can be resized in all browsers using the zoom tool (however, this resizes the entire page, not just the text).

Apply font size with em

To avoid the resizing problem in IE many web designer use em instead of pixel. And it is recommended by W3C.

The default font size in browser is 16px. And 1 em is equal to current font size it means 1 em is equal 16px.

Here is the formula to calculate pixel to em :

Pixels /16 = em

That means if font size is 60px it will be in em is 3.75em.

With the em size you can adjust the font size in all browser. But there is problem in IE . The problem is when you resizing the text, it becomes larger than it should when made larger, and smaller than it should when made smaller.

To solve this problem you need to set a default font size in percent (%) fot the body element.

Here is an Example:

body {font-size:100%}

h1 {font-size:3.75em} [is equal 60px]

h2 {font-size:2.5 em} [is equal 40px]

p {font-size:1 em} [is equal 16px]

Now our code works perfectly and shows the same text size in all browsers. It also allows all browsers to zoom or resize the text.

Hope this will help you guys. Enjoy and make something awesome.