FLASH :: FLEX :: ILLUSTRATION :: ANIMATION
Illustrating In Illustrator 101 part 3 of 5 – taterboy
December 24th, 2009 | Filed under: Design, General Info, Illustrator, Tutorials
Defining Shapes
Lines:
Some may think that illustration is all about the lines, comics and other art styles may give this impression. I use line-work in most of my illustration styles, though not always black lines. If you do not use lines in your work, you use color or some other means of creating contrast between forms and objects. It is this contrast between colors or light and dark values that produce the lines we think we see everyday in the world around us. We will discuss the use of line-work and contrast to properly define shapes, light and shadow.
Comics may use line-work, but on closer inspection we find that those lines do a lot more then just define the shapes of the drawing. The line weight varies as it contours each element. This line variation builds the foundation of the form which gives the illusion of dimension. As you can see with the simple line drawing below. The drawing on the right pops with dimension while the left side looks more like a cave drawing.
Create Adobe AIR Badges At Any Size – taterboy
December 16th, 2009 | Filed under: ActionScript 3, Design, Flash, Flex, Free Components/Classes
UPDATE: 2/17/10
We added a redirect option to the HDBadge that allows AIR application install badges that are too small (smaller than 214×137) to redirect to another page or call a javascript function. The size 214×137 was as small as I could shrink the badge before the AIR install dialog would not show up (tested on a Mac w/Safari). See updates below.
Are you sick of trying to design around the existing Adobe AIR badge templates. In most cases they are way too large or have a look and feel that does not really match your design. A few companies have their own custom solutions with AIR badges that are nicely integrated into their sites. I wanted that for the updated ChessJam site, but instead of building one badge for each size, I wanted a completely flexible (one size fits all) solution from one swf.
The HDBadge Features:
1. One Size Fits All - The size of the badge is determined by the size you use in the object/embed code of the swf. The swf does not stretch, so you could have a badge that is 40×20 and 800×600 from the same swf, depending on your needs.
2. Smaller Footprint - One of the reasons the current badges are so large is they display AIR/App install error messages. This version hides the button after clicking revealing a console type area behind it. The error text conforms to the size of the swf.
Read More »
Building Tiled Backgrounds Using Photoshop and Illustrator – taterboy
November 3rd, 2009 | Filed under: Design, Illustrator, Photoshop, Tutorials
I can’t wait to get back to publishing Flash tips and code, but we’ve been so wrapped up in ChessJam lately leaving so little time to clean up code and make things more component-ized. I am enjoying the break from programming though, doing illustration again has been very rewarding.
Fixing Blotchy Textures:
In producing tiled textures for some of the background paintings and 3D renderings, I found that even though the tiles did not really show any seams, they were creating some weird patterns over the whole tiled area. They needed tweaking without a long and laborious process of exporting and rendering. The key for me was to have a realtime preview of what I was working on, seeing how the tile would look tiled over a larger surface while I was painting in Photoshop. There may be better ways, we always appreciate feedback, but this worked really well and now my textures are much less blotchy.
Read More »
HDflix an AS2 FLV Player For Custom Skins – taterboy
May 10th, 2009 | Filed under: ActionScript 2, Design, Flash, Free Components/Classes, Tips, Video
There are many video players and player skins available online, but it can take hours to build something completely custom. Here is an AS2 FLV player that can make creating completely custom Flash video players a lot easier. HDflix is a fully functional player, but allows you to assign your own artwork to the player controls. This is not skinning an existing component, it is creating artwork, then assigning the artwork pieces to each control. Once a control is assigned, rollovers, button state events and control functions are automatically applied to your artwork.
See the Readme file and demo below.
Read More »
Photoshop Tips Though the Years – taterboy
March 28th, 2009 | Filed under: Design, Digital Art, Photoshop, Tips
Can you believe Photoshop is almost 20 years old? It was initially distributed as scanner software by a company called BarneyScan in 1988 and Adobe officially released Photoshop 1.0 in 1990. A tear comes to my eye as I think about all we have been through and how much Photoshop has evolved over the years. “Our baby is all grown up! sniff, sniff.” With each new release came new features, some highly anticipated while others I still wonder what they are used for. As an artist though, is it really about the features? The art is created inside you, we use the photoshop as a tool to express our creations to the world. It was just a lot more barebones back then. I guess this is my version of the famous story, “Walking To School Barefooted, Uphill Both Ways”. That’s right, when I was a young man, we didn’t have a Navigator Palette and all those fancy Layer Effects. We still made art, and it was good. So, what if our our monitors only had 8 bit color at 640 x 480 resolution. That’s what it means to be old school! (Not to take anything away from all those really old school individuals who endured 1bit color.)
I started using Photoshop at version 2.5, though I have not adopted all the features that have come out over the years, I have learned a few things. I remember scoffing when Layer Styles appeared in version 6, everything new just seemed to be focused on filters and effects. I can do a perfectly good drop shadow from scratch, I thought; maybe even faster then it took someone to open the Layer Styles palette and enter in their settings. I did come around though and appreciate how all the styles are non destructive and adjustable.
Read More »
Easy Custom Scrollbar Class for TextFields (AS2) – taterboy
September 17th, 2008 | Filed under: ActionScript 2, Design, Flash, Free Components/Classes, Tips
Here is the twin brother of the Easy Scrollbar MovieClip Class that works with TextFields. It does not require the masking and is perfect for Input TextFields. It has all the features of the MovieClip version except for easing. TextFields scroll one line at a time which is not very smooth.
Read More »
Easy Flash Custom Scrollbar Class (AS2) – taterboy
September 10th, 2008 | Filed under: ActionScript 2, Design, Flash, Free Components/Classes, Tips
I know there are some really nice scroll components similar to this on the web, but I think this still has merit. It seems like every job comes with a different scroll bar design, the buttons and scroll bar can be any shape, size or configuration. While most Flash scroll bar components are easily skinned, this is kind of the opposite of skinning. You create the artwork, convert each item to a MovieClip, then apply the class. The code wraps the artwork instead of the artwork skinning the code.
This class started around 3 years ago and has been modified for many different projects and continued to evolve into what we have today. It is not perfect, but it can handle most jobs needing custom scroll bars.
Read More »
iPhone Interface Artwork (Vector) – taterboy
June 20th, 2008 | Filed under: Design, Digital Art, Illustrator, iPhone
There is a huge buzz around the new iPhone SDK, at least in some circles. Here is a collection of a few iPhone interface objects, in vector (Illustrator CS3), for anyone wanting to design an interface for the iPhone or an iPhone look-a-like app.
source.
Illustrator Tip #11… – taterboy
June 18th, 2008 | Filed under: Design, Digital Art, Illustrator, Tips
…and The Most Important:
Learn as many keyboard shortcuts you can. This is not an illustrator only tip. As with any app that you work in and expect to be proficient at, you should learn the key-board short cuts. In the manuals that come with the box, there is normally shortcut charts. If you did the download, you can find them online. Most Adobe apps have the ability to re-assign key-board short cuts as well. I would suggest against it, unless it is necessary, because if you ever go to work at a different location, or have to show someone something on a different computer, it helps if the shortcuts are the same. Some reasons we have had to change shortcuts in the past are, In Illustrator CS2 and previous, The shortcut for switching between the hollow and solid arrow selection tools, was Command + Tab (Ctrl + Tab on PC). On a mac, all the way back to OS 8, would instead toggle the application switcher. So instead of getting the hollow arrow selection tool, you would get a web browser or other open app instead.
In Photoshop CS2 and before, Command + Option + D (Ctrl + Alt + D on PC)was the short - cut for Feather Selection. On a Mac since the introduction on the dock, that shortcut was used to toggle the dock to appear and disappear. Both of these shortcuts were easily fixed by customizing the shortcuts to require and extra Key. That way Command + Option + Tab to toggle the selection Arrows in Illustrator and Command + Option + Shift + D to get the Feather section dialog box.
I believe Illustrator CS3 now comes pre-modified? (I seriously can not remember if I had to change that or not and I can not find any documentation on the Toggle Selection Arrow short cut as it this post). But Photoshop CS3 has done away with the Feather Selection dialog box and replaced it with Refine Edge which is Command + Option + R (Ctrl + Alt + R on PC).
Here is a resource for keyboard shortcuts. They are not complete, but in a easier format to print.
http://www.keyxl.com/
Also for Photoshop Only Shortcuts :
http://www.photoshopsupport.com/tutorials/jennifer/keyboard-shortcuts.html
Flash:
http://www.adobe.com/go/tn_12105
Official Adobe help docs:
http://livedocs.adobe.com/en_US/Illustrator/13.0/WS714a382cdf7d304e7e07d0100196cbc5f-642a.html
http://livedocs.adobe.com/en_US/Photoshop/10.0/WSfd1234e1c4b69f30ea53e41001031ab64-76b9.html
http://livedocs.adobe.com/flash/9.0/UsingFlash/WS4B6E7EC1-81C9-4d9d-96C0-9C01EB96E1FA.html
10 Adobe Illustrator Tips – taterboy
June 16th, 2008 | Filed under: Design, Digital Art, Illustrator, Tips
With the nature of vectors being smaller than bitmap images in file size, I typically try to illustrate everything I do for Flash in Illustrator first. I love Illustrator as an illustration tool. Although Flash has made some great progress it’s illustration tool set, it just does not come close to the power and features of Illustrator. I also find Illustrator really fast for laying out design projects and more illustrative graphics then modeling and detailing in photoshop. Like any relationship, my affection for illustrator is not without frustration and we have to learn to accept some of the faults, if you can pardon my Dr. Phil type metaphor, to make it work. So here are some workarounds for some illustrator issues and a couple tips to help you work better with this great tool.
RSS/ Stay Connected:
Affiliated AIR Applications
Sponsors
taterboy1 tweets
Most Popular
Featured Blog: End User
Blogroll
- Amin Amat - Comic book artist
- AS3 to Cocoa Touch - Andy Jacobs
- ChessJam - Live Online Chess
- Dazzledish: New blog about food
- Devgirl - Holly Schinsky
- Flex Examples
- GotoAndLearn
- Greg Wilson’s Ramblings
- HD Interactive Blog
- HD Interactive Site
- Mac OSX Hints
- reallyMedia Site
- tBlurb
- TFFADG
- theFlashBlog
- WorkWatcher - Business Software