Follow Us
Share Us

Archive for the ‘tutorials’ Category

13/07/2010 - susana

Useful tips when redesign your website, iconshock case study

As you may have seen, in recent days, Iconshock decided to launch the new version of its website, hoping to meet all of our customers needs by offering a pleasant and organized site to them. In this article we will be reviewing the different elements that were improved from the original to the new version of the site, including design and navigability aspects, so you can get an idea of the process we did and also be able to see how the process of revamping a website should be executed. We will be exploring the different steps that must be considered while revamping a website.

29/04/2010 - Blogger.Iconshock

Photoshop Tutorial: padlock icon

Buckle up your seatbelts, because this is going to be a long and fun ride. We are going to show to you how to create a high quality professional padlock icon, ideal for applications. We will be using Adobe Photoshop, making extensive use of paths and layer styles. So let’s begin!

Final Padlock

1. Gather references.

This point is not mandatory in all cases, but it’ can be a good starting point if your tight on a deadline and out of ideas, or just want to check if your revolutionary concept is already taken. gathering references is a good way to nurture your mind with different approaches and styles, so you can build a ground to invent your own.

padlock-references

(more…)

16/04/2010 - Blogger.Iconshock

50 things you can and cant do with your new ipad

The world has been talking about this so called “magical” device for quite some time now. The rumors that have been circulating for almost ten years came to their climax when the very first images leaked into the net almost a year ago. Bloggers, journalists, developers and geeks couldn’t stop fantasizing and speculating over this quasi sci-fi gadget… no other electronic consumer product has encouraged such a devoted following and cult like mysticism. Today, it’s a reality. Love them or hate them, one thing we have to grant Apple, they sure know how to build up expectation.

09/04/2010 - Blogger.Iconshock

Photoshop Tutorial: Realistic, High quality printer icon

In this long tut we will make a lot of use of vector masks and layer styles in Photoshop in order to create a slick looking ink printer reminiscent of some Canon and HP ink printers. So let’s begin!

Printer-icon

(more…)

31/03/2010 - Blogger.Iconshock

Useful Icon design lessons and tips

Each time we see a computer, a washing machine, a cell phone, or whatever artifact that needs a system for us to interact with, we see icons. Icons are a predominant and essential element in any user interface, and as such, their design must take care and proper knowledge. Icon design is a compromise between clarity, aesthetics, and usability. We are going to list for you, an essential guide for any designer who wants to crash into this crazy and fantastic industry.

DO think of icons as a part of a system

Icons are not conceived as individual works. No matter how well made, the validity of an icon is not in its individual design, but rather in its effectiveness as part of a system. When you approach Icon design, you must take into account where they are going to be placed. They must be clear and harmonious within the general design, feel and purpose of whatever project they are going to be put in, be it a website, a word processing application, or a Mp3 player.

Design as a whole-Iconshock-icons

Grungy icons will not be very effective inside an “aqua” style interface, and maybe chrome sharp symbols ala “Metallica” logo won’t fit very well in your cute baby product website.

16/03/2010 - Blogger.Iconshock

How to use icons to enhance your designs

It’s incredible how icons, these tiny, sometimes elusive cute illustrations can do so much for your work. Icon creation has become a giant industry because of the many, many advantages they can bring to any design. They add visual cues to your headings, work as buttons, separate your website sections, and overall give polish and professionalism to your web or application.

Iconshock Icons

10/02/2010 - Blogger.Iconshock

Vector vs Bitmap for dummies

Oh no! Not another vector vs bitmap article! Well… Yes. I’m afraid to tell you that I’ve come from a land far, far away, just to add to Google yet another post about the differences between vector type images and Bitmaps. So, why should you, dear visitor, continue reading these lines any further? What will make this article different from the rest? Well, for starters, I’m going to insert at the end of this post a hidden URL with hundreds of videos of my steamy, vicious, dirty, prolific sex life, and besides that, this article would be loaded with information so exclusive, so intelligent, so enlightening, that it will increase your credit card limit, save the Amazon rainforest and improve your digestion. How about that?

Hmmm. My nose has grown so much its pushing the monitor away.

Let’s get things straight. I’m still in love with a girl that left me almost two years ago, so my sex life is pretty much restricted to my daily dosage of lyrics from AC-DC and The Rolling Stones… the only way to improve your credit card limit is saving as much as you can… and not even god himself can save the Amazon rainforest. Oh, and I really don’t care about your digestion.

So with all things cleared out, I will now proceed to write about vector and bitmap images. Of course you are free to go on and make your own steamy videos instead of reading this.

Bitmap image enlarged to see the individual pixels

07/02/2010 - Editorial.Iconshock

icon tutorial: Windows 7 icon with Illustrator

Hello. In this tutorial we will use Adobe Illustrator CS4 to create the music icon of the Windows 7 style.

06/02/2010 - Editorial.Iconshock

Illustrating a business briefcase in Windows 7 style

The new O.S. Windows 7 has improved aesthetics to make the user interface at least more appealing. There are huge ultra detailed icons for folders, devices and so on. This time we will use Illustrator CS4 to create a nice briefcase with the Windows 7 style. You need only a few basics on how to copy, paste, rotate, scale and color the shapes. Let’s focus on business.

01/02/2010 - Blogger.Iconshock

Iconshock Interview: Tutorial 9 wunderkind David Leggett

Tutorial 9 is one of the most successful examples of web entrepreneurship in the design industry. It has grown in less than two years to become THE place to go for designers and artists to find free tutorials and resources, This marvelous site is just one of the many profitable projects run by under 21, self taught blogger from Atlanta David Leggett. Many of us couldn’t even tie our shoelaces properly at 21, but this guy already has one of the most respected design forums in the web, and has been featured in tons of interviews and “best of” lists. He became interested in computers at age 10, when his parent gave him Adobe Pagemill as a gift. (I had a Chewbacca at 10. No wonder.) Who would have thought that was the beginning of one of the most rocket rising, fast paced careers in blogging history. Well, I now “blogging history” is less than 10 years old, but, you get the point.

David_Leggett

01/02/2010 - Blogger.Iconshock

100 Best logo tutorials

Finding a good logo is crucial in your pathway to achieve a good corporate identity. In my many years of work in the graphic design business, I have found that Logo work can be the most time consuming and a real sanity sucker. Itineration after itineration, you sometimes feel you will never get to that magical moment when client and designer agree on the final product. The road is in deed long and winding. Because of that, I wanted to make a lost of great logo tutorials to help you in your everyday creative battles. Use wisely.

1. Logo Design Project Step by Step Walkthrough
Spoon Graphics

Click on image to access tutorial.

2. Create a fly logo Design
Sean Hodge

Click on image to access tutorial.

3. Modern Green Logo
PS Freak

Click on image to access tutorial.

4. Creating a crazy cool logo
Abduzeedo

Click on image to access tutorial.

5. Logo Design Process and Walkthrough for Vivid Ways
Spoon Graphics

Click on image to access tutorial.

6. Web 2.0 Logo Reflection in Vector format with Illustrator
Jay Hilgert

Click on image to access tutorial.

31/01/2010 - Blogger.Iconshock

100 Icon tutorials every designer should have

Here you will find the 100 most interesting icon related tutorials I’ve found on the web. If you are a icon enthusiast, a GUI designer, or a plain graphics freak, won’t have to type in your browser anything else than Iconshock. Enjoy this list, and don’t forget to check out our own tutorials, where we show users the process behind our unique brand styles. You can access our tutorials via the link “Iconshock Tutorials” you can find at the right.

1. Create a cool Yellow helmet icon – PS

Click on image to access tutorial.

2. Glossy RSS icon – PS

Click on image to access tutorial.

3. Perfect Shine button – PS

Click on image to access tutorial.

4. World icon tutorial – PS

Click on image to access tutorial.

5. Ace of hearts Super Vista Style – AI

Click on image to access tutorial.

5. Glossy download icon – PS

Click on image to access tutorial.

6. Illustrate a traffic cone icon – PS

Click on image to access tutorial.

30/01/2010 - Editorial.Iconshock

Tutorial: wizard icon tutorial with illustrator

Welcome back to the virtual space where some of the secrets for creating iconic beauties are unveiled.

The word “wizard” has its root on concepts like wisdom and guidance. Most probably that´s the reason why those helping user interface elements, the assistants, are also called wizards and are represented by default with a wizard’s hat and wand icon.

The spell will be performed using Illustrator CS4.

29/01/2010 - Editorial.Iconshock

icon tutorial: Administrator icon using Illustrator

Hello.! In this tutorial we will pursuit 2 main goals: first, we will make an administrator icon in Clean Web 2.0 style, having as a tool Adobe Illustrator CS4. Second, we will experience the process of mixing a daily reality of the corporate world with some of the concepts of what we call Web 2.0 The man with a tie comes from a very complex world, now you will translate it to a cleansed, catching and easy to understand point of view.

24/01/2010 - Blogger.Iconshock

Iconshock interview: Css mastermind and sushi addict Jina Bolton

Jina is a must reference for all of you working in web design & development. Her opinions on CSS are one of the most respected in the designer community, being a frequent speaker in the web developer’s conference circuit and being a consultant for the W3C Web Accessibility Initiative. That is big stuff for a lady so cute my friends! The W3C as you might know, is nothing more than the World Wide Web consortium, the international organization that develops all web standards. So if this girl has something to say you better listen!

Jina_Jina

Page 1 of 212 »