Sunday, March 30, 2008

Design Style Resources: SIMPLICITY IN WEB 2.0

Here we go again, with another Design Style Resources. There should be more of these, but only pick the several best of them to give you a clue of what Web 2.0 design is.


LAYOUT DESIGN GUIDELINES


Web2.0 Design Style Guide
by Web Design from Scratch

The visual design of Web 2.0 by Pixel Acres


WEB 2.0 INTERFACE TUTORIALS:

How to Create a Simple & Sleek Web 2.0 Site Footer by Daniel Lopes

Photobucket


Modern menu - Photoshop tutorial


Photobucket

Design a Web 2.0 tab with Photoshop

Photobucket

Vista Style Layout - Talk Mania Forum

Photobucket

Creating Object Reflection on a Surfaceby Graphic Identity

Photo Sharing and Video Hosting at Photobucket


CSS


Rounded Corners in CSS

CSS Rounded Box Generator

Speech Bubbles

Photobucket

Expandable Box

Photobucket


GRAPHIC DESIGN APPLICATION AND TOOLS

Ultimate Web 2.0 Gradients – by Deziner Folio

Photobucket

Gradient Image Maker

CSS Rounded Box Generator

Stripe Generator 2.0

Stripe Designer


Web Applications for Designers


Web 2.0 Logo Creator


COLOR SCHEME

The Colors of Web 2.0 by Chris Messina

Photobucket

Web 2.0 Colour Palette by Stuart Brown
This is my favorite old post. Visit the website to get the hexa color codes.


FONTS AND TEXT EFFECT

Fonts

The trends in web typography by Daniel

Great Fonts for Web 2.0 by Stuart Brown

5 Free Fonts for Web 2.0 Logo


Text Effect Tutorials


Web 2.0 Text Effect
by Aviva Directory
The Glossy TEXT web2.0 style by aaron
Photobucket


LOGOS

Is There a New Trend in Logo Design? by Toon (Guest Blog Post for Creative Curio)

How will your Favorite Logos look in Web 2.0?

A Guide to Web 2.0 Logos

How Web 2.0 Logos are Drawn by Hongkiat

20 Corporate Logos redesigned for Web 2.0 by Alex


ICONS, BADGES, and BUTTONS

Icons

Web site icons

Photobucket


Illustrator Vector Round Icons by ~colormist

Photobucket


Social networking icons

Photobucket

Badges

Web 2.0 Badges by ~Forzaken

Photobucket
Web 2.0 Badges

Buttons

Color Button 2.0 by ~IdeandoGrafica

Photobucket

Download Button by ~WhoIsScott

Photobucket

Pointy by ~adrice

Photobucket

Power Button in black by ~helmlein

Photobucket

Tutorials

Quick ways to Create Buttons using Photoshop and Illustrator by Graphic Identity

Translucent IM Style Illustrator Icon Tutorial by Spoon Graphics

Photobucket

Handy Web 2.0 Icons In Photoshop by Fabio

Photobucket

Glossy web 2.0 badge with rounded corners by Photoshop It

Photobucket

Web 2.0 style buttons by Iris-Design

Photobucket

Saturday, February 9, 2008

Graphic Identity Tutorial Technorati Profile

Just trying to claim this blog to Technorati using Post Claim option :)

Now Graphic Identity Tutorial is available to be fave on Technorati
Technorati Profile

Please fave it, thank you... ;)

Wednesday, February 6, 2008

Design Style Resources: GRUNGE URBAN ART

Great listings of Grunge Urban Art design resources just to help you to figure out what they’re look like. When you use one of those resources, please credit the original designers for appreciation and read his or her design copyright before you apply them to your design.

Please tell us any broken links in this post by sending us email or comment to this post.


IMAGE EFFECT TUTORIALS:

Pop Art Inspired by Lichtenstein By Melissa Clifton
Design Style Resources: GRUNGE URBAN ART

Creating grunge brushes by Veerle
Design Style Resources: GRUNGE URBAN ART

How to Combine Pixel and Vector to Produce Striking Artwork by SpoonGraphics
Design Style Resources: GRUNGE URBAN ART


VECTORS:

Random Free Vectors Part 11: Watercolors by Bittbox
Design Style Resources: GRUNGE URBAN ART

Free Vector Resources Part 3 - Urban Collection by SpoonGraphics
Design Style Resources: GRUNGE URBAN ART

Vector Resources Part 4 - Punk Collection by SpoonGraphics
Design Style Resources: GRUNGE URBAN ART

106 Free Vector Shapes Pack #1 by Gabriele Magurno
Design Style Resources: GRUNGE URBAN ART

Floral Grunge Vector Art by GFX Palette
Design Style Resources: GRUNGE URBAN ART


PHOTOSHOP BRUSHES:

Buildings
  • Architectural Brush Set 1 by *ardcor
  • Design Style Resources: GRUNGE URBAN ART
  • Cityscapes by ~tiffcali06
  • Design Style Resources: GRUNGE URBAN ART

    Splatters
  • Free Hi-Res Splatter Photoshop Brushes by Bittbox
  • Design Style Resources: GRUNGE URBAN ART
  • Splatter brushes by ~C130
    Available in for Photoshop 6 and above
  • Design Style Resources: GRUNGE URBAN ART

    Scratch / Noise / Cracks
  • Procedural Grunge Brushes by *lorddarq
  • Design Style Resources: GRUNGE URBAN ART
  • Scratch Texture Brushes PS 7.0 by ~Pfefferminzchen
  • Design Style Resources: GRUNGE URBAN ART
  • Bittbox 18 Hi-Res Watercolor Photoshop Brushes by Bittbox
  • Design Style Resources: GRUNGE URBAN ART


    FONTS & TEXT EFFECT:

    Typewriter fonts
  • Colour me purple by Kimberly Geswein

  • Design Style Resources: GRUNGE URBAN ART
  • 3 Free Destroyed Typewriter Fonts by Graphic Identity


  • Grunge fonts
  • 28 Days Later by Filmhimmel

  • Design Style Resources: GRUNGE URBAN ART
  • 6 Free Graffiti, Grunge, and Destroyed Fonts by Graphic Identity


  • Grunge Text Effect in Photoshop action
  • Grunge Text Effect in Photoshop Action – Part 1

  • Design Style Resources: GRUNGE URBAN ART
  • Grunge Text Effect in Photoshop Action – Part 2

  • Grunge Text Effect in Photoshop Action – Part 3



  • Text Effect Photoshop tutorials
  • Worn Rubber Stamp Text by Design This

  • Graffiti Text With Photoshop by Dreamdealer

  • Worn and Torn Text Effect by Photoshop Essentials



  • TEXTURES:

    Textures 52 by ~bombay101
    Design Style Resources: GRUNGE URBAN ART
    Grungy paper texture v.8 by =bashcorpo
    Design Style Resources: GRUNGE URBAN ART
    Texture set 04 by ~pildas
    Design Style Resources: GRUNGE URBAN ART


    COLOR SCHEME:

    Design Style Resources: GRUNGE URBAN ART

    We are also preparing to post series of design styles as follows, they could be: Techno, Corporate, Web 2.0 theme and many more. Graphic Identity team now plans to publish PDF file format that contain a compilation of these design series, a free E-book to download.

    If you are a graphic designer who is also interested to contribute your FREE supporting resources to create such design, please feel free to contact us via email graphicidentity.blog@gmail.com. You would have the chance to promote your blog compiled with other designers in E-book publication. You can submit: graphic design tutorials, photoshop brushes, vectors, fonts or anything classified as free supporting resources to create specific design style.

    Be sure that you don’t missed the blog updates by subscribing to Graphic Identity RSS feed or subscribe by Email.

    Design Style Tutorial: GRUNGE URBAN ART

    Being around with several simple tutorials about typography and general design using Photoshop, we will now move to specific design styles in a series that will continue for some time now, to start with Grunge Urban Art Style.

    Before we step further, you will need sorts of design elements to create such design style. You don't have to worry, because all those design elements are actually available for free on the internet. I have great listings of Grunge Urban Art design resources just to help you to figure out what they're look like. When you use one of those resources, please credit the original designers for appreciation and read his or her design copyright before you apply them to your design.

    There are certain design elements which are essential to establish a grungy vibes to your design. However, you don't need to use them all together at once, because these are just sorts of technique hints. They are:

    1. Fonts and typography.
    The best font type I suggest would be typewriter fonts or grunge fonts that have heavily texturized effect. Every kind of graffiti typography and industrial print alike are perfect example font styles.

    2. Building or architectural background
    Grunge style frequently related to urban style in particular. Urban life in the crowded city, with graffiti walls around. High rise building a photograph or the cityscape around your neighborhood will do for this purpose. Hence, you can pick: electricity towers, building construction works, or even a factory building as background or silhouette to your grunge design.

    3. Color schemes
    Mood in a grunge design often associated with black color. Black is a hint of power and superiority of a metropolitan society. Another dominant color that plays the role is dark grey, which is a sophisticated connotation of stone and concrete. You can find the complete color schemes suggestion in the resources lists.

    4. Dirt noise textures
    Creating grunge design is always been fun, because it's always associates with irregularity and erratic method. The best textures to use are splatters, blood, water colors, noise and scratch. You can apply these textures using Photoshop brush tool, or Photoshop pattern.

    5. Miscellaneous vectors shape and image style
    I've seen some grunge design styles that are also quite psychedelic. The common trends could have been light beams background shapes. A grunge floral vector that has erratic texture will work as well. If you need a photo or model to display, I recommend you to use pop art or line art Photoshop retouch effect.

    This tutorial is just another way to create "grunge urban" design. You can find other similar Photoshop tutorials, photoshop goodies (brushes, patterns, and shapes), fonts, and vectors from other sites. If I missed something, you can just comment or even show me your own design to improve it :).

    I will show you how to create grungy wallpaper. A good friend of mine, Abhinav Sood was so generous to let his photo being edited for this tutorial ;p. Thank you Abhi!

    OK, Lets begin with the tutorial:


    Step 1 - Choosing colors
    Depends on what kind of design that you want to create, it is very crucial for you to pick several colors (4-6 hues in a colors scheme) before you add another elements. Too much variation of colors will diffuse the design emphasis. You can take a look of the color scheme option in the resources list and pick 6 maximum of them that you think would be the best color combination.

    Design Style Tutorial: GRUNGE URBAN ART


    Step 2 - Adding background elements
    Background elements can be in the form of vector shape, photoshop brushes, or textures.
    Bear in mind to always create a new layer for every object background element. The purpose of this step is nothing but to have easy customization to move, flip or rotate if you need to do it later on.

    Set the different color contrast between the main object and background elements layer, as you may need to keep the visibility of main object in layers order.

    Some design, would need extensive grunge background effect on a whole design workspace. There are many tutorials to create in quick way and you can also use ready made textures background such as grunge paper or hi-res vector background splatters.
    But if you want to create that effect that is limited to the border or corner part of your design workspace, you can always use photoshop brushes or vectors shape.

    Set a new file as a primary workspace (initial workspace), and start to fill it with background elements as you wish.

    Design Style Tutorial: GRUNGE URBAN ART

    Design resource overview:
    Magurno's vector shapes
    are just marvelous, I have no reason to not to use the ready made splatters vectors which are available in photoshop vector shape and EPS format.
    I also choose a superb architectural brush set of a deviant artist, *ardcor. I pick one of the available building brushes that have worm eye view perspective. My favorite!


    Step 3 - Applying Special Effect
    You can set any object as a main outline. Open a new file to edit it. Remove the unnecessary background then put on some special effect to the object.
    Drag the finished image layer to your initial workspace. Or you can manually do the copy and paste object to duplicate that layer to the initial workspace.

    Design Style Tutorial: GRUNGE URBAN ART

    Design Style Tutorial: GRUNGE URBAN ART

    Design resource overview:
    I use pop art style to Abhinav photo. You can read how to create pop art effect tutorial in detailed version, written by Melissa Clifton.


    Step 4 - Working with Fonts
    Add some design styles, but be sure to avoid reflecting effect, uniformly beveled text and smoothing text edges.
    Grunge or typewriter fonts tend to have rough surface, erratic, and crisp edge. In this tutorial example, I only add gradient overlay effect to stylize it a bit.

    Design Style Tutorial: GRUNGE URBAN ART

    Design resource overview:
    The featured font in this tutorial is another favorite of mine; called Uncle's Typewriter fonts By: Typo 5. Quite eroded! ;)

    Just to let you know, that I will start to publish series of design styles as follows, which are: Techno, Corporate, Web 2.0 styles and many more. Graphic Identity team will plan to publish PDF file format that contain a compilation of these design series, a free E-book to download. Make sure that you don't missed the blog updates by subscribing to Graphic Identity RSS feed or subscribe by Email.


    GRUNGE WEB DESIGN ON INTERNET:

    Baranda Tequila

    Design Style Tutorial: GRUNGE URBAN ART


    Demonstrasi Senam Reformasi (header design project)

    Design Style Tutorial: GRUNGE URBAN ART


    Maria Liaxo

    Design Style Tutorial: GRUNGE URBAN ART


    Miles Johnson

    Design Style Tutorial: GRUNGE URBAN ART