87 Photoshop, Illustrator & Fireworks tips, tutorials, techniques & resources
Haulin' Ass With Dreamweaver: 10 Site Management Tools
"Here’s a list of 10 super-slick tricks to save time while managing your websites in the titan of web design, Dreamweaver."
Grunge and dirty Photoshop tutorials, brushes and textures
"Grunge, dirty, gritty, slimy, rusty, shattered, dripping, torn, worn, and whatever you think that you may frown upon in real life, is an awesome resource for creativity. This list is a compilation of sixty grunge and distressed effects resources for Adobe Photoshop. Go and get your hands dirty with them!"
Wireframing With InDesign and Illustrator
"There are a variety of tools used for interaction design. I’ve used them all and have settled on a framework using InDesign and Illustrator. It will require a series of articles to fully describe the framework I’ve developed. So, in this article, I’m going to focus on what led to the development of this framework and give you a brief overview."
Create Rainbow Logos with Warped Grids
"This tutorial is another user's request. It's an easy technique, but I'm sure you will be able to use it in all sorts of designs. It's very versatile. In this case I used this technique for a logo, but I could use it to create grids with light effects as well."
PS Brushes
"We're going to be adding new photoshop brushes weekly so be sure to check back often."
Top GIMP tutorial sites
"I was starting to think that building a site similar to PSDTuts for GIMP tutorials would be cool. Before I go and jump into a huge project like that I wanted to have a look at what was out there. When I say "Top GIMP tutorial sites" I don’t mean that these are sites that I endorse or recommend (although I might when I get to know them better), it actually means these are the top search results (with my first impressions of them)."
Adobe Photoshop Tutorials - Rainbows, Glows and Light Effects
"Now it's time for a sparkling dose of related Photoshop learning material. This article provides a resource of Adobe Photoshop Light Effects tutorials. These tutorials offer an assortment of techniques for making your work creatively glow."
100 wonderful photo effects Photoshop tutorials
"How can we define what’s a photo effect? The final result has to be quite different from the orignal picture and be recognized as a post production photo manipulation. So, with that in mind, I gathered what I consider 100 of the best photo effects Photoshop tutorials available on the web."
Grid tips for Photoshop users
"Grids greatly improve your layout. They add a level of consistency. Imagine the front page of the New York Times without a grid… It would be a mess, impossible to easily scan. I always make sure the number of columns I use is dividable with 3 or more numbers."
Rapid prototyping in Fireworks CS3
"Adobe Fireworks CS3 is a fantastic tool for quickly building out rich Internet applications. Adobe has recognized this "niche" and, in Creative Suite 3, added a number of new features that make it even more compelling in the specific area of rapid prototyping."
Prototyping with Adobe Fireworks
"It seems like Adobe Fireworks is becoming a new favourite prototyping tool of many interaction designers. With the CS3 version, Adobe has added a number of new features that makes it interesting for prototyping purposes"
Using the Pathfinder and Align tool in Illustrator
"Whenever I get a question from a user asking me “how did you draw this?”, I often have to answer that I’ve used the Pen tool. The Pen tool is probably the hardest tool to learn in Illustrator. It just takes time to master it fluently, but once you do, you have this freedom to create."
Fireworks: The Things You Might Have Missed
Wireframing with Fireworks CS3
"Wireframes are barebones sketches of your website or application and you can use to demonstrate, document, and often validate the functionality of a design without any distracting pixel artistry. This article expressed my thoughts on why Fireworks CS3 is a particularly good tool for wireframing. I also share some of the techniques that have worked well for me in the past."
A Gradient Tutorial
"Your eyes have been looking at things in the world for a very long time and they’re used to what a shadow looks like, what a light source’s highlight on an object looks like, etc. If you don’t approximate what your eye “thinks” something should look like then your design won’t accomplish the 3D look you’re trying to emulate."
Adobe Illustrator Tutorials - Best Of
"In this post we present a collection of excellent Adobe Illustrator tutorials for beginners and advanced designers. The new selection isn’t enormous, but big enough to provide you with some good starting points."
Adobe Photoshop Tutorials - Best Of
"This article provides professional Adobe Photoshop tutorials which can enrich your design skills and improve the quality of your works. Although the authors of the tutorials rarely provide the information about the used version, we tried to pick only those tutorials that can be used with both CS3 and older versions of Adobe Photoshop."
Adobe Dreamweaver Tutorials
"In the list below we tried to cover some of the most useful references, tutorials, ideas and sketches related to Adobe Dreamweaver. You might be willing to use at least some of them for your next projects."
Adobe Illustrator Tutorials
"As a vector-based drawing program Adobe Illustrator has nowadays become the standard for illustration design. Below you’ll find a list of hand-picked Illustrator tutorials you can use to achieve some special visual effects in your designs."
Hand-Picked Photoshop Tutorials
"Adobe Photoshop is a powerful tool for designing various visual elements one can use for web-pages. However, sometimes it’s important to know what to do in order to achieve some effects. In such cases, step-by-step tutorials can provide help and save a lot of time you would have to spend on finding a solution otherwise. Let’s take a look at some of the best Adobe Photoshop tutorials we’ve found in the Web so far."
Adobe Fireworks Tutorials and Downloads - Best of
"There is a lot of confusion about what exactly Adobe Fireworks is, what it is good for and why one should actually use it instead of Adobe Photoshop or Adobe ImageReady. The answer is simple: Fireworks isn’t a replacement for both tools, but rather a more effective, integrated environment for designing site layouts and quick mockups."
Making ‘IE6-friendly’ PNG8 Images
"While we’re never going to be able to reproduce the transparent shadow in IE6, we do need a way to generate a lot more of the blending colors along the edge. I’ve found the easiest way to do this is to bring a tiny slither of the background inside our shape."
Newspond menu on Fireworks
"Our first post is about the Newspond menu. The colors and effects are smooth and really modern. And it was the little details in the design that called our attention and made us decide to use it as our first tutorial. We're going to use Fireworks to develop all the design, the steps are simple, but it's the adjustments and gradients that will make the difference in the final result."
Adobe Photoshop CS3 Tutorials - Extract Complex Shapes
"Ever tried to extract a model’s hair with the pen tool? Well, I gave up after a few minutes and eventually came up with another way to do that, which I’d like to share with you here in this Adobe Photoshop CS3 tutorial."
Create an Illustrated Look From a Photograph
"In this tutorial I will show you how the create a stylized illustrated look from a photograph. The best part is that it requires no artistic ability! You can do this to any photo and pretty much any subject but I think it works best with people."
How to design a sexy header for your site using CSS
"I decided to publish a post with the "process" I use in general to design graphical sections for my web sites."
Creating Seamless Web 2.0 Stripe Site Headers
"Simple stripes on the Site Header has also got its place in the Web 2.0 Trend. This concept of repeating a pattern looks pleasing and doesn't even increase filesize. Here you will learn how to create simple headers like the below example."
Photoshop Template for Blueprint CSS Comps
"I created an Adobe Photoshop template for creating comps that work with Olav Bjorkoy's Blueprint CSS Framework. The Photoshop template is simply a document with vertical guides based on the 24 units provided by Blueprint. A layer is provided to show unit numbers if you like, and 2 layers showing the grid dividing into thirds and quarters."
Illustrator Template for Blueprint CSS Comps
"I created an Adobe Illustrator template for creating comps that work with Olav Bjorkoy's Blueprint CSS Framework. The Illustrator template is simply a document with guides based on the 24 units provided by Blueprint. A layer is provided to show unit numbers if you like, and 2 layers showing the grid dividing into thirds and quarters."
Creating a Website Template with Gimp
"In an effort to contribute to Gimp's greatness I have accidentally discovered a solution to (I feel) Gimp's ONLY drawback."
Grunge Style In Modern Web Design
"Below we’ve collected everything you would ever need for a perfect design in a grunge style — design examples, free fonts, icons, textures, brushes and even few tutorials."
Photoshop actions: 124+ Free Photoshop Actions to Boost Your Designs
"An action is a series of tasks that you play back on a single file or a batch of files - menu commands, palette options, tool actions, and so on. You can create an action that changes the size of an image, applies a filter to the image for a particular effect, and then saves the file in the desired format. Nice, isn’t it!"
Web 2.0 Styles for Fireworks
"Here is a set of 48 Web 2.0 styles for Fireworks 8 & CS3. This set is based on our Ultimate Web 2.0 Layer Styles for Photoshop"
Faster Font Selection
"If you’re anything at all like me, you have a ginormous font collection and scrolling through the entire list to find the one your looking for can be cumbersome at times. Here’s a quick tip to spend less time scrolling and more time designing."
How to create Vector Wings
"In this tutorial I will explain you simple steps in creating those fine-looking wings as included in one of my freebies and those on other designs that you may stumble on all around the web."
45 Photoshop Tutorials for Better Navigation
"Navigational buttons, bars and menus provide the designer with an excellent opportunity to be creative and add some style to the design. What better tool to use for this purpose than Photoshop?"
Quick CSS Mockups with Photoshop
"Create quick design mockups in clean XHTML and CSS, using code generated by Photoshop. No, really."
100 Awesome High Resolution Photoshop Brushes
"Let's dive today into a sea of brushes. Hundreds of thousands of sets are lying undiscovered like pirate treasures all over the web."
Make a political statement
"Create striking imagery in the spirit of past and present propaganda art. Command attention with sharp edges, minimal detail, bold colours, and the misappropriation of familiar iconic details..."
Photoshop to Flash
"Paul Wyatt reveals how to transfer your Photoshop artwork into Flash using CS3’s new PSD Importer to create movie clips, add instance names and ready your creations for animation and interactivity"
Masking with type
"Illustrator’s masking tools have long been a powerful part of its feature set. Here Martin Fewell shows you how to use masked images with typography to create an eye-catching illustration."
Distressed effects
"Adding a distressed, weathered look to your artwork is very much in vogue these days, and it’s easy to achieve using Illustrator’s Live Trace and Pathfinder features. Mark Mayers explains how"
Retro car vectors
"All you need is Illustrator, some inks and some brushes to turn a photograph of a car into a vector illustration. John Kelly of Joke Art talks you through the process"
Ornate lettering
"Go Media’s Jeff Finley shows you how to create ornate lettering from sketches and vectors in Illustrator, make it three-dimensional in 3ds Max and fine-tune the final result in Photoshop"
Graffiti stamp art in Photoshop
"Adding urban flavour to your artwork is easy. Derek Lea defies convention with the Brush tool, and explains how presets work..."
Add Stock Textures to Images for extra ‘Oomph’
"In this little Photoshop tutorial we’ll be designing a quick art piece, and then we’ll be adding some texture to it, this is to demonstrate the use of texture in artwork, as you may be able to see in works from people such as GoMedia."
Modern web layout
"In this tutorial you will learn how to design a simple but modern website layout."
Grunge Borders
"Today I am going to show you how to make two different grunge border effects without having to use grunge brushes."
Beautiful lighting FX effect in Photoshop
"This tutorial will show you how to make a beautiful lighting effect on scatters by using Photoshop."
101 Hidden Tips & Secrets For Photoshop
65 Adobe Illustrator Tutorials
"Illustrator is Adobe's main software for vector graphics. Here's a series of 65 tutorials that will be your source to learn new techniques, or your source of inspiration and ideas."
Photoshop Text Effects Round-Up:
"51 Text Effect Tutorials Every Designer Should See"
Creative Use of PNG Transparency in Web Design
"PNG is a losslessly compressed bitmap image format. In plain English, it’s a way of saving graphic images that reduces file size without reducing image quality."
Advanced Glow Effects
"In this tutorial we're going to create some really sharp looking glow effects using a combination of layer styles, the pen tool and colour blending. The end effect is quite stunning and hopefully you'll pick up some tips you didn't know before."
Vector Polishing Techniques
"This tutorial includes 9 Photoshop techniques that will show you how to add more depth, color, contrast, and texture into your vector art."
Cleaner, Sharper GIF, JPEG, And PNG Images
"Fuzzy images? Unclear graphics? Optimize your GIFs, JPEGs, and PNGs with this handy guide. Tom explains these file formats, and gives tips to improve their appearance on your site."
Web Domination Using Photoshop
"Here, Corrie provides a full arsenal of fundamental techniques, before launching you on a stellar trajectory that takes in buttons in all their forms. With her step-by-step instructions, handy hints, and secret tricks, you'll have everything you need to bring the Web to its knees."
Get Cooking with Photoshop and CSS - 3 Low-fat Recipes
"Corrie shows how easy it is to tweak the graphic ingredients of your designs to produce completely different results. She cooks up three tasty design styles in Photoshop, then shows, step-by-step, how to reproduce them using CSS."
Using Light & Shade to Bring Text to Life
"In this tutorial we are going to take some very basic principles of light and shade to make a rather impressive looking text effect."
Photoshop Secret Shortcuts
"It is proven that by using software shortcuts can boost up productivity. Here are 30 secret Photoshop shortcuts that I’ve learned from years of experience."
Random Lines Made With Mesh
"Veerle Pieters saves us from the code (the incessant code!) with a dazzling design technique using Illustrator’s Mesh feature. Coders take note! You can make something really pretty by just following a few basic steps."
The Best 80 Photoshop Text Effects on the Web
"For those like me that love text effects and have the courage to admit it, here's a thorough guide to the best 80 text effects available on the web."
Web 2.0 Tutorials Round-Up
"If you are planning on designing a web 2.0-project, you probably should know how and where to start from. Badges, Gradients, Mirror and Shadow Effects as well as Shiny and Glassy buttons are trendy. But do you know exactly how to design them?"
Peeling Sticker Effect
"As a child, there are few things more fun than sticking stickers on things. Everything(s). Here's how to easily create a peeled sticker effect."
Create an aged, worn version of a photo
Create a worn stamped text effect
Create a wicked worn look
Create ripped, torn edges
Create retro buttons
Design a safety icon
Design mini-icons
Create a watercolor effect navigation menu
Create glowing interface buttons in Photoshop
Create glowing orb buttons
Create a plastic, jelly-style text effect
Create a smooth glass type effect
Create a slow shutter text effect in Photoshop
Create a flaming meteor text effect in Photoshop
Create 3D typographic effects in Photoshop
Create a realistic torn paper Effect
Create a product box
Create an amazing light effect
Create a photomontage in Photoshop withour filters
Create vector-sharp illustrations in Photoshop
Convert a photo to a vintage style
Create a simple gold text effect
Create a simple gradient header in Photoshop