Resources:

15 Jul 2009

3

15 Really Great Illustrator Tutorials

Creating vector graphics is great for logos, characters, and other website elements that may need to be reused and resized many times. Here is a small list of 15 great tutorials for Illustrator — whether you’re a beginner, or looking for new techniques to tone your skills.

Many new designers only focus on Photoshop and learning the coding stuff, but Illustrator has so much to offer that beginners should not hesitate to learn it. The 15 tutorials below have probably been seen around by experienced designers. For those who haven’t seen them though, they are great for gaining some experience in the Illustrator interface.

09 Jul 2009

6

106 Tutorials for Really Cool Photo Manipulations

Learning to manipulate photos, either for an abstract outcome or just to enhance something real is a great way to expand one’s own Photoshop skills. Here is a massive list of 108 tutorials just for those who would like to do more photo manipulations.

01 Jul 2009

7

22 Photoshop Tutorials for Awesome Lighting Effects

1. Magic Lighting Effect

Magic Lighting Effect

2. Really Cool Ellipse Effect

Really Cool Ellipse Effect

3. Fiery Photoshop Space Explosion Tutorial

Fiery Explosion Space Tutorial

4. Creating Light Motion Trails & Glowing Sparks

http://veerle.duoh.com/blog/comments/creating_light_motion_trails_glowing_spark/

5. Create a Space Explosion from Scratch in Photoshop

Create a Space Explosion from Scratch in Photoshop

6. Seriously Cool Photoshop Explosion Effect

Seriously Cool Photoshop Explosion Effect

7. Space Lighting Effects in 10 Steps

Space Lighting Effectsin 10 Steps

8. Advanced Glow Effects

Advanced Glow FX

9. MSNBC Style Effect

MSNBC Effect

10. Easily Create a Beautiful, Unique Website Header

Glowing Website Header

11. Energize Your Graphics with Abstract Energy Lines

Abstract Energy Lines

12. Super Fast – Speed Lighting Effect

Super Fast Lighting Effect

13. End of the World Photo Manipulation

End of the World Photo Manipulation

14. Explosion

Explosion Tutorial

15. Mysterious Lighting Effect Tutorial for Photoshop

Mysterious Glow

16. Fire Lines v2

Fire Lines

17. Vector Polishing Techniques

Vector Polishing Techniques

18. Creating A Fantastic Fantasy Night Sky In Photoshop

Night Sky

19. Chroma Wallpapers

Chroma Wallpapers

20. Glowing Fairies

Glowing Fairies

21. High-Tech Swirling Aurora

High-tech Swirling Aurora

22. Amazing Photoshop light effect in 10 Steps

Amazing Photoshop Light Effect

27 Jun 2009

23

19 Web Design Blogs you Should be Following

Need an extra boost in creativity? Follow these 19 web design (and some development) blogs to learn, grow, and become inspired.

Whether you’ve heard of all of them or not, everyone of these blogs is worth a follow.

21 Jun 2009

7

10 Killer Firefox Add-ons For Web Designers and Developers

I hope it doesn’t come as a big surprise that Mozilla Firefox is easily the most desirable browser for web designers and developers, but if it does, you’re in for a quite a treat!

So why does Firefox have a firm grip on all of the internet geeks out there? The answer is quite simple – add-ons. Downloadable add-ons can make your design and/or developing experience much more efficient and fun, and while there are thousands of add-ons available for nearly any situation, there are some that are truly geared towards web designers and developers.

Below, we’ll go over 10 of the hottest add-ons for web designers and developers.

1. Web Developer 1.1.6

Without a doubt, Web Developer should be on every Firefox “top add-ons” list. I’m sure most developers reading this will nod their head in agreement when I say, “What did we do before this came out?”

Web Developer

The Web Developer add-on adds a nice menu and toolbar to Firefox that is full of wonderful web developing tools to make your life easier. Web Developer allows you to do anything from disabling certain features on a page (like JavaScript, page colors, etc…) to editing the CSS of any webpage in real time. Features like that allow you to save all sorts of time, and in the design/development world, time is most definitely money. Web Developer is an absolute must-have.

Download Web Developer

2. Firebug

Another heavy hitter in the developer’s arsenal, Firebug is another one of those add-ons that you simply can’t live without. Firebug allows you to do things like “find HTML elements buried deep in the page”, and pretty much hands over a golden plate of information at your fingertips.

With Firebug, you can edit and debug HTML, JavaScript, and CSS in real time and figure out why you’re getting that pesky error message. You can also monitor network activity (to figure out why your page is taking so long to load), visualize CSS metrics (so that you can find out why CSS boxes aren’t lining up like they should be), and so much more. There are also a ton of different extensions for Firebug that are constantly being developed.

The best way to find out what Firebug can do for you is to check out their site.

Firebug

Download Firebug

3. ColorZilla 2.0.2

This is such a handy little add-on that so many different types of users could find useful. How many times have you been on a particular site and wondered exactly what color they used for a certain text or element on their page? Probably hundreds of times, right?

Colorzilla

Now, with the click of a button you can easily grab the RGB, hex, and even get information about DOM elements on the fly. ColorZilla also gives you the ability to zoom the page and measure the distance between any two points on the page you’re viewing. That’s just awesome.

Download ColorZilla

4. ScreenGrab 0.96.1

Think about how many times in your web development life that you’ve hit the “print screen” button. Exactly. Instead of doing things the old school way, someone was smart enough to launch a free way to quickly and easily grab a screenshot of an entire page, a specific section of a page, the entire window you’re looking at, and a few other options.

Screengrab

ScreenGrab will remind you of SnagIt, only you don’t have to shell out any cash for it and it works just as well. I don’t think anyone would argue that this is another standard add-on that should be in every developer and designer’s browser.

Download ScreenGrab

5. LinkChecker 0.6.3

Even the best of the best screw up the occasional link on a page. That’s why a genius by the name of Kevin Freitas built the simple, yet very useful LinkChecker add-on for Firefox. It will check if a link is valid or not, and this is easily one of those “use every day” type of add-ons that will be another valuable tool in your collection.

Linkchecker

Below is the plugin in action, on Webitect.

Bad Link Webitect

Download LinkChecker

6. Window Resizer 1.0

Testing your new site or project in several different screen sizes is crucial to your process. This simple add-on allows you to do just that. Window Resizer supports 640×480, 800×600, 1024×768, 1280×800, 1280×1024 and 1600×1200 resolutions. Talk about convenient!

Window Resizer

Download Window Resizer

7. IE View 1.4.3

Another essential step in the design/developer process is viewing the site in different browsers. The first and most important additional browser to check your work in is Internet Explorer.

IE View was created to quickly check to see how your project appears in IE, giving you a fast way to spot any problems. Again, another very simple add-on here that can help boost your efficiency.

IEViewer

Download IE View

(Note: Similar to IE View is Safari View. This is another one worth downloading.)

8. Dummy Lipsum 2.3.0

For the thousands of times you’ve copied and pasted “Lorem Ipsum” dummy text for all of your past projects, you’ll have wished you found Dummy Lipsum a lot sooner! This awesome add-on is a no-brainer for any designer or developer.

With a few clicks, you can easily generate a page full of space filler text, and you even have the option of including punctuation, showing or not showing html tags, and whether you want to start it with the infamous “Lorem ipsum dolor sit amet…” You can also have it generate the text in the form of a paragraph, words, bytes, or even a list!

Dummy Lipsum

Download Dummy Lipsum

9. HTML Validator 0.8.5.6

Instead of using a separate tool or website to validate HTML on a page, you can download this nifty little add-on which adds HTML validation inside of Firefox.

HTML Validator shows you the number of errors of a HTML page seen in an icon on the status bar when you’re browsing, which makes the process of spotting errors extremely fast and easy. While some other add-ons include this already, this is a nice hands free way to spot errors on the fly.

HTML Validator

Download HTML Validator

10. MeasureIt 0.3.8

I’m sure there have been countless times where you quickly needed the measurements of how large an image was, or how many thumbnails you could fit into one box, etc…

With MeasureIt, you can quickly and easily draw out a ruler to get the measurement (in pixels, width and height) of anything on a webpage. MeasureIt is another awesome tool for any designer to add to their Firefox browser, as it will surely speed up the process.

MeasureIt

Download MeasureIt

Wrapping Up

10 super efficient Firefox add-ons that should allow you to shave some time off of your many projects. I know there is a mess of additional helpful add-ons for designers and developers, but the 10 above are the ones that seem to be the staples among the thousands of others available.

Here are five more add-ons worth mentioning (just in case you can’t get enough):

  1. FireFTP – Instead of opening an external FTP for site updates, this is easier.
  2. Font Finder – Quickly show all the properties of selected text on a page.
  3. Colorblind Simulator – Experimental add-on that simulates what a page looks like to colorblind people. Since 10% of the population is colorblind, this is smart!
  4. SEOQuake – SEO is fundamental, so why not have a little help?
  5. Greasemonkey – Extremely popular add-on that allows you to run custom JavaScript against any webpage.

18 Jun 2009

6

Easy Photoshop Tutorials for Realistic Things

A Scrap Of Notebook Paper

A scrap of notebook paperThis is a common trick on realistic space web designs featuring offices or work spaces. The tutorial itself is incredibly detailed, but also leaves room for your own creativity.

Created over as PSHero, this tutorial is perfect for beginners to really learn something useful in Photoshop, by creating something as specific as this paper, but also picking up vital Photoshop techniques along the way.

In the tutorial, the “Hero” goes over how to properly prepare an image like this for the web, so it can look high-quality and as real as it gets. Image preparation is something that ever designer needs to know, and this tutorial example is a great overview.

Go make your own scrap of notebook paper now.

Political Campaign Button

Promotional ButonWho needs a printing company for promotion when you just have Photoshop? This stylish button is another of PSHero’s great tutorials. Easy for beginners, but advanced and unique enough for any Photoshop user level.

While this button represents a political button for a typical campaign in America, the process is transferable for any colors and shapes — and can be created with any style of flag, symbol, or image.

This tutorial was made with a single set of layer styles, making it a simple and quick process–a great addition to any page or web design.

Go create a political campaign button now.

Old World Wax Seal

Old World Wax SealThis tutorial is great for designs with an old, and even grungy feel. Even though it’s grungy, it also has a classic look.

This tutorial uses few layers and the pen tool. The pen tool in Photoshop is often the toughest tool to use for Photoshop beginners, and this simple wax seal is a great way to get step-by-step practice.

This tutorial is also easily customizable, and you can find your own image to embed in the center, along with your own color scheme. For the rest of the background, PSHero offers great graphic design tutorials for creating paper textures.

Go create a realistic old world wax seal now.

Custom Hang Tag

Custom Hang TagThis type of image is becoming very popular in web design, and PSHero shows you exactly how to do it. Hang it in the corner of a web design to place a logo, or declare a special or update.

The great thing about this tutorial is some of the techniques used in it. This is a tutorial that shows how PSHero takes a basic template from a real life object. This technique can be used in other aspects for any designer who would like to create their own custom Photoshop pieces.

The tutorial is customizable with your own logo or text, so whether it be just for practice, or to actually use the tag in a design, it’s a great tutorial to reference.

Go create a custom hang tag now.

Craft a Vintage Fifties Letter

Craft a Vintage Fifties LetterVintage and grungy are two popular design trends right now, so this type of tutorial is quite popular. Create a vintage 50′s letter, with custom text for your own design.

This tutorial covers many of Photoshop’s need-to-know features: brushes, shape tools, layer styles, blend modes, along with some intermediate techniques. It is easy to follow, yet provides advanced technique for those wishing to take their Photoshop skills to the next level.

The texture in this tutorial is beyond amazing for a computer document; just take a close-up view at the final result on the tutorial page. Because it produces such high-quality, the outcome of this tutorial could be used for many different things, not just in web design.

Go craft a vintage fifties letter now.

Create a Realistic Blueprint Image From a 3D Object

Create a Realistic Blueprint Image From a 3D ObjectPhotoshop’s 3D feature is often overlooked in the world of graphic design, but this tutorial shows a perfect example of how to use it to create a stunning blueprint image.

This tutorial also goes over how to place the created blueprint image in a real setting (this example being the table and surrounding area), and adapting the blueprint image to the environment.

This tutorial is easy for beginners to follow, yet it uses a lot of the tools I had to use in my advanced Photoshop class. Getting through this tutorial and learning the techniques will increase almost anyone’s Photoshop skills.

Go create a realistic blueprint image from a 3D object now.

Creating a CD PLayer

CD PlayerI figure there’s enough Photoshop tutorials for creating iPods and other modern day mp3 players, but why not relive the 90′s?

This Photoshop tutorial is image heavy and very easy to follow. With a CD player being a common object laying around, this would be a great classic addition for a realistic space web design of a bedroom or office space.

For Photoshop beginners, this tutorial is great for practice with gradients and other techniques of adding depth to an image.

Go create a realistic CD player now.

How to Make Real Compact Disc

Realistic CD PhotoshopTo go along with our realistic CD player, we need a realistic CD. As you can see, this tutorial uses similar lighting effects as the vinyl record below.

This tutorial is easy to follow and will go over a bit of transparency/blending modes, filters, lighting effects, and the transformation tool. Great technique for advanced users to learn, and great for beginners needing an step-by-step introduction to some of these Photoshop features.

This would be a really cool and realistic addition to a web design with a realistic space.

Go create a realistic compact disc now.

Creating a Vinyl Record In Photoshop

Vinyl Record PhotoshopLet’s go back in time a bit more and create a vinyl record in Photoshop.

The great thing about this tutorial is that it uses a few filters, so anyone unfamiliar with them can get some practice. Even for those who aren’t new to Photoshop, a new use of some of the filters is a greatly appreciated technique.

Included in the tutorial is also some other great techniques for texture and lighting. They are specific to the tutorial, but knowledge of them can be easily transferred to other realistic objects created in Photoshop.

This tutorial is a great option for vintage or retro web designs.

Go create a vinyl record now.

Create a Realistic Outer Space Scene

 Create a Realistic Outer Space SceneThis one’s pretty cool: a realistic outer space seen in Photoshop. This tutorial does not use any image references — just Photoshop filters, lighting effects, and blending modes.

Because it only uses Photoshop, it is great for the ultimate customization from the designer. With this tutorial, a designer can create a scene specific to their own design needs.

This tutorial is great for any Photoshop user that would like a better understanding, or learn new techniques, for filters and blend modes.

Go create a realistic outer space scene now.

24 May 2009

2

50 Textures of Man-made Origin

I’ve collected 50, relatively large and high-resolution textures created by humans in some way, under the categories of fiberglass, packaging, rubber, Styrofoam, tape, electronics, tile, concrete, brick, signs, and graffiti. With such a wide variety of form man can make, using these textures to create art is only a small step away.

12 May 2009

6

5 Tools for the Lazy Web Designer

Sometimes we get lazy from time to time, but still need to get some website work done. Fortunately, there are thousands of tools to help designers, with some being more beneficial than others. Here are 5 of the best tools for web designers I’ve found so far.

They deal with a variety of topics covering typography, colors, navigation, layouts, and dummy text. Hopefully these tools can also help a lazy designer find the first small step into getting back into the designing routine.

Page 2 of 3123