Sometimes it is just worlds easier watching a tutorial than reading it, and the Internet has made video tutorials of all kinds very available. Photoshop tutorials are especially popular due to the complexity of the popular program.
Continue reading 20+ Photoshop Video Tutorials.
Over years Adobe Illustrator has become the standard application when it comes to illustration design. Artists, illustrators and graphic designers use Illustrator to create vector-based graphics which — contrary to raster-based editors such as Adobe Photoshop — can be easily rescaled without the loss of quality. E.g., Illustrator is often used to quickly transform hand-drawn sketches on a sheet of paper into lively and colorful digital images.
Read the rest of the article Adobe Illustrator Tutorials - Best Of
Smashing Magazine has pulled together a list of the best Photoshop tutorials. There are over 25 tutorials and sites for you to check out.
DesignWalker also has a roundup of Photoshop text effect tutorials.
Coliss.com has a collection of links to free Photoshop brushes that you can download and use.
PSDtuts has loads of Photoshop tutorials for you to try out.
Bittbox has a set of 12 Grunge brushes for Photoshop that you can use with your projects.
Brusheezy has loads of brushes, patterns, and other Photoshop resources that you can download for free.
The Photoshop Roadmap has a collection of 80 of the best Photoshop text effects on the Web.
Brown Thoughts has a collection of links to 35 Free Photoshop Actions that you can download to automate your Photoshop tasks.
Enjoy photography? Check out Emma Alvarez’ Top Best 55 Photoshop Tutorials For Professional Photographers. There are tutorials for creating glamour effects, landscape retouching, photo retouching, advertising design, color effects, wedding, old effects, and other miscellaneous techniques.
There are links to some great Web 2.0 Webdesign-Tutorials at Dr. Web Weblog.
Design Phase has created some really nice Photoshop tutorials for creating banners, Web page mock-ups, logos, badges, and more.
Planet Photoshop has tons of regular and video tutorials for Photoshop. They even have a tutorial for using the tricky vanishing point filter in Photoshop.
Stuck lists 112 different Photoshop tutorials. Tutorials are rated.
Photoshop Support has several free video tutorials specifically for version CS3.
Photoshoptutorials.ws has links to loads of tutorials for all different versions of Photoshop.
PhotoshopCAFE has Photoshop tutorials for special effects, text, photos, texture, Web, and more.
The Russell Brown Show offers Photoshop Tips and Tricks in Podcast format so you can watch them on your computer or download them to your iPod or iPhone.
3D Total has posted links to 100 Photoshop Tutorials for Creating Beautiful Art.
Nick La of NDesign Studio and Web Designers Wall offers nine Photoshop and Illustrator tutorials.
Web Design Goldmine links to 10 Photoshop Tutorials To Create A Wicked Worn Look.
Now is a great time to learn about Adobe Fireworks, an image editor originally produced by Macromedia. I thought I would post descriptions of all of the tools used in Fireworks and some tutorials.
| Tool Panel | Tool | Expanded Tool |
|---|---|---|
| Selection tools - Used to select and alter existing objects
|
 |
 |
 |
SubSelection Tool - Use this tool to select items that are hidden behind other objects | |
 |
Tools used to alter the appearance of existing objects |
|
 |
||
Drawing, editing and selection tools for Bitmap (typically photos) image. |
 |
Used to make square or circular selections - selections can be filled with color, copied, resized, distorted, etc. |
 |
Used to make precise selections
|
|
 |
Magic Wand Tool - Quickly selects an area based on color | |
 |
Brush Tool - Draw brush strokes | |
 |
Pencil Tool - Draw freehand lines | |
|
|
Eraser - Erase areas of an image | |
 |
These tools are used to enhance the appearance of photos.
|
|
 |
These tools are used to enhance the appearance of photos |
|
Tools used to edit Vector images |
 |
Line tool - Draw straight lines |
 |
Used to draw freehand vector graphics |
|
 |
These are vector shapes you can use in your artwork |
|
 |
Text tool | |
 |
These tools are used to alter vector drawings (paths) |
|
 |
Used to cut a vector shape | |
Tools used to define areas of a Web page |
 |
Tools used to define areas of a Web page |
 |
Tools used to define areas of a Web page
|
|
 |
Hide slices | |
 |
Show slices | |
Used to set tool the color of an object |
 |
Eyedropper tool - used to select a color from anywhere on the screen. |
 |
Fill shapes and selections |
|
 |
Set the stoke color of an object
|
|
 |
Set the fill color of an object |
Fireworks Tutorials
Using the Gradient panel in Fireworks CS3
Free Fireworks Gradient Styles
Create Web2.0 logos with Fireworks
Realistic 10-step 3D simulation with reflection in Fireworks 8
Animation: The Fireworks CS3 to Flash CS3 Connection
Adobe Fireworks Developer Center
Virtual Clues Fireworks Tutorials
Tutorials2Go Fireworks CS3 Tutorials
Fireworks Resources at WebSiteTips
Using Fireworks CS3 to design effective, interactive website presentations
Project: Create a Layout in Fireworks CS3
100 Fireworks Tutorials at Tutorialsphere
Create a Planet from scratch with Fireworks
Removing Image Backgrounds With Fireworks 8
Rapid Fire #1: Photo-Realistic
Tom asked about making the Google logo. Here is a tutorial for making the plain Google logo using bevel and emboss techniques:
Your Own Google Logo from LOGOogle
You can view all of the different Google Doodles at Google’s Web site.
Happy holidays to all! See you in Antioch in 2007!!!!
Gradients are used a lot on Web sites to create the illusion of 3D or depth. Here are some tutorials for creating gradients in both Photoshop.
A Gradient Tutorial from the 9rules.com Blog - Simple method for creating a realistic looking gradient. Note: If you print this article, please print only pages 1-5 since the rest of the pages are comments about the tutorial. You can print a specific range of pages by click File > Print > Pages and typing 1-5 in the Pages box.
Adobe Photoshop CS3 Style Icons from Team Tutorials - Simple tutorial for creating icons that look like the new Adobe CS3 icons.
Creating the Photoshop CS3 Icon Tutorial from TechTut - This is a fun tutorial that involves gradients, glows, and several other Photoshop tools. It’s a bit more complex than the icons tutorial. We will work through this tutorial in class and I will handout printed copies of the tutorial for your reference.
Today we will work on creating simple vertical, horizontal, and diagonal striped background images in Photoshop. These background images can be used as backgrounds for pages, paragraphs, headings, and other elements.
Creating horizontal stripes
In Photoshop click File > New
Set the Width of the image to 1 pixel
Set the Height of the image to 4 pixels (the height controls the amount of space between stripes. The higher the number the more space between each stripe).
Set the Background to Transparent
This is going to create a very tiny image. You don’t need a huge image to create a nice background because you can repeat the background with CSS.
Press CTRL and + on your keyboard about six times to zoom in on the image. Still pretty small, eh? That’s ok, you don’t need to see too much of the image to create the background, but if it’s really too small continue to zoom in until you feel comfortable with your view.
Click the Foreground color chip and select a very light color for a more subtle stripe. I selected a very light shade of green.
Select the Pencil tool located in the Brush group. If necessary, hold down your left mouse button on the bottom, right corner of the Brush tool until the flyout appears. Click the Pencil tool.
By default the Pencil tool has a 1 pixel diameter. You can check the diameter in the toolbar below the menu at the top of the Photoshop window.
Position your cursor at the very bottom of the image as illustrated in the image to the right and click once to paint the area. The image to the left illustrates the color at the bottom of the image - this image is zoomed in by 3200%.
Time to save your image as a transparent gif file. Click File > Save for Web or Save for Web & Devices depending on the version of Photoshop you’re using. Set the file type to Gif (it may be set as JPEG), make sure that Transparency is checked, set the colors to 2 since you’re only using one color in the image. It’s important to adjust the number of colors used on a GIF image since the fewer the colors the smaller the file size. Click Save. Save the image into the images folder of your site.
This very small image will repeat across and down the element that you apply it to with CSS, creating stripes across the background of the element.
You can add this image as a background to most elements. Below is the code for adding the image to the background of the page.
body {
background: url(../images/greenstripe.gif);
}
You could also apply it to the background of an h1 element like this:
h1 {
background: url(../images/greenstripe.gif);
}
Because you don’t set any repeat properties the background image automatically repeats across and down the page or element. This is the default behavior for a background image.
You can use this same technique to create vertical stripes by creating a 4 pixel wide and 1 pixel high image and painting the leftmost pixel. Try adjusting the size of the image and the size of the pencil to see what different stripe variations you can come up with.
Inspiration for this short tutorial came from the book The Photoshop Anthology by Corrie Haffly. This book is filled with great techniques for creating Web graphics.
If you don’t have Photoshop there are several Web sites that will create stripe images for you. Try Stripemania and Stripe Generator.
I’ve got to run, my Labrador is eating my yellow stickies!!!
Lynda.com is offering free access to this new Photoshop CS3 tutorial @ http://movielibrary.lynda.com/html/modPage.asp?ID=327.
You can actually download Photoshop CS3 beta @ http://labs.adobe.com/technologies/photoshopcs3/. Note: In order to run this software for more than two days you must have a copy of Photoshop CS2, Creative Suite 2, Production Studio, Adobe Web Bundle, or Adobe Video Bundle.
We have ordered Creative Suite 2 for the classroom. We also purchased the upgrade insurance so we should have CS3 as soon as it is available!
After our discussion on Pixelated Color Palettes in Photoshop yesterday, Nina showed me another method of picking colors for a web site from a photo.
Open Photoshop
Click File > Open and navigate to the file that you want to use as a starting point for a web site color palette. Double click the file to open it
Click File > Save for Web
In the Save for Web dialog box set the Optimized File Format to Gif
Set the Color Reduction Algorithm to Restrictive (Web)
Set the Colors to 8
In the color table you will have a nice palette of colors to work with. Hover your mouse pointer over any of the color chips to display the Hex value of the color