Monday, June 21, 2010

15 awesome web services for web designers.

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.

Tuesday, June 8, 2010

Top 90+ Fantastic Design Resources Site For Web Designers

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

Wednesday, June 2, 2010

10 Awesome CSS3 Features which makes designers dreams come true.

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