Archive for 'Tutorials'
Sneaking into Future: 25 Ultra Modern Websites Using HTML5
Posted on 13. Mar, 2010 by Andy Walpole.
HTML5, the next major revision of HTML, the language of the internet, is set to revolutionize the way web developers and designers create websites and the way visitors use them. It’s being edited by Ian Hickson of Google and David Hyatt of Apple, two of the web’s greatest creative minds.
Besides enabling web developers/designers to use cleaner, simpler, more consistent code, HTML5 will help them break free from the confines of 3rd party proprietary plugins like Adobe Flash. For the first time, it will be possible to achieve consistency between video player interfaces and overall website design. Users will be able to rotate, move, resize and even detect motion in a video while its playing, using inbuilt video controls.
Through HTML5’s canvas element, users will be able to render graphics and images on the fly, again without the need for plugins. You can try rotating an HTML5 video here and using the canvas element here. Both feel truly amazing!
Besides demos and other online experiments, there are actually a number of working sites using HTML5 today, although few, if any, make the most of this language’s potential capabilities. We explore 25 of the best below, the vast majority of which belong to web developers and web development agencies keen to show off their HTML5 skills to potential clients. Take a look and explore the code for an insight into the future of the internet. Be warned, however, few display properly in Internet Explorer.
1. Ella Design
Originally from Hong Kong, but now based in the USA, Ella of Ella Design is an award-winning graphic/web designer with over 8 years experience in the industry. Her website is a “playground” in which she engages with HTML5 and CSS 3.
2. Pelletized
Pelletized is the site of Ed Wheeler, Oregon-based graphic/web designer and HTML/CSS developer extraordinaire. He’s played a major hand in the creation of several high-profile sites, including JobInterviewEdge.com and EssayEdge.com.
3. MiniApps
MiniApps is a mobile phone app microsite from Alex Gibson, currently offering two great, free apps for iPhone, Android, Palm Pre and Firefox Mobile: Card Flip, a classic memory game, and Checklist, a to-do and shopping list tool.
4. Donkey Magic
Donkey Magic is Richard Stephenson’s blog. He uses it to keep the world up-to-date with his web development work and life in general. Recent posts include a CSS 3 & jQuery image gallery experiment.
5. Bonsai
Bonsai is a unique web development tool used to build sites that feature lots of images. Bonsai’s own website has been created using HTML5.
6. letscountthedays
letscountthedays is the online portfolio of Shane Howe, web and user interface designer. His client list includes Pinnacle Security and Urban Shadow, for whom he performed all web design, branding and even online copy writing.
7. Sarsini
Learn more about Martin Sarsini, Glasgow-based web developer, on this HTML5-fortified site. This site, which incorporates a blog, is simple, but very stylish.
8. Nimbupani
Nimbupani is home to web designer, Divya Manian. Obsessed with HTML5, you can learn a lot from her blog as well as her Twitter page.
9. Ousmane Ndiaye
Ousmane Ndiaye is a passionate, French web designer. An SEO and W3C standards specialist, his site makes the most of current HTML5 knowledge.
10. Media Research Institute
Experts in all things web based, the Media Research Institute operates from Tokyo, Japan. Besides building websites, the company has produced many popular mobile apps, such as Mixi.
11. Anino
An interesting bunch, Anino are a shadow puppet collective based in the Philippines. Their site offers listings of upcoming shadow-puppet performances as well as several videos highlighting their work.
12. CatCubed
CatCubed is the site of Colin Fahrion, artist, designer, developer and avid cyclist. The site looks great in Firefox and Safari, but Internet Explorer can’t handle the large amount of CSS 3 used.
13. Impactideas
Impactideas is a small graphic design studio based in Belgium with a lovingly designed website. They specialize in the creation of logos, brochures, catalogues and packaging.
14. Moriconi
Moriconi is a highly fashionable Italian hair studio, based in Camaiore, Lucca, Tuscany. HTML5 has brought this straightforward site to the cutting edge of modern web design.
15. LittleCoogie
LittleCoogie, based in Bangkok, Thailand, sells high-end children’s party clothing through its HTML5 e-commerce site, made by Andrew Brundle. Its color-picker tool is a great feature.
16. OK Cool
German fashion blog, OK Cool, incorporates HTML5 into its search functionality and comment forms.
17. Dn’D
French web development agency and Magento e-commerce expert, Dn’D, has created a really stylish site for itself, even if it is a little too reminiscent of the standard OS X Leopard background. Since its formation in 2004, Dn’D has worked with BP, Warner Bros and many other high-profile clients.
18. Sprachkonstrukt
Sprachkonstrukt is a blog covering all things related to design, photography and digital lifestyles. It’s managed by Ruben Deyhle, a web developer who also runs a photo blog on the site.
19. Stompfrog
Stompfrog, website of web designer/developer Chris Bewick, is a wonder to navigate around. Users can scroll through the website using their mouse wheel- a highly original touch.
20. Shape Shed
Shape Shed, website of freelance, London-based developer George Ornbo, was built using Jekyll, a simple static site generator, as well as CSS 3, jQuery and HTML5. Firefox or Safari is needed to see the site as George intended.
21. Smile Sleepy
Jamie Calabro is a web designer/developer with a great knowledge of everything from HTML to CSS, JavaScript, SEO, brand development and even print and packaging design. He can count Coca-Cola amongst his past clients. Smile Sleepy is Jamie’s place to showcase his work to the world.
22. sw’as
The rather unusually named sw’as is the home of 26-year-old web developer Simon Elvery. Alongside engaging articles on everything and anything internet related, you’ll find musings on politics, books, movies, music and more.
23. Frojd
Frojd is a beautifully designed blog from Swedish digital agency of the same name. Thanks to plenty of white space and a grassy header image, this site feels as fresh and airy as a Swedish fjord.
24. Tim Benniks
Tim Benniks is a Dutch web professional who specializes in the development of simple, intuitive interfaces. Use his site to get in touch with Tim himself or to view his past projects, which include a new CMS called Zotonic.
25. DS3
From Sao Paolo, Brazil, DS3 is a web agency with a fantastic eye for visual communication and style. It recently masterminded a new branding initiative for the largest maker of forklift trucks in Latin America, Paletrans.
Article source: Graphic and Web Design Blog -Resources And Tutorials
Continue Reading
The Ultimate Roundup of Amazing Free Social Media Icon Packs
Posted on 12. Mar, 2010 by Siva Kumar.
We hope you have enjoyed our last collection of web and user interface icons. This time you are going to get a good and quality collection of social media icons. This list will be very useful for bloggers,web designers and graphic designers to promote their articles and their services. The usage license is described for some icon packs here.If you need more information about the icons usage you can get from their source page.
To promote your blog or articles in social media world you need a creative and unique icons and i am sure you will find your most favorite and suitable icons here to include them in your blog or website.
1. WHITE MAGIK – A Free Social Icon Pack
A clean set of icons from chethstudios.Re-distribution not allowed! White Magik is perfect for white minimalistic sites and can be used with image hover for excellent looks!. It includes 45 icons in .PNG format.
2. Elegant social media Icon Pack
Just another contribution from chethstudios. An elegant design icons. Well you’re free to use in your blog. But Please DON’T re-distribute.
3.3D Social media icons
This 3D Social Media Icon Pack comes with 20 icons which include your favorite social media websites such as Digg, StumbleUpon, Twitter and lot more from dawghouse design studio.Get the license details of usage from source.
4.Vintage post stamp icons
The set comes with 23 icons of your favorite social media sites, all in 200 x 200px and in transparent PNG formats. These icons would surely be a perfect fit for your vintage or grunge themed web designs!
5.Glowing social niche icons
Neat icon set.License usage :Creative Common license BY-ND
6.Social icons sticker set
Pretty nice icons. It’s a sticker type social icons.Available in .PNG, EPS and Ai format. Free for any use.
7.Social icons vector set
Consists of 16 popular social media icons, available in both vector and PNG (64×64 pixels) format. Free for any use.
8.Social icons pack by Sylwia Besz
Clear design icons.This work is licensed under a Creative Commons Attribution 3.0 License.
9.Social media icons pack from Blogperfume
Designed as a circular style. Available in 3 sizes (128*128, 64*64, 32*32).Please feel free to use Social Media Icons Pack on both personal and commercial projects. These icons are designed by Eli a south Australia web designer. They provided these icons in two parts.
10.Woven fabric social media icon set
This set contains 26 icons of your most favorite social media sites such as Digg, Delicious, StumbleUpon, Twitter, Facebook and lot more! These icons would be perfect for websites or blogs that uses textures or a grungy theme.
11.Social icons made of wood
Wood theme icons from webtoolkit4.me .The set consists of 11 icons in PNG format (64 x 64). It’s free for both personal and commercial projects.
12.Icon texto web 2.0 inside icon pack
Download this free Windows Vista icon pack for your Website or Application. 32 icons in .PNG format.It’s free! These icons are released under CC License Attribution-Noncommercial 3.0
13.Amazing 3d social icons
A brand new set that consists of 20 3D icons in PNG format (64×64 & 128×128pixels). It’s really an awesome icons.
14.Hand drawn social icons
Very cool and creative set of drawn, sketched social icons! Have fun with this one! Hope you enjoy them.
15.Worn out soda cans-social-icon-pack
The Worn-Out Soda Cans Social Media Icon Pack is free to use for both your personal and commercial projects.The icon pack once again features icons of our favorite social media sites in 200×200, transparent PNG formats.
16.Social media icons by plechi
Free vector social media icons.This work is licensed under a
Creative Commons Attribution-Share Alike 3.0 License. Designed by plechi.
17.Jeans-social-media-icon-pack
Great work and unique idea the designer.Free for personal and commercial use.the credit goes to nishad.
18.vector-social-media-icons
This free set includes 50 icons of the most popular social media networks on the internet. The icons are designed in 32px and 16px vector format. With the vector format. Now this icon pack is updated recently.This icon set is released under is licensed under Creative Commons Attribution-Share Alike 3.0 Unported License.
19.Minimum-icon-set
This minimum social media icon set.includes deviantart, delicious, flickr, Gmail, twitter.This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License.
20.Grunge peeling stickers social media icons
This Icon Pack is chuck full of 20 Grunge Peeling Social Media Stickers, This Free Icon Pack is for use in your personal and commercial projects, and can be used without attribution. It may not be redistributed.
21.Iconshock’s free social icon pack
Smooth edge icons and a classy look.It’s a freebie from Iconshock.
22.Wooden badges icon pack
The icon pack contains web and social media icons such as StumbleUpon, Digg, Twitter and several others!.This icon pack is free to use for both your personal and commercial projects but may not be sold or redistributed in any way.
22.Icon pack with PSD
A full set of icons ready for use with mac and pc. Attached with PSD.
23.Social grunge icons
Grunge effect in social icons made in a elegant way.available in PNG format.Designed By: tydlinka
24.Networking and Bookmarking icon set
There are a total of 36 icons with 9 different Social Media – Networking & Bookmarking sites.Of course this pack is going to be regularly updated and reorganized .License/Usage : Free for personal and Commercial work
25.Icons made with the type tool and helvetica
Helvetica social Icons that are 99% made with the type tool in Photoshop.
Everything is made with the type tool in Photoshop and variations of the Helvetica font.There aren’t really any typographical icons around the web like this icons.Free to download and use.
26.Social web button sets
There are 20 social web buttons in two sizes and two colors. Download is free.
27.Old bottle crowns icon set
The icon set consists of 20 very unique and never before created bottle crown icons such as Digg, Stumble Upon, Twitter, Delicious, Technorati and a whole lot more.These icons are free to use for both your personal and commercial projects but may not be redistributed or sold in any way.
28.Gummy-social-icon-set
29.Social trucks icon set
Social Truck Icon set consists of 10 social network icons; These cute icons are designed by Andrea Austoni . Andrea is an Italian freelance designer currently living in Krakow, Poland. He specializes in icon design and illustration.these icons are absolutely free and you are allowed to use them in personal or commercial project. Just don’t redistribute
30.32 Pixel Social Media Icons
Free for personal and commercial use.Cute design.
31.Web 2.0 Gift Icons by IconsPedia
This icon pack contains 14 icons, including popular social bookmarking services and our favourite browser Firefox etc… The icons are available in PNG, ICO and ICNS format. They are free to use for both personal and commercial projects, including websites, templates & software. You are not allowed to sell or redistribute the icons anywhere else.
A Big treat from webtreat
In this below lists you are going to view a massive contribution of webtreats.mysitemyway.com in social media icons.They have done a great work in social media icons! and these are high quality designs.
32.Glowing Neon Social Networking Icons
108 free high-resolution Glowing Neon Social Networking Icons. 2,000 more icons of this style will soon be released on ETC format.
33.Crystal clear bubble icons
It’s an updated set of icons including Drupal,Deviant art icons etc… They are free to download and use. 154 icons available.
34.Blue Chrome Rain icons
2000 more icons are available in this style in webtreats.
35.Orange grunge stickers
Wonderful orange social media icons in grunge style with some pop out effect.
36.Black paint splatter icons
No attribution necessary for these icon packs.Splatter effect in social media icons it’s a creative and unique concept from the designers.
37.Red and white pearl icons
38.Glossy black glass icons
20 web icons in .png format made with these styles, and a layered psd of the image below, which has editable text should you want to use this as a text effect.
39.Blue Jelly Social Media Icons
40.In-focus simple white icons
This matching set is designed to be put in the sidebar of your theme so you can link to your social media profiles.There are 10 more color variations for icon set is available.
41.Glossy waxed wood icons
42.Retro Grunge Stripes Social Media Icons
A classy look and these icons meet international standars.Retro Grunge Stripes Social Media Icons.
43.Crumpled paper social icons
A creative look for social media icons by this way.It’s suitable anything like grunge or crumpled themes.
44.Glassy space social icons
Just another beautiful glassy style icons.
45.Grunge-warning-stripes
46.Vibrant pattern icons
This vibrant pattern icons social media logos set includes the most popular social bookmarking and networking icons (Digg, Delicious, StumbleUpon and Yahoo logos etc…
47.Twitter icons
Free set of unique twitter graphics.There really is no limit to what you can do with this brilliant set, lovingly designed by Pasquale D’Silva.The set includes 40 Files in total, all in transparent .png format.
48.Twitter icons by sibusinho
Really a cute twitter icon for your blogs or websites.Also only noncommercial use is allowed.
49.Twitter icons promo set
This breaks down to roughly 1,800 icons added to each existing set and 20 brand new sets! Here’s a little twitter promo pack with 53 twitter icons, one from each set!.
50.RSS cheese icon style
The set contains 4 high resolution RSS icons that come in four sizes: 512×512, 256×256, 128×128 and 64×64. Icons are completely free and can be used without any restrictions in any type of project including commercial projects.
Article source: Graphic and Web Design Blog -Resources And Tutorials
Continue Reading
Cheap Wordpress Themes: 5 Semi-Premium Designs for Business Websites
Posted on 12. Mar, 2010 by Barbara Holbrook.
We’ve talked about Premium Wordpress Themes ad infinitum on TutorialBlog. But, sometimes you need a cheap WordPress theme that you can get online and looking good in less than an hour. What do you when you (or your client) want it all … and your budget is under $25?
You call in reinforcements!
Take the pain out of working under an impossible budget by making it easy. Your “client” will be pleased as punch with any of these semi-premium WordPress themes and you’ll still have money left to buy a fancy coffee from your favorite java dealer.
What is a semi-premium theme you ask? These themes may not have everything as the expensive, bells-and-whistles-included brand of premium themes. That could mean fewer choices on the theme options screen or only a single page template or fewer plugins pre-built into the site. However, in most areas a good semi-premium theme has everything you need to build a quality website, quick and easy.
Elegant Themes is a WordPress theme club that specializes in semi-premium themes. (...)
Read the rest of Cheap Wordpress Themes: 5 Semi-Premium Designs for Business Websites
© Tutorial Blog, 2010. | Permalink
Article source: Tutorial Blog
Continue Reading
Quick Tip: HTML5 Video with a Fallback to Flash
Posted on 12. Mar, 2010 by Jeffrey Way.
In this video quick tip, we’ll review how to work with HTML 5 video in your own projects. Because older browsers and Internet Explorer do not understand the <video> element, we must also find a way to serve a Flash file to viewers who are utilizing those browsers.
Unfortunately, much like HTML 5 audio, Firefox and Safari/Chrome don’t quite agree when it comes to the file format for videos. As such, if you wish to take advantage of HTML 5 video at this time, you’ll need to create three versions of your video.
- .OGG: This will make Firefox happy. You can use VLC (File -> Streaming/Export Wizard) to convert your video to this format easily.
- .MP4: Many screencasting tools automatically export to Mp4; so you can use that file for Safari and Chrome.
- .FLV/.SWF: Not all browsers support HTML 5 video, of course. To compensate, make sure that you add a fallback Flash version as well.
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>untitled</title> </head> <body> <video controls width="500"> <!-- if Firefox --> <source src="video.ogg" type="video/ogg" /> <!-- if Safari/Chrome--> <source src="video.mp4" type="video/mp4" /> <!-- If the browser doesn't understand the <video> element, then reference a Flash file. You could also write something like "Use a Better Browser!" if you're feeling nasty. (Better to use a Flash file though.) --> <embed src="http://blip.tv/play/gcMVgcmBAgA%2Em4v" type="application/x-shockwave-flash" width="1024" height="798" allowscriptaccess="always" allowfullscreen="true"></embed> </video> </body> </html>
There are a handful of attributes available to the <video> element.
- Controls: Display the play/stop buttons?
- Poster: The value can be a path to an image, that will serve as the display of the video before it is played.
- AutoPlay: Immediately play the video when the page is loaded?
- Width: The desired width of the video. By default, the browser will automatically detect the dimensions of the supplied video.
- Height: The desired height of the video.
- Src: The path to the video file. It’s better to use the <source> child element instead for this task.
Dos and Don’ts of HTML 5 Video
- DO create three version of your video to make Firefox, Safari/Chrome, and IE happy. (.ogg, .mp4, .flv/.swf)
- DO NOT omit one of these formats. Unfortunately, you can’t easily choose to serve HTML 5 video to Firefox, and the Flash fallback to Safari. Safari understands the <video> element, and will expect to find a suitable video format to load. If one is not found, it will display an empty player.
- DO keep in mind that full-screen support will not work in Safari and Chrome. However, with the release of Firefox 3.6, you can right-click, and view in full screen.
- DO remember that the reason why IE loads the Flash file instead is because it does not understand what the <video> element is. However, if a browser DOES understand that element, it will expect to find a suitable file to load.
Please note that, if I can find a suitable work-around for the full-screen problem, we’ll be using this method on Nettuts+ in the near future!
Article source: Nettuts+
Continue Reading
5 Simple Ways to Improve Your Photography and Take Better Photos
Posted on 12. Mar, 2010 by Mathew.
Digital photography is a huge and varied discipline, with millions of photographers worldwide meeting on services like Flickr and Picasa to share their shots, improve their work, and develop their career. Whether hobbyists or would-be professionals, these photographers share one thing in common – a burning desire to improve their photography and take cleaner, more balanced, and overall better photos.
Doing the same for yourself isn’t as difficult as you may think. Almost all digital cameras, even the inexpensive and old, are capable of taking great photos in the right hands. These five tips, tricks, and tactics for taking better pictures can help you improve your photography, build a portfolio of high quality images, and boost your visual artistic ability.
1. Understand Aperture.
Beyond focus, aperture is one of the most important factors in creating great photos. Described simply, the aperture setting of your camera will determine the focal depth (also known as “depth of field” of the shot. A shallow aperture results in a very thin range of focus, which is perfect for framing portrait photos and separating foreground from background. A deep aperture brings almost the entire frame into focus, giving you the ability to photograph large landscapes and environments without risk of blurring or poor focus.
Balancing the two is essential for good photos. Photos with a defined point of focus – photos of people, moving events, or specific objects – benefit from a shallow depth of field, while landscape photos and scenic photography is best done with a large range of focus.
2. Take More Photos.
To an extent, photography is a numbers game. Professional photographers don’t just go out to take a couple of photos and call it a day – they capture everything they can find from every possible angle. Just like design gets better with experience, photography gets better with quantity. More photos means more choice during editing, and a greater range of captures gives you more room to crop photos to your preferences, edit them for use in designs, and apply filters and effects.
3. Always have a camera ready.
For all the Pulitzer Prize-winning photographs that are out there, millions of utterly amazing photos have gone unpublished. Why? Because the could-be photographers with an opportunity to take them didn’t have a camera with them.
Whether it’s your cellphone, a point-and-shoot style camera, or a bulky dSLR, always keep a camera on you. The most interesting and exciting events tend to happen at the most unexpected times, and without a camera somewhere in your bag it’s unlikely you’ll ever be able to capture them. A simple phone camera or small $100 point-and-shoot is more than enough for ensuring you’re ready to shoot wherever you are.
4. Use a camera with manual focus, zoom, and aperture controls.
That ultra-cheap digital camera is only going to last you so long. After years of taking pictures with a point-and-shoot camera, it’s very likely that you’ll outgrow your equipment, or at least hit a plateau with regards to the quality and composition of your photos. Cheap cameras give poor results, both in image size, scale, and clarity. Just like great designers reward themselves with ultra-flash working set-ups, great photographers should reward and enable themselves with better gear.
Stepping up from a point-and-shoot, the best thing to look for is a mid-level dSLR camera. They’re not particularly aesthetically pleasing or compact, but they’re virtually unbeatable when it comes to image quality and clarity. If you’re worried about having to carry a large camera with you everywhere, a digital rangefinder or 4/3 camera could be a better pick. Both offer full manual controls and a range of other photographer-friendly options.
5. Edit every photo you take.
Editing isn’t about applying tacky effects and pushing every filter you can find on top of your photos. While Photoshop may have enabled thousands of wannabe photographers to make ugly HDR shots and terrible filtered landscapes, it’s also given professional photographers the ability to vastly improve their photographs before publishing.
The first edit that any photographer should start with is the levels of their image. Adjust the levels so that exposure is relatively constant and the image is neither too light nor too dark. Then, using the sliding options in Photoshop, feel free to adjust color intensity and saturation, definition and image highlights, and the entire image’s light and gradient profile.
Other creative editing ideas can add interest and life to a picture. Most editing programs offer a range of black and white features, each slightly different from the other. Over-saturation, creative cropping, and different framing options and image sizes can all change photographs drastically. Being too liberal with effects can result in some Photoshop disasters, but a subtle touch can bring life and flair to an otherwise boring photo.
Related posts:
- Stop Stealing!?!? Affordable, High Quality Photos are Within Your Reach Are you a designer and wonder where to find high...
- Five Ways To Improve Your Site Using jQuery jQuery is an excellent JavaScript library with which you can...
- Amazing Light Trail Photography Light Trail Photography is just an amazing way to catch...
Related posts brought to you by Yet Another Related Posts Plugin.
Article source: Reencoded
Continue Reading
Color Correction Basics in Photoshop
Posted on 12. Mar, 2010 by Owen James.
Have you wanted to learn more about color correction? The focus of this tutorial is to help you delve deeper into color correcting to up the production value of your images. Learn a few simple techniques while creating.
I will be using Photoshop CS4 for this tutorial, but all of the features I will use are available in previous versions of Photoshop. Or in any decent photo-editing software.
Primary Color Correction
In this tutorial, our work will be primary color correction. “Primary color correction affects the whole image, utilizing control over intensities of red, green, blue, gamma (mid tones), shadows (blacks) and highlights (whites).”
Overview
Before we begin, you’ll want to be sure that you have at least a novice understanding of the following tools in your photo-editing program: Curves, Hue/Saturation, Photo Filter, and Black & White adjustment layer.
Quick Tip
Keep effects on adjustment or separate layers to enable quick alteration or removal at any time during the color correction process.
Monochrome and Sepia
A monochromatic image is one whose range of colors consists of shades of a single color or hue.
Step 1: First, let’s make our image grayscale. There are various ways to do this, but we’ll look at just two:
I think the best way is to use the Black & White adjustment layer. (This can be found at the bottom of the Layers toolbox.) What is so great about this adjustment layer is the ability to control the luminance of the 6 primary and secondary colors – red, green, blue, cyan, magenta and yellow with the sliders. This is a very useful tool for fine-tuning the the tonal range of your image.
However, the Black & White adjustment layer is only in Photoshop CS3 and newer. So, if you’re using an older version, skip to the next step.
Step 2: Apply the Hue & Saturation adjustment layer. Click the Colorize checkbox and this will automatically desaturate and tint your image. However, the Hue is wrong. So set the Hue to 35. Now it’s starting to look right.
Step 3: Lastly, perfect color brightness of your image with the sliders in the Black & White adjustment layer. Use the eyedropper tool that comes with the filter to select the part of the image you want to alter and it will hightlight which color is in range. But be careful not to drastically change the colors or you’ll be in danger of posterizing the image.
Usually changes solely in the Black & White filter are not enough to correct the image; so apply a Curves adjustment layer on top and get your image looking right. (It’s best to do these steps last – after your color adjustments – so that you’re seeing and effecting the color-corrected spectrum.)
And, for sepia, you’re done.
Rollover Image
In addition, using other monochromatic color schemes are done the same way. Instead of setting the Hue to 35, move the slider to the color of your choice. You also could up the Saturation a bit to make the colors pop. (For the image below, I set the Hue to 295 and the Saturation to 35.)
Rollover Image
Bleach Bypass
A popular image treatment is the bleach bypass. In actual film-developing, this means skipping the bleaching process. This leaves a silver tint on the photograph, as if the black-and-white and color image had been combined. So that’s exactly what we’re going to do.
Step 1: Apply the Black & White adjustment layer once again to your image. (Or desaturate with a Hue & Saturation adjustment layer.) Then, the only alteration we need to do is in the blending mode: change it from Normal to Overlay.
Step 2: Apply a Curves adjustment layer on top. A characteristic of most bleach-bypassed images is increased contrast. So add a contrast curve to your image. But be careful. Adjustments should be minor at this stage because the image has a lot of contrast. Make sure you’re not overexposing in the highlights or underexposing in the shadows.
Rollover Image
Extra: Often, another characteristic of bleach bypass, along with increased contrast, is graininess. If you like, take this effect a step further by adding some noise: Filter > Noise > Add Noise. Make sure it’s monochromatic.
Quick Color Theory
Before we begin working on our next style, we’re going to talk quickly about color theory.
Take a look at the color wheels below. You’ll notice the three primary colors in our RGB color model: red, green and blue. Then, in between those you’ll notice the secondary colors of CMY: cyan, magenta, and yellow. Secondary colors are formed by the sum of two primary colors: cyan is green + blue, magenta is red + blue, and yellow is red + green. Simple enough.
The secondary colors are opposite on the color wheel to the primary colors. Hence:
Red – Cyan
Green – Magenta
Blue – Yellow
Another six tertiary colors are created by mixing primary and secondary colors. But we don’t need to get into that in detail right now.
The primary and secondary colors, and their relation to each other, are important for us to know. In the Curves adjustment layer you can effect color in the red, green, and blue channels separately. So, for instance, any adjustments upward of the diagonal line in the red channel increase the red in the image. Lowering, below the diagonal line, increases the cyan. The other channels are the same: Upward in the green channel, green; lower, magenta. Upward in the blue channel, blue; lower yellow.
Blockbuster/Fashion Look
Ok, now that we got that covered, let’s begin. This style is used a lot in big summer movies, such as the Transformer films. It’s also popular in fashion photography.
First off, take a look at the picture above. In an effort to create this look, determine the color hue and tint of the shadows, midtones, and highlights. Most importantly, the shadows and highlights. You’ll notice that the shadows are very bluish and the highlights – mainly the part of the image containing the skin tones – are, well, the color of skin.
This is a complementary color scheme. Meaning the colors used, blue and orange, are opposite each other on the color wheel.
When working with humans in your compositions, you have to take the skin tone into account. You can’t have people turning green, magenta, or blue. That would look odd. Skin will always be between orange, orange-yellow (tertiary), and yellow. Therefore to complement the subject, generally use opposite colors: between cyan, blue or blue-violet (tertiary).
Now that we know this, let’s stylize our photo.
Step 1: Apply a Curves adjustment layer to your image.
Quick Tip
Nearly every colorist starts color correction with the shadows; then the highlights; and lastly the midtones.
Step 2: In the color dropdown menu, change from RGB – which affects the overall brightness and contrast of the image – to blue. We’ll work backwards up the list, starting with blue and ending with RGB.
What we’ll want to do is bring the lower end of the curves slider up. This will increase the blue in the shadows. Next, to compensate for our first adjustment, we’ll want to decrease the blue in the highlights – taking it towards yellow – so that the skin tones stay closer to being correct.
Step 3: You’ll notice that the image has quite a purple tint to it. This is because the green and red channels are at equal intensity. To get a more blue color you can either go to the green channel and raise the shadows, or go to the red and lower the shadows. But there’s a difference here and you would do well to note it: If you were to raise the green shadows, the image would get slightly lighter and loses contrast. If you lower the red shadows, the image gets darker and gains contrast. The first is subtracting color and the second is adding.
In most cases, you’ll want to go with the option that subtracts, not adds.
And that’s what we’ll do. Go to the green channel, and bring it up just enough to take the purplish-tint out of the image. This is where you can decide between how much blue-violet or cyan you’d like in your blue-tinted shadows.
Step 4: At this point, you may need to go back to the blue channel and make sure the skin tone looks good. Not too blue and not too yellow. Adjust the highlights and midtones until you’re satisfied.
Step 5: Now we can go to the RGB or master channel. Finalize the luminance and contrast of your image. All I had to do with this image was lower the shadows.
I’m sitting pretty with a great look.
Step 6: Lastly, you can complement your image with one more filter. Increasing the blue in the shadows flooded the image with a bit too much color. Add a Hue & Saturation adjustment layer and drop the saturation to around -10.
The change is ever so slight. But, it’s perfection. And now you’ve got a blockbuster or fashion-style image. Smashing.
Rollover Image
Bronze
Like in the film, 300, you can give your image quite a cool bronze look. This is similar to a sepia effect; however, the image shouldn’t be monochrome. Vibrant colors and those opposite to the bronze tonal region are still visible and actually stand out nicely, while the lights and the darks take on the bronze tint.
Let’s use a picture with more colors and a larger tonal range. It’ll be easier to see what’s happening.
Step 1: Start by applying a Photo Filter adjustment layer to your image. Change the filter color to Sepia and set the density between 90 to 100 percent. Make sure the preserve luminosity box is checked.
Step 2: Add a Hue & Saturation adjustment layer next. Desaturate the image anywhere from -10 to -50. Do what looks good to you.
Step 3: Add that trusty Curves adjustment layer. The bronze-style looks quite good with extra contrast. Make a nice contrast curve.
Step 4: An optional step, one which I think looks good, is to add a little diffusion. You can achieve this by duplicating your image layer (and keeping it under the effects). Next, apply a gaussian blur to the layer. Do not blur too much! If you put too much blur, your final image will look like it’s from a dream sequence – very soft.
For this picture, I’m using a 2.5 pixel blur.
Change the blending mode of the blurred image to Overlay. You’ll notice how contrasty your image gets. To keep it from getting too soft, change the fill anywhere from 25 to 50 percent. Then, compensate for the contrast accordingly with your curves layer.
That’s it for the big, bold, bronze look. This kid is vicious on his scooter. Watch out.
Rollover Image
Conclusion
Bear in mind that there are many ways to achieve these looks and styles. There is no correct process or proceedure. Different colorists use different tools. To each his own. Find out what works best for you.
Also, remember that each picture you add these effects to will react differently. You shouldn’t expect these settings – or one specific procedure – to work equally well on all your pictures. It will vary due to the levels or amounts of shadows, highlights, colors, and contrast, etc.
The tendency can be to go overboard with effects. Do your best to use them sparingly and appropriately. When in doubt, less is more.
Go out and take your knowledge further by emulating styles and effects you see in magazines, films, or on the web. That’s a great way to learn. Have fun.
Article source: Tutorial9
Continue Reading
Flags in Website and Template Designs
Posted on 12. Mar, 2010 by Lilian.
Few days back, we wrote about Globe Imagery in 75 Seriously Big Designs, now we are back again with another aspect of graphic design – TemplateMonster’s awesome templates based on Flag style graphics. The following source presents animated and static flag imaging through web technology to show some stunningly-used flag shapes.
Generally speaking, these templates create all the options and keep track of the different flag patters featured in web design. Commonly inserted at the top of existing pages, flag imaging mark the template for any of a variety of purposes targeting patriotic, historic and country related feelings. Designed mainly in blue, white, and red colors, these Flag styled templates would nicely compliment various presentations on political society, historic issues, democracy and the like transporting the senseful flair of patriotic pride and honor. The templates shown below go to fully prove that:
Austin Harp
* * *
U.S. Army
* * *
Flag Shop
* * *
Theodor Kewell
* * *
Independent Politician
* * *
Our Politician
* * *
Political Blog
* * *
Sam Young
* * *
Politex
* * *
Political Online Site
* * *
Morgan
* * *
Flag Store
* * *
USA Today and Tomorrow
* * *
Political Life Blog
* * *
FlagStore
* * *
Russel Williams
* * *
John Smith
* * *
Political Group
* * *
John Anderson
* * *
FLAG.store
* * *
Mark Johnson
* * *
PoliticalGroup
* * *
Social Life
* * *
In the Depth
* * *
Political Party
* * *
Indeed nice templates with folds of national flags on them! If you liked these flag-styled designs we would appreciate some feedback on how you see them to be even better featured on web templates.
Article source: Template Monster Blog
Continue Reading
Incredible Examples of Superman Illustrations
Posted on 12. Mar, 2010 by Teylor Feliz.
I am sure many designers will agree with me when I say that comic illustrations are amazing, and I never get tired of looking at them. The core of a good comic is amazing illustrations, because, in my opinion, the words on the page come secondary to the graphic depictions they accompany. The essence of a comic is to lure the reader into an imaginary world through spectacular graphics, which include the use of color, shading, expression, action, and of course characters. One of the most famous iconic comic characters is the superhero, Superman, which is part of DC Comics. The coloring of Superman is composed of the three primary colors, Yellow, Blue, and Red, which give an aesthetically pleasing effect to this renowned comic character. Here are some incredible examples of Superman illustrations for you to enjoy! Get inspired!
Artist: luxun
Artist: JPRart
Artist: JPRart
Artist: JPRart
Artist: Andy Parkart
Artist: mbreitweiser
Artist: edbenes
Artist: Kerong
Artist: dcjosh
Artist: RobHough
Artist: Skage
Artist: Bakanekonei
Artist: iANAR
Artist: nefar007
Artist: manapul
Artist: NeMAfronSPAiN
Artist: Fikkoro
Artist: Roberto Flores
Article source: Admix Web
Continue Reading
Redesign Process: Taking Small Steps for a Better Website
Posted on 12. Mar, 2010 by Anastasia.
This is experimental article, where you will see whole redesigning process behind the scenes and read different way of thinking. In this review you will be leaded through necessary steps needed to get successful redesign.
If responses and feedback will be positive, we will make this monthly or even weekly event analyzing also well known blog redesigns – showing pros and cons. I think real examples are the best way to show the point and teach something! Let’s start – we will be happy to hear your feedback! It will be exciting!
ReadyPhotoSite is a flash photo CMS created especially for photographers, painters, artists and people of art. The CMS is presented in 3 different packages that vary in functionality and a number of skins, so you can choose the design you like and then choose the website features.
We started working on this ReadyPhotoSite project on May 2009 together with Karen Myers who is presently the CEO of readyphotosite. But Karen is not only a partner, but also a good friend of mine so we were both into it. By the time we started working on website design, the product (the CMS and the skins) was ready and our task was to launch a simple website as soon as possible, apply the changes and make the updates as we go. And so we did.
Starting with a simple website and the problems we faced
The website we have uploaded online consisted of the following main pages:
- home page
- products page
- why buy
- link to blog
- contact page
- links in the footer to Tutorials, TOS, Privacy, Tutorials and Hosting.
The home page had around 10 lines of text and a cool stylish intro in retro style in the middle – home page didn’t share almost no information about the product and thus was pretty useless. Besides it took around 30 seconds for the intro to load and we were loosing most of the people already in beginning process when they were visiting our home page.
Still the owners of the project insisted we should keep the intro as they spent a good amount of money on it and wanted to see it online no matter what.
As I have mentioned at the very beginning of the post, the ReadyPhotoSite websites are available in 3 packages:
- basic,
- advanced
- ecommerce
Look above, there is the screenshot showing how this concept was presented on the website.
While the products page itself had the basic text info, the buttons in the header lead to almost identical pages of basic, advanced and ecommerce packages that had:
- screenshots of design themes listed on them
- the link to the preview
- the buy button
All the pages had the list of the same theme’s screenshots which was obviously somewhat confusing for the website visitors as without visiting the features page they had no idea of the difference and they just saw that same designs.
The initial purchase process was even more complicated. The buy button next to the skin lead to a static html page with 2 options to choose from- “Host with ReadyPhotoSite” or “I already have hosting” and 2 separate links that took you further to the shopping cart page( the WHMCS shopping system allows creating only static product links). It was only later that we realized that the purchase process was a real nightmare with too many steps and no convenient option to choose other design or other package.
The other thing that we initially paid no special attention to was the skin preview page, that was simply opening the website in the new window and where we were loosing customers as well since there was no calls to action or some kind of info how to move forward.
The website required a serious work. In about 3 month after launch we were getting nice targeted traffic from search engines, photo forums and blogs, photo communities, template and CMS reviews websites, paid ads, social networks and our partners, but the website was not converting the traffic into sales. We had a tremendous bounce rate of about 50% and people were staying on the website for less than 30 seconds, getting lost and not sure what to order and how to order. So we have started on conversion rate optimization, creating a user friendly website step by step.
1) Moving the intro to the inside page.
The first step we made was the optimization of the website home page that was the main landing page and where we were loosing most of our clients because of the intro. We have replaced it with the large graphical collage explaining how to launch the website with ReadyPhotoSite CMS and huge buttons next to it: free trial, link to the admin area demo and the link to the page with the intro (requested by owners). Below we had a new keywords-rich text explaining the advantages of RPS and listing some of the main features.
2) Reworking the product pages.
The products pages and the ordering process was a real pain in the ass. We had 4 tasks to solve:
- reduce the number of steps before the purchase;
- give an easy option to get back to other products and packages;
- make the product structure understandable( the relation of skins and packages);
- inform the potential buyer about package features on the fly (so that they don’t go away from the purchase pages to the features page).
And here’s what we did:
- Removed the buttons (and the pages) to advanced/creative/ecommerce packages from the menu.
- Replaced the text on the products page with the list of skins screenshots and added buy and preview buttons.
Now the problem was how and where do we actually link the buy and preview buttons (as there are 3 different previews for every skin (for basic, creative and ecommerce packages) and 6 buy links (as every package can be purchased with hosting or without it)).
The new buy page have solved all the tasks. Before reading this articles further I suggest to open this page online so that you check in real how it works. Click on any buy or preview button on this page http://www.readyphotosite.com/products.php and you’ll be taken to the buy page.
- we combined the preview page with the purchase page and now we keep the visitor focused on the purchase;
- the buy or preview button from the products page automatically loads the preview of the ecommerce package of the chosen theme (since it’s most expensive and we’re interested in more people buying it);
- on the first step you can browse between different themes and the preview will load below (to ensure better theme browsing we have added “hide panel” option at the very top of the page);
- having chosen the theme you can now choose the package on the step 2. Next to every package there’s the price and the list of features included;
- finally on the step 3 you can choose whether to host with ReadyPhotoSite or not. You will also be shown the pricing and the hosting details.
With the options for the 3 steps loaded you can still change the settings on that same page. You can choose the other theme or the other package or change your mind about hosting. Finally the buy button will take you to the purchase page with all the options you have taken.
3) The need in new pages.
Making the analysis of the keywords people were using to find our websites in search engines from Google Analytics we have decided that it makes sense to create the keyword oriented pages giving the same time valuable information about the product. Some of the keywords included:
* Photography Website Design
* Family Website Design
* Personal Website Design
* Wedding Website Design
* Maternity Photo Website Design
* ReadyPhotoSite review
While creating the pages we have faced another problem. The main website navigation allowed 5 buttons only and the footer was already crowded with the sub pages and we simply had no place to add the pages. In the next 2 points below I’ll be explaining how we addressed this problem.
4) Creating new home page.
Having tested the new home page for several months time we were still not satisfied with the results. We needed to push more people to the products pages and use the place on the home page in more efficient manner. Though the picture was good for people, the home page itself could not be called a good landing page.
1) First of all we decided to decrease the size of the header area, as it was nice but not functional so we reduced it by 40% or so.
2) We then decided to decrease the height of the collage on the home by 50% to give more place to content and other stuff.
3) To catch the user attention with the products right on the home page we added the big screen of the featured theme linked to the buy page.
4) We added pretty huge buttons linking to the products page, admin area demo, free trial and the buy button for the featured theme. Having all this main options in the center of the page the website visitor don’t even have to click on the menu to go to the main pages, it’s very intuitive and user-friendly.
5) Following point 3 (the need of the new pages) we added the links to the new pages and the section for
testimonials thus giving the website visitors the information they were looking for directly from the home page.
5) Reworking the blog pages
Writing lots of articles about photography, photo website design and promotion as well as just some fun posts, we were getting really good traffic both from social networks and search engines to our blog. For the first 2 months we were just attracting people by interesting and useful tips trying to get the reputation. In the new few months we have taken the following steps to make this traffic result into the product purchase
1) Added the banner to the left column offering to exchange old photography website to the new one with 20% discount.
2) Added the big buttons linking to the features page and free trial.
3) Finally we have replaced all that we have with the banner rotating the screenshots of our products, big button with the “free 7 day” website trial on it and the full list of product features. It was only this last update that has helped us to drive traffic from blog to the website features and product pages.
6) Reworking the menu structure and adding new pages
Viewing the entrance and the exit points of the website pages we were noticing that our visitors were not finding answers to the questions they were looking for. It was then when we decided to create the product guide section of the website that would contain all the info needed to make a decision.
We have replaced the Why Buy page in the main menu with the product-guide and created the sub pages that now contain most of the website/product info in the structured manner. We have also created the new samples page showing how of our clients customized the default themes and illustrating the changes that can be made from the admin area.
In conclusion
We’ve made a long way studying visitors behavior before the website started looking like this http://www.readyphotosite.com. I have learned that there is always place for improvement and that we are just on the start, not on the finish. We have tried different font sizes, buttons, graphical presentations, motos and texts. We still want to try Google Website Optimizer, add Google Translate, feedback form and some other cool features to make the website even more user-friendly and intuitive. You have to act to be on board. Below are some figures from the stats showing how successful the changes we performed has been so far:
- After second home page update and restructuring of the purchase process the views of the products and buy pages has increased by 50%;
- Thanks to rotating product screens about 10% of the blog visitors now visit the product pages;
- Adding new information and keyword-rich pages increase traffic from the search engines by 30%;
- Adding product guide increased the number of free trials by 30% and the number of general product inquiries by 25%.
Unfortunately I can’t share all the details with you, but overall it was worth the efforts and we’ll keep on working!
Article source: Graphic and Web Design Blog -Resources And Tutorials
Continue Reading
Giveaway Ads Slot For Top Two Commentators Each Month
Posted on 12. Mar, 2010 by Wajid Khan.
Free Ads Slot For Top Two Commentators Each Month
First of all i would like to thanks to all of my Readers, Visitors and Commentators for supporting Themeflash for taking into next generation of design and development blog. we are happy to say that we are starting to give something special for readers and visitor to gain more traffic for their blog. And we have decided that we will give you the Two Ads Slot of 125×125 for top two commentators on the blog and one copy of template by System32 from Themeforest.
Subscribe to our RSS or Email Updates Its free of charge to stay updated form our Recent article and Giveaway .
What you have to do?
- You can give jpeg or png file format in 125 x 125 pixel size with link and title. We do not accept Flash based images.
- The Ads should be related to Web Design, Multimedia, CSS, Vectors, Themes, Freebies Etc. – and please no adult or semi nude ads or other hosting company.
- Follow me Twitter @themeflash. Many of you following me already. But those who are not following me can follow now for latest updates and giveaway .
- Please try to write a short review about my Themeflash blog in ALEXA Rank, if you like it. It will help me to run this Community successfully and giveaway some cool Premium items for readers of Themeflash in future,
- We are preparing some good eye catchy articles related to Inspiration, Tutorials, Freebies, coding, showcases and wordpress as you can view in my previous post. So Just Subscribe to our Newsletter! to stay updated about freebies, tutorials and more …!
The winner of this giveaway will be declared in the end of this month. Now be the first to comment on Themeflash, Thanks.
Related posts:
- Top Design Blogs To Follow Here I’ve composed a list design resource most of the...
- Top 50 Design Blogs To Get Follow Every designer needs inspiration once in a while Finding inspiration...
- Top Most Wanted Wordpress Hacks One of the reasons people love WordPress so much is...
Related posts brought to you by Yet Another Related Posts Plugin.
Article source: Themeflash : One Stop For All Your Web Resources
Continue Reading
CodeIgniter from Scratch: File Operations
Posted on 11. Mar, 2010 by Burak Guzel.
In today’s episode we are going to be working with several helper functions, related to files, directories, and downloads. We are going to learn how to read, write, download files, and retrieve information about both files and directories. Also at the end we will build a small file browser that utilizes jQuery as well.
Catch Up
- Day 1: Getting Started With the Framework
- Day 2: Database Selecting Methods
- Day 3: Sending Emails
- Day 4: Newsletter Signup
- Day 5: CRUD
- Day 6: Login
- Day 7: Pagination
- Day 8: AJAX
- Day 9: File Uploading and Image Manipulation
- Day 10: The Calendar Library
- Day 11: File and Directory Operations
Day 11: File Operations
Article source: Nettuts+
Continue Reading
5 Top jQuery Chart Libraries for Interactive Charts
Posted on 11. Mar, 2010 by djavupixel.
Nowadays the need for an easy way to add interactive charts becomes essential because we are shifting from pc applications to web application. jQuery and other libraries allows to make accessible data visualization in (x)HTML, giving us this needed functionality.
In this article we are going to present 5 chart libraries that suit different needs from simple charts to high complex charts. Most of them are free for personal and commercial use.
1. jQuery Visualize Plugin
jQuery Visualize Plugin is the perfect plugin if you have a table and want to generate a chart out of it. It offers different types of charts such as Bar, Area, Pie & Line charts.
Examples
Type of Charts: Bar, Area, Pie & Line.
Requirements: jQuery, excanvas (included)
Browser Support: IE6*, IE7*, IE8*, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9.
* HTML 5 canvas element is not supported by IE but Google maintains a library that translates canvas scripting into VML, allowing it to work in all versions of internet explorer.
Demo: http://www.filamentgroup.com/examples/charting_v2/index_2.php
License: MIT and GPL licenses
2. Highcharts
Highcharts is a really impressive jQuery Chart Library. In a few words Highcharts is compatible with most Browsers and even the iPhone; numerous chart types are supported; it is a dynamic plugin because you can add, remove and modify series, axes or points at any time after chart creation and you can load data from external files; tooltip labels are also supported which is great for detailed information in a point of a chart; zooming and last but not least all text labels can be rotated in any angle.
Examples
Line and column example
Columns with rotated labels
Type of Charts: Bar, Area, Areaspline , Pie, Line, Spline, Column & Scatter.
Requirements: jQuery or MooTools
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and iPhone!
Demo: http://www.highcharts.com/demo/
License: Creative Commons Attribution Non-Commercial 3.0 License. Free for personal website, a school site or a non-profit organization. For a single commercial Website the license costs $80.
3. Flot
Flot is as the authors call it an “Attractive Javascript plotting for jQuery” which is true. The charts look simple and nice, it is easy to create charts and all settings are optional. Some key features of plot is turning series on/off, zooming, interacting with the data points and it integrates a simple tooltip feature.
Examples
Tracking curves with crosshair plugin
Type of Charts: Bar, Area, Point & Line.
Requirements: jQuery
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and Konqueror 4+.
Demo: http://people.iola.dk/olau/flot/examples/
License: MIT License
4. jQuery Sparklines
Sparklines generates small inline charts either inline in the HTML or via JavaScript. It is really good for displaying mini graphs notably because most of them just take 1 line of HTML or JavaScript code. Another great feature is it self-refreshing capabilities. You can see it in their Mouse-Speed demo which shows you the power of live charting.
Example
Type of Charts: Bar, Tristate, Bullet, Box Plot & Line.
Requirements: jQuery
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and Google Chrome.
Demo: http://omnipotent.net/jquery.sparkline/
License: New BSD License
5. jqPlot
jqPlot did not catch my eye at first glance but after further research I found it to be one of the best and free jQuery chart library. Numerous graphical options are available you can even add shadows and interact per drag&drop in the charts! It even automatically computes trend lines. We could compare it to highcharts in terms of features and functionality.
Examples
Type of Charts: Bar, Pie & Line.
Requirements: jQuery
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and Google Chrome.
Demo: http://www.jqplot.com/tests/
License: MIT and GPL version 2 licenses
Conclusion
As you may have seen from this 5 jQuery chart libraries they suit different needs. First Sparklines generates a small inline chart which is perfect for charts where the precision is not important. You look at the small chart and you should directly know what happened.
Highcharts, Flot and jqPlot are very powerful jQuery chart libraries. My personal favourites is Highcharts and jqPlot. The visual quality of Highcharts charts are better than jqPlot but the last one is free. I recommend you to test at least one of them and you will see that they are really powerful.
Finally jQuery Visualize is really easy to use and specially adapted if you want to create a chart out of a table, just like you would do it in excel. This can be convenient when you need a table and a chart to visualize your thoughts. Feel free to give your feedback via comments section.:)
Article source: Graphic and Web Design Blog -Resources And Tutorials
Continue Reading
Showcase of 30 Beautiful Blog Designs
Posted on 11. Mar, 2010 by Vandelay Website Design.
It’s been a while since we did our last blog design showcase, so this post is a collection of 30 beautiful blogs for your design inspiration. You’ll see some that use a minimalist design approach, others that use a grunge-style design, some that are magazine-style, and more. For more blog design inspiration, please see our gallery site Blog Design Heroes.
For more design inspiration please see:
- 40 Inspiring Blog Designs
- 25 Beautiful Blog Comment Designs
- 30 Creative Website Headers
- Button Design Showcase
Article source: Vandelay Design Blog
Continue Reading
Create A Stylish And Sleek Play-Station Portable Icon
Posted on 11. Mar, 2010 by ES Productions.
In this Photoshop tutorial we’ll learn how to create a stylish and sleek-looking play station portable. This is very detailed, but advanced tutorial, so if you have basic knowledge and understanding about Photoshop you should be able to easily keep up and let me guide you through this PSP creation process. Each step is followed by screenshots to give you a better understanding. Note that you can always improve and add more details to such designs – it’s hard to understand at first when to stop and when less is more, but I am sure you will get those skills automatically after you’ve done several tutorials and some tweaking by yourself!
This is what we’ll be creating today! Looks good? Great – let’s get started:
Step 1
So at first, let’s create a New Document with sizes – 900×600 px. We will starting by creating the background.
Create a new layer (press Ctrl + Shift + N) fill it (with any color).
Open the Layer Style window and apply this Gradient Overlay.
This kind of gradient you should get:
Step 2
I’m going to use guide lines to create the PSP shape, so let’s place all the lines that we’re going to need. (To activate the guidelines, you have to activate the rulers at first (CTRL + R) then what you do is click on the ruler, then hold and drag it into position).
For the Horizontal guidelines set: 250px, 280px, 510px, and 540px and for the Vertical guidelines: 120px, 200px, 660px and 740px.
TIPS:
- CTRL + ; will hide or show the guidelines.
- Use the move tool to move the guidelines around.
- Slide the guidelines back to rulers to remove them.
Pick the Rounded Rectangle Tool (U), set radius to 10px and do the same like I did on the picture below:
Now do the same as I did in the next picture. I used another color so you could see better difference:
Step 3
Now create a new layer, set the Brush Tool to 411px and draw two rounded circles as seen in screenshot below:
Now set circled brush layer behind the other layer and erase the parts you don’t need:
Step 4
Create a new layer, make selection with Lasso tool(press L to get it) similar like in the screenshot below and fill it:
Duplicate it 3 times more and set the others to each corner of the shape. You can go to Edit, Transform, Flip Vertical and/or Edit, Transform, Flip Horizontal to help you rotate the shapes.
Now select all the (parts) layers (Hold Ctrl and click the layers), right click and select ”merge layers” and add these Blending options:
Step 5
Now with your psp shape still selected let’s create a new layer, select the brush tool and choose white.
Set 35px for the brush tool and then select the Pen tool (P) and create a line like I did. then right-click and select “stroke path”, choose brush and hit OK.
After that click right click and click “delete path” and set the Opacity (of the layer) to 20%.
Create a new layer, set the brush tool to 16 px then select your Pen Tool and create something like this then right click and select “Stroke Path” – choose brush and click Ok. Right click again and click “Delete Path”.
Select the Eraser and erase the unnecessary parts:
Create a new layer, set the brush tool to 170 px and draw the left side to give it shining effect:
Then set the Opacity to 62% and erase the parts you don’t need.
Now select your Marque Tool (M) and move your selection using your arrow keys a bit to the right and inverse your selection (Ctrl + Shift + I) and press Delete. Finally press Ctrl + D to De-select your selection.
Step 6
Let’s create a new layer and create a circle using the Elliptical Marquee Tool (M) (hold down shift to draw a precise symmetrical circle) and fill it.
Open the Blending Options menu and adjust the settings like in image:
Create a new layer and create a smaller circle to fill it:
..and add these Blending Options:
Step 7
Create a new layer and add a create a small circle like this,fill it:
Add these Blending Options:
Step 8 – Adding text and details
Now select the Text Tool (T) and type SONY with a dark color. I used the font Engravers MT, type UMD with the color code: (#a8a8ad)
..then create something like this using your pen tool (P) to achieve little perspective:
Set your Brush Tool to 2 px, then select your Pen Tool again and stroke it with a gray color (mine is #404041).
(you can duplicate it and set a darker one in its side like i did) ..then duplicate it (Ctrl + J) and go to Edit, Transform, Horizontal Flip and set the duplicated layer on the other side of the circle.
Step 9 – PSP Text
Now create a new layer and using your Pen Tool (P) let’s create the PSP.
Lets begin with the “P” – make sure your Brush Tool is set to 2px, select your Pen Tool again and create something like in the screenshot below:
Stroke it with a white color (right click on selection), delete the path.
Follow the same steps to do letter “S” as well.
..create selection, stroke it… and do the same with the third letter “P”.
Now add these Blending Options to letters:
Step 10
Create a new layer and now we will add a little bit more details in design. Create selection like in the screenshot below with your Polygonal Lasso Tool (L):
Fill it with white and set it below the psp shape layer. DONT DESELECT THE SELECTION.
Select your Brush Tool, set it to 42px, and brush something like I did from the corners to get some shadowing and 3D effect.
Okay, we are done with bottom side, now let’s get to the top.
Create selection like in the screenshot and set it below the PSP shape:
..like this:
Now set these blending Options:
We need the same effect on the other top side of ou gadget right?
Just duplicate the layer and go to Edit, Transform, Flip Horizontal and set it on the other side of the PSP shape. Let’s compare our outcome which is petty much finished, but we will add some more details to make it look really good:
Step 11 – Final Tweaking
You can brush with a black color at the bottom of the PSP like i did in the next picture to achieve more 3D like effect:
Select all the layers EXCEPT THE BACKGROUND (Hold down Ctrl), right click and select merge layers. Hold down Ctrl and click the PSP layer to make a selection, you should get selection like this using your Pen Tool (P):
Right..now set your Foreground Color to white, right click, go to Fill path… and hit OK then set the Opacity to ~ 36%, set your brush tool to a soft brush of 200px, set the Opacity of the brush tool to 50% and erase the parts you don’t need anymore like screenshot below:
Now Duplicate the PSP layer (Ctrl + J) and go to Edit/Transform and select Rotate 180 degrees, set it below the other layer.
Now lets add some reflection, shall we?
With the Duplicated layer selected go to Filter, Blur, Gaussian blur and set the radius to 3.8px:
Now set the Duplicated layer’s Opacity to 60%. Select your eraser and set it to a soft brush of ~185% set the eraser’s Opacity to 50% and erase like i did to achieve natural reflection:
Congatulations – you’re done!
If you have any questions about any of the steps, don’t hesitate to ask!
Article source: Graphic and Web Design Blog -Resources And Tutorials
Continue Reading
New Premium Series: Tumblr Theme Design – Start to Finish
Posted on 11. Mar, 2010 by Jeffrey Way.
Tumblr’s popularity over the last year has increased exponentially. The reason why is quite simple: Tumblr is flexible, powerful, and, most importantly, a pleasure to work with. Unfortunately, there aren’t many training resources available for the platform yet. In this video series, we’ll go through the process of taking a Tumblr theme, designed in Photoshop, and converting it into a fully working theme – in just a few hours.
To take advantage of this mammoth video series, become a Premium member!
Watch the Intro
The Full Series
- Chapter 1: Intro
- Chapter 2: Slicing the Design
- Chapter 3: Creating the Markup and Adding the Tumblr Template Tags
- Chapter 4: Adding the CSS
- Chapter 5: Configuration Options
- Chapter 6: @Font-Face and Custom Fonts
- Chapter 7: Slide-out Panel – HTML and CSS
- Chapter 8: Slide-out Panel – jQuery
Final Design
Thanks to Kate Payton for submitting the design for this tutorial.
Join Net Premium
For those unfamiliar, the family of TUTS sites runs a premium membership service. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. If you’re curious about the other Premium tutorials that we have available, check here. Join today!
Article source: Nettuts+
Continue Reading
Color Isn’t Always Better
Posted on 11. Mar, 2010 by Jennifer Moline.
Do designers dream in Pantone with visions of rainbows in their heads? Color is a vital part of any graphic designer’s life – after all, they’re the ones paid to come up with pleasing color combinations that will sell a product. That’s why you often see a bold use of color for logos (think Pepsi’s use of primary-color red and blue) as well as websites (such as Graphic Design Blog’s paint-spattered header). While color definitely garners attention, there are times that black and white or a sepia tone will generate a different feeling. Think of how The Wall Street Journal, with its use of black and white, commands a serious, all-business sense, or how photos from the 1800s and early 1900s have an old-timey look with their sepia tone. Here are some more examples.
David Airey's blog
Graphic designer David Airey maintains a simple website with clean lines and black text on a white background. That lets the color photos on his blog – which are often of his work – shine through. The lesson here? Use black and white when you want other elements, such as your portfolio pieces, stand out.
i live here:SF blog
Nothing says “classic” like a tone down from bright colors. Color photos can be beautiful, of course, but sometimes they can be garish. A sepia tone works well when you want to use a photograph on, for example, invitations, memorial service cards and business cards, because it conveys a sense of respect. A two-tone color scheme also works for the website example above because it creates a sense of contentment and relief; a full-color photo would have signaled more joy, but the essay – about recovering from cancer – is more about a happiness well earned after a lot of heartache.
Graphic design is not always about flashy and new. There is a time and a place to go back to basics and choose black and white instead of color. Just be sure to identify what feeling you want to bring out with your project as well as how you want yourself or your client to be represented.
Sponsored by
Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)
Article source: Fuel Your Creativity
Continue Reading
Inspiration: Awesome Book-Related Website Designs
Posted on 11. Mar, 2010 by Callum Chapman.
If you’re a book lover, you may have noticed that the vast majority of book-related websites out there leave a bit to be desired when it comes to design and information architecture. In fact, some author and publisher websites make me feel like my eyes might bleed!
But there are some gems out there, and we’ve collected some of the best. If you know of any other fantastic book-related websites, whether they’re for authors, individual books, publishing companies, or blogs, let us know in the comments.
Authors & Individual Book Sites
Author websites are some of the more challenging sites to design. If an author has a large backlist, it can be difficult to figure out how to showcase all of their work effectively. And if the author has only published one or two books, it can be hard to have an effective site that doesn’t feel empty.
And in reality, there are a lot of things an author’s site needs to accomplish. It needs to provide readers and potential readers with information about the books and why they might be interested in reading them. It needs to give booksellers information about the books, and why they should stock them. And it needs to act as a constant promotional tool that will help the author sell more books and gain more fans.
Dear Author has a great post on what many author websites are lacking. The list includes things like a printable book list, a link on the home page to contact the author, and a highly visible “coming soon” section. Check out the full list for more points to keep in mind if you’re designing an author’s website.
Here are a few great author and book websites you should be sure to check out for inspiration and ideas.
No One Belongs Here More Than You
Stories by Miranda July
This is one of the most creative books websites I’ve ever seen. While it’s not the most user-friendly of sites, it suits its purpose and does well to hold reader interest.
Justine Larbalestier
An excellent, clean-looking design that still has plenty of character. Her books are prominently displayed on the home page, along with links to her blog, about information, and other important parts. She also includes information about events, interviews, and specific book info on the home page, a big plus for readers and book sellers.
Stephen King
Stephen King’s presents its own challenges to a designer, mainly the sheer volume of information it needs to contain. King has written well over sixty books, has had a number of his books adapted for the screen, and has written numerous short stories. But his site manages to include all the pertinent information a visitor might be looking for while also showcasing his best and most recent works, all while maintaining a very streamlined and professional design.
Cherry Adair
Cherry Adair’s website fits well with the types of books she writes. The only downside to the site is that it’s entirely Flash-based, though the interface itself is slick and very responsive. She includes all of the information one would expect on an author site, including a printable, PDF booklist.
Jim Collins
Jim Collins’ site takes a much more minimalist design approach than many of the others on this list. The color scheme is limited and sophisticated, there’s plenty of white space, and only necessary content is included.
Jean Chatzky
Jean Chatzky’s website is well-suited to the types of books she writes and the brand she’s built for herself (you may recognize her from her regular appearances on the Today Show). It’s professional but unintimidating and has a friendly feel to it. It also provides all the necessary information you’d expect and is easy to navigate.
Hank Phillippi Ryan
Hank Phillippi Ryan’s website is bright and colorful, which matches the covers and style of her books. The layout is reminiscent of a grid layout and makes good use of negative space.
Caroline Tiger
Caroline Tiger’s site has some of the best use of color of any author site I’ve seen. Navigation is simple and straightforward, the emphasis is placed squarely on her books, and the overall impression is professional but relaxed.
Nicholas Sparks
Nicholas Sparks’ website makes great use of large background images and transparency. It’s easy to find the information you might be looking for, with prominent links to his books and movies, as well as appearances and biography information.
Publishers
Publisher websites have to be many things to many people; not always an easy task to do well. They have to showcase their books to potential readers. They have to appeal to booksellers and convince them to stock more of their books. They have to give information to prospective authors, either in the form of submission guidelines or guidelines that tell them they don’t accept unagented submissions. They have to provide information to the media and book reviewers. And sometimes, in the case of the larger publishing conglomerates, they also have to present a united front across multipe imprints.
The best publisher sites showcase recent books as well as best sellers. They make it easy for readers and booksellers to make decisions regarding book purchases. And they provide all the necessary information about the company, the books, and the authors for anyone looking.
Here are some of the best book publisher websites out there. They run the gamut from small publishers with only a handful of books to large publishing houses that publish hundreds of titles each year. What they all have in common is good information architecture, a clean style, and excellent user experience.
Dragon International Independent Arts
The DIIArts site packs a lot of information into a small space while maintaining an uncluttered and clean-looking layout. Their main nav includes nine tabs while still leaving some breathing room. The use of icons throughout the site helps to unify everything, as does the light color scheme.
Arcadia Publishing
Arcadia Publishing’s site fits its business perfectly. It has a vintage feel to it, which fits them since they’re publishers of historical nonfiction. The site is easy to navigate and effectively showcases important information (like the fact that they offer free shipping).
Melville House Publishing
The Melville House Publishing website has a simple blue and white theme throughout. It has a minimalist, grid-based layout nad a lot of white space. Information is easy to find and their books are displayed prominently.
Princeton Architectural Press
Princeton Architectural Press’s website is great because it’s design is a bit unexpected. The bright yellow background and grid-based layout are visually striking, which is entirely appropriate for a publishign company that focuses so heavily on design, but also a bit unexpected for a site in such a conservative industry.
Penguin Group USA
Among all of the big-name publishers out there, Penguin has one of the most attractive websites. Their layout is well-ordered, the color palette is refined, and they place emphasis where appropriate. There’s a ton of information on the site, and yet it feels uncluttered.
Timber Press
The Timber Press website makes great use of color and has a fantastic layout. The design is eye-catching and easy to navigate, with a well-implemented slideshow showcasing some of their books on the home page.
Llewellyn
Llewellyn’s website uses a muted color palette and three column layout that creates a sophisticated and professional feel to their site. They make it easy to browse their books, as well as to find other information about the company and their authors.
Storey Publishing
Storey Publishing is another company that opted for a muted color palette and simple layout. The green accents on the site fit well with the country-living and outdoor-themed books they publish, as do the graphics throughout the site.
Gibbs Smith
Gibbs Smith makes great use of Flash to showcase books on their home page, but otherwise keeps their layout fairly simple. They emphasize their best-sellers but make it easy to browse their entire catalog or find information about their authors. The red, burgundy and gray color scheme is sophisticated and feels very neutral.
Other Sites
Publisher and author websites aren’t the only sites out there that target book lovers. There are communities for readers (and writers), blogs and book review sites, and service sites for readers and writers alike.
The sites below target many different demographics, but each focuses on great user experience and simple architecture. Each has its own distinct style that adds to the user’s overall impression of the site and the company or people behind it. And each one has a clear purpose and mission that they accomplish well.
IndieBound
IndieBound is a community for independent bookstores and their customers. Their site is well-laid-out, has a great color scheme, and a unique design. They have a lot of information on the site, but it remains easy to navigate and find the information you need. They even manage to make the wide variety of graphics used on the site appear cohesive.
The Fiction Project
The Fiction Project at Art House Co-Op has a really awesome site design. The overall look represents the artistic sensibility of the project, but all information about the project is easily found and legible.
Lulu
Self-publishing company Lulu has a well-designed website that focuses on user experience. They keep graphics simple and use them specifically to highlight their services. The color scheme is consistent (white, blue and orange), and there’s plenty of negative space in the design. What sets Lulu’s site apart from many other self-publishing sites is that they’ve made it just as easy for book buyers to use the site as they have for authors.
Readerville
Readerville uses a simple two-column design with brownish-orange, burgundy, and muted blue accent colors. Readability is given the utmost importance in this design, with usability a very close second. While the site is no longer updated, it is still a great example of a book-related site design.
DailyLit
DailyLit, a service that delivers daily reading to your email inbox, has a fantastic website that uses a muted, cool color palette and grid-based layout. The site is easily navigated and showcases their services and the books available.
Blurb
Blurb is another self-publishing service that puts more emphasis on style than many other self-publishing sites. They offer good user experience for both authors and book buyers, and showcase “staff picks” on the home page (something many self-publishing companies don’t bother with).
The Millions
The Millions is a book review and culture site that uses a grid layout and mostly-black and white color scheme with bright orange accents. The layout of the site is fantastic, and the entire thing feels very modern and refreshing.
Guys Read
Guys Read is a literacy site for boys that places a heavy emphasis on typography. The site uses a red-white-and-blue color scheme and plenty of white space. It uses a mostly two-column layout and has a very masculine feel to it without feeling stuffy or staid.
Article source: Nettuts+
Continue Reading
Ultimate Roundup of Free User Interface Icons
Posted on 10. Mar, 2010 by Siva Kumar.
The role and purpose of icons is user interaction is very important these days. Icons can enhance the user experience and user friendly icons are really appreciative but they should be unique and easy to understand. There are so many icon websites available on the web but what we are presenting here is only high quality and web2.0 free icon packs collected from various websites ,designers galleries and blogs.
In this icons series we have divided the icon packs in to three main categories. Web and user interface icon-packs, Social-media packs and other icon packs.You might have seen these icons somewhere, But we narrated here some of them you might have not seen. Not all icon packs are for commercial projects, you can use some of them for your private projects and for your personal use. Please see the usage license and derivation rules carefully before using any icons.I’m 100% sure you will love this Huge and Extensive collection of icons.
Web and User interface icons:
In this category you can download the vector,dock and some illustrator icons for your web design and development system and your CMS too.
1.Scalable icons
This set contains 25 scalable Illustrator format icons.
Disclaimer & Conditions: The set is licensed under Creative Commons License.Redistribution, Release for Download, use for commercial purpose or selling of these icons on an another site without permission is completely prohibited.
2.Free vector icons
Here are 30 free vector icons with an apple touch to it. The download contains the PSD source file.These icons can also be used as iPhone menu bar icons.
3. Diagona-icons
400 (200+200) icons are included in PNG format (10×10 and 16×16 pixel).To remove the attribution, please purchase the license.
4. Free web development icons
Free web development icons icon set is done in web 2.0.
License: These icons are free to use in any kind of project unlimited times.
Amount of icons: 80 , Icon Sizes: 24×24
Amount of icons: 60 Icon Sizes: 24×24
Amount of icons: 26 Icon Sizes: 16×16
Amount of icons: 32 , Icon Sizes: 16×16
Amount of icons: 26 , Icon Sizes: 16×16
5. Blogging icon set
Specially designed for bloggers. There are totally 12 shiny and modern icons for your blog. Sizes 24×24, 36×36 and 48×48 in png format. Blogging Icons Set is released under Creative Commons License, please feel free to use it on your personal and commercial projects.Designed by Blog perfume.
6. Go-green-minimalistic-icons
In this icon pack, there are 108 different icons. You can use for your websites, blogs or applications. These icons comes with e Commerce icons, social media, computer accessories, multimedia icons.These icons are available in 64 x 64 px and in transparent PNG formats.It’s a freebie from Dawghouse design studio.
7. Tango icons
It’s a revision pack of the previous release in Tango style.licensed CC BY-SA.
8. Function-icon-set
A consistent style with a glossy look with a set of 128 Free Icons for you to use in any projects,These icons are absolutely free! You can use them anywhere.
9. One bit icons
Icon set of 50 icons.
License: These icons are free to use in any kind of commercial or non-commercial project unlimited times.
10. Vaga icon sets
Set of 60 icons, semi-transparent .png icons (16 x 16) ready to use and available for free download.
11. Woofunction-web design icons
The Woo Function icon set includes 178 amazing web-related icons in a sophisticated and glossy design style. All 178 icons are available at 32×32 pixel PNG files.This is a classy icon set from woo themes.It’s a collaboration of wefunction and woothemes.This icon set is released on the GNU general public license.
12. WIP-Web-Iconset
A beautiful icon set for web designer’s personal use.
License: For non-profit use ONLY. Commercial(e.g. for company website, application interface etc.) use is strictly forbidden.
13. Iconic project
Iconic is a minimal set of icons consisting of 103 marks in raster and vector formats — free for public use.This set is currently licensed under the Creative Commons Attribution-Share Alike 3.0 license.
14. Glossy Buttons
This set have clean and crispy look with consistency.The Glossy Buttons is a collection of 33 high-quality stylish icons ranging from 16×16 to 48 x 48 pixels.This icon collection is created for multiple uses.The icons can be used royalty-free by the license for any personal or commercial project including web application, web design, software application, mobile application, documentation, presentation, computer game, advertising, film, video.
15. Icons from iconblock
Snow pack
102 royalty free website & GUI icons in various formats that can be used for both personal and commercial purposes.
Blue Coral
More collection of 77 blue and grey rounded button icons designed for website use. These icons are perfect if your looking for simplicity and style as well as uniformity. A freeware release
Lingo
74 xp themed icons that will surely breath new life into your blog or website application.
16.ORB icons
Free to use,for more information contact the designer.
17.Mini icon collection
Here are 113 10×10 greyscale icons in .gif format. Creative Commons Attribution-ShareAlike 2.5 licence. 
Just another mini icon set
Pretty small icons.Some rights reserved.This work is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.
18.ColorCons icon set
ColorCons are 49 different icons available in 4 different colors.
Formats and sizes included in the package are.Terms of usage are in the pack.
19.Sweetie–BasePack
The Sweetie family is cute and clean.And free! This set has been around for five years, but it’s still going strong.Creative Commons Attribution-ShareAlike 3.0
20.Milky icon set-All in one package
This is another lovely set of simple but nice icons happily created by IconEden.com. The Milky set contains more than 131 icons primarily colored in green, giving an eye-pleasant look and prominent display on either dark or bright backgrounds.
21.Adobe-creative-icons
A special icons of adobe’s master collection.For license please verify in icon page.
22.Bright free icon set
This 148-icon set contains all crisp-shaped icons that are designed for wide use in web applications, multimedia and software.So you can use Bright! for free for your personal and commercial projects.
23.Hand pointer icons
Free icon set that includes 36 hand pointer icons of 6 different types with 6 color variants. Icon set also includes .psd source file.
24.Once from Delacro
You can use them on your personal blog. Just send me a mail and let.Non commercial use.
25.Webmaster icons-Dellipack 2.0
The DelliPack 2.0 icons are a high quality pack of developer icons and webmasters icons.
26.Designer icons
This set includes Adobe Graphic Icons, Designers Icon.For more information see in source page.
27.Icon pack by Psferox designs
Specifically these icons designed for designer’s use.
28.Free-Mobile-Berries
These icon sets are specifically made for mobile applications,websites and GUI designs.For license details please get more information from the source.
29.Free-iphone-icons
Specifically for i-Phone developers,Free for anyone to use under the Creative Commons Attribution 2.5 Canada license. You may use or modify these icons in any way as long as you credit www.pixelpressicons.com.
30.Web standard icons
28 icons for web designers and blogger.
31.Vector arrow icons
Freshly made, tasty vector icon with 64 icons.They’re entirely free.
32.Glossy Vector icons
This particular icon set falls into the “window” category. Nothing to do with “Windows” the operating system, but the adjustment of windows, panes, and closure icons.85 shining icons ready for your next design.
33.Icons for your photo editing app
Image related icons.-Some smiling lips, a camera lens, some vortex colour, a crop tool, a TV icon, and plenty more.they’re free to download and use as you wish!
FYI : Social media icons will be coming in the next part of the icon packs after that other icon packs too.
Article source: Graphic and Web Design Blog -Resources And Tutorials
Continue Reading
Interview with the Web Designer, Damian Herrington
Posted on 10. Mar, 2010 by Holly Lamarche.
As I have mentioned in our last interview, here at Admix Web we are doing an interview series, where we will conduct informal weekly interviews of fellow designers and developers. It is our contention that these interviews will not only give us great insight into the people behind the designs, but they will also help with networking, collaboration, and generally getting to know each other on a more personal level. We are still looking for people to interview, so please contact me at hlamarche[at]Admixweb[dot]com if you are interested in being interviewed or would like to nominate someone for an interview. Last week, I had the pleasure of interviewing the well-known designer, Brian K. McDaniel of bkmacdaddy designs. This week, I went on over to the UK and interviewed the new up and coming UK designer, Damien Herrington. Enjoy!
Thank you so much for doing this interview for Admix Web. Can you give us a brief background on yourself?
Thank you for interviewing me. My name is Damian Herrington, and I am a freelance Web Designer from Hull, East Yorkshire, United Kingdom. My core skills and services are designing and developing user-friendly, innovative and detailed websites. I can also provide content management integration in the form of Wordpress and e-commerce integration in the form of X-Cart.
Do you consider yourself a web designer, web developer, or both?
I would consider myself a web designer, but I am not afraid to get my hands dirty and do some developing.
Why Design/Development as a career? What were your inspirations for that profession?
Originally I wanted to be a programmer. I love creating something from nothing, and also I enjoy the pursuit of trial and error when something isn’t going to plan and the self-satisfaction you get from finding the solution. It was in my second year of university that the programming we were doing was going over my head, and I didn’t enjoy it anymore. I then became interested again in designing and developing websites. My inspiration doesn’t necessary come down to a single person or company; it comes down to the enjoyment of the website, where it looks amazing and is very usable, which is a winning combination. I suppose that’s my inspiration in wanting to be really good at web design.
Are you self-taught or did you study design/development?
I am mostly self-taught, touching on certain aspects through college and university as the courses were not specific to web design or development but the main impetus has been myself to learn and develop my skills further.
How many years have you been in the field, and how has the field changed during that time?
As a profession it has been since May 2009 when I started freelancing. But, web design and development has been with me since college, so about 8 years on and off learning. I think the main change in this field I have noticed over the years is website quality. If you go back 10 years and look at Microsoft’s website for example, you notice the design is flat and the emphasis was on making sure everybody could see every possible link that the user could ever possibly want to go to. Now websites are about engaging the user experience, the visual elements and the way the information is presented is now well thought out and I think that’s down to the shift being from somebody like a “techie” building a website to now a professional with a background in designing and developing websites.
Can you describe a day in the life of Damian Herrington?
As a freelancer I still like to keep my day as structured and regimented as possible, similar to what I would get at a company or agency. So it would go something like this, I get up around 9:30am, breakfast and begin checking e-mails, read some news and blogs, begin working on projects until either 1:00pm or 2:00pm depending on how engrossed I am in my work, have 1 hour for lunch away from the computer, and back to work until around 7:00pm and that’s pretty much it. The day/s I am not working on projects I am marketing and or other administrative tasks. I don’t work weekends unless something really needs doing as I feel like I am never away from the computer otherwise.
What was your first design you actually marketed? How do you feel about it now?
Because I have not been in business that long I still use one of the first websites I marketed on my portfolio. I think it’s a nice clean business website. However, I would do so many different things with it now both with its design and development. It’s funny how in a short space of time my techniques differ from when I built that website. Looking at some of the other designs I made for personal work I don’t like them at all, which just shows that designers can always better themselves by learning new things no matter what the experience.
What are your favorite types of movies and why?
My favorite types of movie genre are; Thriller, Action, Sci-Fi and Comedy. My favorite films of all time would have to be all the Back To The Futures, Shawshank Redemption, Midnight Express and Iron Man plus many others in my collection. Why? I can’t really answer that, other than the enjoyment that they bring watching them over and over again. They never lose their appeal.
What books do you consider must reads?
Providing you have the time, all books! With regards to design and development when I was writing my dissertation I really enjoyed Jeffrey Zeldman’s designing with web standards, it’s a really good book that provides the neccessary foundations for good web standards. Other than that its been a while since I read any design/development orientated books. On my list to read though I would like Smashing Magazine’s book and also David Airey’s book, Logo Design Love. Outside of the work world I am currently reading Robinson Crusoe.
If you could give a Shout Out to someone who has inspired you in your life, but may not know it, who what it be?
That’s a tough one. Purely from a design point of view it would have to be everybody who I follow on twitter, read their blogs and view their websites on CSS showcase galleries. From the point of view in succeeding in what I love to do and becoming the very best I can possibly be has to go to my mum.
What is your favorite type of design work? And, what has been your favorite project?
I think my favorite type of design has to be something with a grungy element or something that can really let your creativity be exploited. This is a design I am working on currently for a friends’ band. This has allowed me to; I think create a really good theme without any constraints. So I would have to say so far this design has been most enjoyable.
What is your least favorite type of design work?
I think my least favorite design work, and I believe it’s the same for most designers is your own website. I have so many ideas, and its difficult to separate those ideas from the good and the insane. Aside from my website I would have to say really minimalist sites. I feel like when I design a minimalist site there is too much space or I should be putting something in a particular place. But again that’s probably down to experience and good use of content placement.
Explain the significance of your company logo.
I wanted a logo that was clean, easily memorable and something that signified a connection or a bond between me and my clients and so that’s why it looks similar to an atomic symbol minus the atoms and molecules.
Are you a Mac or a PC? Why?
Mac. I was getting frustrated with my PC, as it just seemed everything that I did, it wanted to take forever or just crash and I had enough. I moved to Linux for a short period of time, but I was unhappy with the lack things I was a custom too. So I moved to Mac and never looked back. Plus you can’t beat how the Mac visually looks internally (OS wise) and externally and all the wonderful applications there are. I do however still use PC for development purposes.
What design tools do you use? Which tools would you suggest to fellow designers/developers?
I use Photoshop for mainly everything. So I would say invest in the creativity suite as you have everything you could ever possibly need. Even though it’s expensive I think it’s worth it in the long run. I also use Illustrator for specific design elements too. Development wise I did use Cyberduck (FTP) and Text-Wrangler (Text editor) both pretty good and free but recently I have been using Coda and I am very impressed. Another excellent application I would suggest to invest in is Little Snapper. It’s nicely built and manages your website snapshots perfectly, ideal for keeping a collection of your favorite websites.
What does your workspace look like?
Not the most interesting of setups, but it gets the job done. I use the Macbook and additional screen for all my daily designing and developing needs. When I need to be in Windows, I use the Mac Mini as my development area so I can stay in Leopard and use Coda and the Macbook dual boots into Windows XP where I use IETester.
What makes you unique?
I think being a one-man band I can work more closely and have more time with a client, ensuring their ideas transpire into creating their ideal website. I also believe my punctuality and the ability to help the client in what ever way after the website has been finished is also a bonus rather than just building them a website, taking there money and not having any contact after.
What are some of the design and development blogs you read on a regular basis, why?
CSS-Tricks, most of the tuts+ network, Smashing Magazine, Web Designer Depot, Chris Spooner’s blogs, CMD + SHIFT, It’s Nice That, David Airey and FFFFOUND! are just some of the blogs I read. I read these blogs because I love reading and learning about the design and development world and these blogs provide great content.
Where do you see yourself in 10 years? Where do you see design, the web, and development in 10 years?
In 10 years time, I would like to see myself either as a successful freelance web designer or taken the plunge and opened my own design and development studio. I think design won’t change that much, trends will come and go I think the difference will be how users will be able to receive and interact with the content either through mobile development or through your Television.
Please share some pearls of wisdom for up and coming designers in the field.
Do what you love and love what you do. Not everything in life is all crumpets and cream so just work hard, never stop learning, stay motivated and stay determined on doing what you want to do or where you want to be.
How can people get in contact with you?
You can contact me via my contact form/e-mail address on my website, twitter or Tumblr
Article source: Admix Web
Continue Reading
Quick Tip: The Difference Between Live() and Delegate()
Posted on 10. Mar, 2010 by Jeffrey Way.
In jQuery 1.3, the team introduced the live() method, which allows us to bind event handlers to elements on the page, as well as any that might be created in the future dynamically. Though not perfect, it definitely proved to be helpful. Most notably, live() bubbles all the way up, and attaches the handler to the document. It also ceases to work well when chaining method calls, unfortunately. Delegate() was introduced in version 1.4, which almost does the same thing, but more efficiently.
We’ll examine the specific differences between the two methods in today’s video quick tip. Thanks to the FireQuery Firebug extension, we’ll have the tools to more easily understand how each method functions.
<ul id="items"> <li> Click Me </li> </ul>
// Bind attaches an event handler only to the elements
// that match a particular selector. This, expectedly,
// excludes any dynamically generated elements.
$("#items li").click(function() {
$(this).parent().append("<li>New Element</li>");
});
// Live(), introduced in 1.3, allows for the binding
// of event handlers to all elements that match a
// selector, including those created in the future.
// It does this by attaching the handler to the document.
// Unfortunately, it doesn"t work well with chaining.
// Don"t expect to chain live() after calls like
// children().next()...etc.
$("li").live("click", function() {
$(this).parent().append("<li>New Element</li>");
});
// Delegate, new to version 1.4, perhaps should have been a complete
// replacement for Live(). However, that obviously
// would have broken a lot of code! Nonetheless,
// delegate remedies many of the short-comings
// found in live(). It attaches the event handler
// directly to the context, rather than the document.
// It also doesn"t suffer from the chaining issues
// that live does.
$('#items').delegate('li', 'click', function() {
$(this).parent().append('<li>New Element</li>');
});
// By passing a dom element as the context of our selector, we can make
// Live() behave (almost) the same was that delegate()
// does. It attaches the handler to the context, not
// the document - which is the default context.
// The code below is equivalent to the delegate() version
// shown above.
$("li", $("#items")[0]).live("click", function() {
$(this).parent().append("<li>New Element</li>");
});
Conclusion
This can definitely be a confusing topic. Please feel free to ask questions, or discuss within the comments. Thanks so much to Elijah Manor for clarifying a few things for me on this topic!
Article source: Nettuts+
Continue Reading
ssupak on 
