As internet connection speeds get faster and video file sizes get smaller, we’re seeing more and more on-screen training for products and processes that typically would only have a written manual (or nothing at all). This videos are an excellent way to learn a product, especially if you have trouble reading text on a screen or get bored easily. Additionally, videos provide another ‘visual’ layer for people who learn that way.

I recently had my first experience with Lynda.com watching some of their free videos on Illustrator. After watching only a couple of them, I was totally sold. I’m also in the process of making a series of videos showing people how to use a certain functionality of a software program I’m working on. Working with both the consumption end (watching) and production end (making), I’ve learned quite a bit about what works and what doesn’t when recording these on-screen videos. I’ve also learned that they are a lot harder to make than they look.

I want to share a few tips that a colleague and I came up with while making these videos. For reference, we’re using the Camtasia 5 software to record and edit the videos. While it isn’t perfect, there isn’t too much more to ask for and I’m not considering a different solution at the moment. Thanks to Mark Otis for a few of these ideas.

What’s the point?

Video training is a great way to show complicated steps or describe potentially confusing theories. Video training, however, is not great for short, easy tasks. If I wanted to show someone how to recover a file from their recycle bin, it is easier to simply say “open the recylce bin, find the file, drag out of the recycle bin” than it is to make a video.

The point being that not everything lends itself to being taught in a video format. To make a successful video, be sure to think about it from the student’s perspective. Do they gain anything by seeing it on a screen? Are there complicated steps that work better shown than told? Even better, do these types of videos already exist out there? Before you start, it might be a good idea to run a quick Google or Youtube search for your subject matter.

Start with an outline

Off-the-cuff demonstration is VERY difficult to pull off properly. By that I mean it’s pratically impossible to effective teach people without a guide to tell you what is next. Watch a presentation without a clear, concise outline or a script and you’ll notice that the presentation jumps around, misses topics, and ends up somewhat to extremely ineffective.

Even if the video is short, have precise steps to take on-screen available and print out or write down the points you want to make. It is FAR more important to have an effective video than it is to sound casual. Be clear beforehand what you will be showing and communicate that to the viewer within the first ten seconds. Stay on task, follow your outline, and err on the side of conciseness.

Test it out

Take it from someone who spent over four hours just to come out with one six-minute video: test your equipment. It takes 5 or 10 minutes to record a piece, run through the steps, make sure all the necessary files are there, and watch a finished product. This will save you hours! Listen for puffs of air on your “Ps” and “Ts”and adjust the mic accordingly. Make sure that the finished product can be heard clearly and that there are no problems with your powerpoint or the demo software. Produce a video all the way to the end and watch the finished product. Sound problems are the most common issue with on-screen demos and can be very frustrating to someone watching the video. Witha  bit of preparation, you can avoid headaches for yourself and your viewers.

Consider screen resolution

Screen capture video programs let you modify the size of the capture window you are using so if you’re going to shrink the capture size down to a small size, then your resolution is not terribly important. If, however, you’re wanting to capture the entire screen (from, say, a Power Point presentation), you’ll want to modify the size of your screen display (the resolution). To change this in Windows XP, right click on your main desktop window, select Properties, then the Settings tab. Try 800 x 600 first and, if that’s too distracting, then try 1024 x 768. Remember that what it looks like on your screen is different from what it will look like once it is produced. Reducing the screen size will cut down on the raw video file size and make it easier for the program to shrink the size when it is finished.

Turn everything off

Before you start recording, consider EVERYTHING. Is the window open, letting in a lot of noise? Is your IM turned off so you’re not interrupted? Is the background picture on your desktop distracting (or inappropriate)? How about the icons ON your desktop? Is your phone muted? Are there any pop-ups happening? A great way to avoid computer interruptions is to make a new login to your computer and remove everything off of the desktop. In Windows XP, go to Start > Control Panel > User Accounts and create a new user. Then, switch users by going to Start > Logoff and selecting Switch Users, then logging into the new account. Keep this second account “clean” by not installing or logging into any programs that cause interruptions.

Tags: No Comments.

Introduction

Last time we left off, I had put together a structure of what I wanted my website to display and what it might look like. After about weeks of stressing out in Illustrator, I finally decided on a design I like.

Matt Jurman’s article, mentioned in the previous post, speaks to a high quality design and says that the following elements should be present for a design to be considered “high-quality:” balance, unity, emphasis, contrast, and rhythm.

I’m new to all of this… how can this article help me?

Welcome to the new format of all of my blog posts (news items and quick ones not included). I’m worried that I might be struggling in a vacant gray area between the “knows” and the “know nots.” This blog is specifically for people who are just starting to explore what technology can do for them and their business. As such, I want to position everything that I write to face towards the novice, not the expert. I feel like a perpetual novice, always learning, and when I share that knowledge, I feel like I know it better in the end.

So, what does this article do for the novice? You’re either someone exploring web design for the first time, a web coder or developer who is trying to improve their design skills, or a complete web novice who wants to come up with a picture of what their business or personal site should look like. Whatever your situation, you want a web site that looks good, does what it should, and isn’t too hard to maintain. I strive as much as possible to build with those goals in mind.

This article walks through some basic aspects of design and shows you how I used them to create a picture of what my site will look like when it is finished. I used to this “design language” and “core elements” were just a bunch of fancy words people used to look smart. I was surprised when I actually took the time to understand them and practice them and found that my designs improved drastically. I want to help explain these concepts to you, show you how they work, and give a few resources where you can read even more.

My web site design in words

Balance … the headings (like “Home,” “Hire Me,” etc. as well as “Contact” and “News & Information”), logo (”Josh Can Help”), light header text (the “tame your technology” at the top), and lion tamer icon all provide the “heavy” while the rest of the text provides the “light.” It’s the interaction and distribution of heavy and light that make appropriate balance.

Balance can be used in several different graphic design elements… Creative Curio explains

Unity … All my freelance-related elements (yellow text) are grouped together on the right and all of the blog content on the left. Also, navigation elements are together, blog sidebar functions are together, and the posts are formatted similarly to come together as one. Groups of objects allows for macro white-space and makes finding the information you need much easier.

A List Apart speaks about white space (excellent article)

Emphasis … The left sidebar is prominent and draws the eyes through the navigation down to the tamer icon at the bottom. On the right, the headlines grab the attention subtly. Though the emphasis in this final design is how I want it, it’s the flow from focus point to focus point that is the most difficult. You want to provide a bold visual element to attract a visitor’s attention and then lead their eyes through the elements you want them to see. I’m not sure if I’m doing that appropriately but it should not be too hard to fix ex post facto.

A good piece on focus and not “squandering a user’s attention” from iLearn

Contrast … There is the obvious contrast of the left sidebar with the white space on the right. There’s also contrast within the sidebar with the colored navigation items along with the logo at the top. In the white space to the right, the black text on white background is the ultimate contrast. I would like to use a bit more exciting colors but it seems like the more vibrant they become, the more I lose the already minimal vintage feeling the website has. I may need to play with this.

A List Apart (again) with a very in-depth look at contrast. It’s a lot to understand but important.

Rhythm … the blog posts are formatted similarly and the blog widgets on the right will have similar formatting between them. The navigation items also have a rhythm between them. I see visual rhythm in a similar way that I see unity. Each of the different elements should roll from one to the other within the group. As soon as the

Here are a few of the highlights:

>>> I had a little bit of fun with the colors without going overboard. As you can see, there aren’t a lot of colors and the ones that are there are not particularly bright. I’m a big fan of very colorful artwork but I save my own exploration of this for my graffiti. My audience and my potential customers are typically over thirty (possibly far over thitry) and probably wouldn’t have the best reaction to a busy, extravagant design. My own design style concentrates on typography, cleanliness, and simplicity and I think this page reflects that.

>>> One recurring theme you see on the site and in my business in general is the lion tamer silhouette. I really like this symbol and want to use it as one of the few shapes I’m using on the site. You can also see I’m playing with some of the vector decorations that frame my business card. These two elements lend a slightly vintage feeling to the design while keeping it from feeling stuffy.

>>> The emphasis is clearly on the information to the left of the screen. This is (in order) a description of the work I do, a summary of the work I’ve done, and a blurb about me and what I’m all about. The next element are the blog posts which are secondary to the information you need to hire me for your projects. Finally, if you’re interested in reading more on my blog, there is the typical sidebar with information, ads, and more widget fun.

Here’s what might change:

+++ The description in the center might be different or look different. I don’t want it to compete with the “Josh Can Help” logo but it should draw the eye back up from the left sidebar.

+++ The left sidebar color may change. I’ve tried many different ones and I think I like the current one best but I’m not sure.

+++ The menu item descriptions may fall below the main text or appear when the mouse hovers over… not sure yet.

What’s next?

Complete and total destruction. I’m taking the default Wordpress theme, stripping it bare, and building back up into something wonderful. I’ll give an overview of what I’m doing and why but I don’t want to get into the nitty-gritty code details because it might be a bit too high-level (la-tee-da).

Tags:   balance · contrast · design · designing a web site · emphasis · rhythm · unityNo Comments.

More technology begets more technology, right? I wouldn’t agree across the board but there are times when the addition of one new piece of technology makes you start thinking about another. Case in point: I might be getting a new TV as payment for some work I’ve done. I don’t want cable but do watch a fair amount of movies from Netflix and we like to listen to music when we’re cooking/cleaning/hanging out.

My first thought is that it would be nice to be able to watch movies at high wuality when I have a High-Def TV. My second thought is that we have all of our music on two different computers (and have a hard time backing it all up). Third, it would be great to be able to easily watch streaming Netflix movies without always having to hook up and plug in a laptop… same deal with streaming TV shows from the network sites. Fourth, it would be great to have a way to easily stream music and play it for the whole apartment. Clearly, we’re in DESPERATE need of a solution!

There are specific media boxes out there but I really want to build my own to my own specs. Here is my Newegg wish list for parts. I basically picked the lowest price with the highest rating that did what I wanted.

Case

SILVERSTONE SUGO SG02B-F Black ABS / SECC Steel MicroATX Desktop Computer Case

I already have a power supply so I looked for a MicroATX case that could hold full-size video cards. This one got fairly good ratings and was not too big. I was actually surprised that this one is on the low end of pricing. I thought these smaller cases would be cheaper but I was definitely wrong.

$69.99 (sale)

Motherboard

GIGABYTE GA-G31M-S2L LGA 775 Intel G31 Micro ATX Intel Motherboard

Like the case, another great deal. Besides the microATX form factor (to fit in the smaller box), I was looking for one that would use DDR2 800mHz so I could use the RAM from my desktop. I’ve been considering more RAM in my main box and this was a good excuse to go for it.

$59.99

Processor

Intel Pentium E2180 Allendale 2.0GHz LGA 775 65W Dual-Core Processor Model BX80557E2180

Nothing special. I figure a dual 2.0GHz is probably a bit more than what I actually need it for but it’s only $10 increments for 0.2GHz of processing power. I’d rather shell out the extra couple bucks and have a potentially more usable computer.

$69.99

Video Card

EVGA 256-P2-N751-TR GeForce 8600 GT 256MB 128-bit GDDR3 PCI Express x16 SLI Supported Video Card

This is a tough one. The main computer upgrade people do, besides a new stick of RAM or two, is a vidoe card. As such there are A LOT of options and A LOT of configurations. I went with one of the cheaper ones but made sure it was highly rated. It’s easy to see the $25 video cards and want to cheap out but the ONLY thing I need it to do really well, play DVDs, might need some major playback power.  EVGA is a known brand and this got pretty high marks. There’s also a $30 rebate going on which is tempting…

$79.99

Hard drive

Western Digital Caviar Blue WD4000AAKS 400GB 7200 RPM SATA 3.0Gb/s Hard Drive

I knew I needed over 250 gigabytes, SATA and 7200RPM were no-brainers, and Western Digital is my brand of choice. This one represented the best of everything and 400GB made it very attracted. This may end up being my secondary back-up for pictures, documents, and everything else.

$64.99

Add it up

Toss in the $80 for RAM for my desktop (4 GB from G. Skill) and we’re at $425. Not too bad for a fully-functional media machine that can probably hold its own with a few games of Battlefield 2142.

Stay tuned for a build (maybe).

Tags: No Comments.

So I’m still mad at my web hosting company… really mad. Just recently, all the pages hosted on my account began to fall apart. I was getting 403 errors, missing graphics and styles, and pieces of code appearing randomly. It looked about as bad as it could get and I was at a total loss about what to do with it.

Without going too far into detail, my hosting company was of absolutely no help to me whatsoever despite, in the end, this being a problem on their end (as far as I can tell). Long story short, my .htaccess file got messed up somehow and all the permissions on my folders and files were changed. Are you lost yet? I was too before some major Google research.

What are hosted file permissions/attributes?

Each of your files and folders have a code attached to them to tell the server who gets to see them, write to them, and execute them. There are basically nine “yes or no” checkboxes that can be checked for each pile or folder on your webhost. Here is the permissions screen from Filezilla:

If you know what you’re doing, this can be a nice thing to know about. You can set individual permissions based on where the request is coming from and what the request is asking for. In the window above, you can see that the owner can do everything, the group the owner belongs to can to anything but people accessing the file from the outside (through the web page) can only see the file (Read rights) and work it do it’s job (Execute rights); they can’t write to this file/folder.

For your webpage to be functioning properly (I learned), the public permissions for ALL files that are touched by the page have to be at least on read. For a blog, like the Wordpress instance you’re reading this on, the public permissions need to execute as well (to run the PHP script that this is written in). I learned a lot of this on the helpful (but not VERY helpful) Wordpress forums.

One night, this mystical .htaccess file in my root public directory (the main one) became ill, I guess, and vomited incorrect permissions arbitrarily over my site. The consequences of this were random files unable to be seen from the outside and, hence, broken websites. Files that described how the site looked (CSS files) and images became inaccessible, as did all of the files that make a blog do all the fun things it does. In the end, I went through each site manually and changed the permissions to the numerical value of “755,” the magical number (allows everything except write permissions for Group and Public).

How can you tell if this happens to you?

Here’s what I was seeing…

Your site starts giving “403″ errors

The 403 error indicates that the file you’re trying to view is there but you’re not allowed to see it (it even says something about permissions in the error). If you haven’t done anything to your site and you start to see these errors randomly when you try to access your pages and/or sub-pages, you might be dealing with the same thing I was.

Some things work, some things don’t

You can see your text and HTML formatting (order of text, heading formatting) but no images or colors or style. This means that the site is being accessed but other files are not. This kind of thing combined with a 403 error is a strong sign that your .htaccess went south and you have some work to do.

Along with other weirdness, you’re getting “Internal Server Errors”

If you’re just getting an “Internal Server Error,” it might be indicative of a different problem but, combined with no styles and/or 403 errors all over, you’re seeing exactly what I was seeing and it’s time to take action

Crap, I’m seeing all these signs… what next?

First and foremost, contact your host and get a trouble ticket started. If you have a responsive host, they can change the .htaccess back to what it was and hopefully correct the problem. If they are not responding or don’t know what to do (which is ridiculous, let me just say that) then you’ll need to get in there yourself. Can you FTP into your files on the host? If you don’t manage your own site, contact your webmaster and tell them you might be having permissions issues with your site. If you do, then get to work…

1. Using your FTP client, go to your root directory (the main one, probably named something like “html” or “public_html”).
2. If your hompage is having style/color/image issues, look at the file attributes (in Filezilla, just right-click and select that option) of the .CSS file.
3. What you want to have is read rights for everyone, execute rights for everyone, and write access for the owner only (this is “755″ level). If your stylesheet is not all allowing for the public to read it, you found the problem.
4. As long as everything in the main folder (and all files in all sub-folders) should be seen by the world, then just right click the main directory, type in 755 (or select the right options), pick the option to propagate the changes (or make them “recursive” through everything), and click ok. If there are certain files that need to stay unobtainable, you’re going to have to manually do everything. Just remember you can select all/several fiels at once and change their permissions together or use the recursive option to change the site one directory at a time.
5. If none of this is working, email me at josh (at) joshcanhelp.com and hire me as your webmaster!

Good luck out there!

Tags: No Comments.

I’ve grown bored of my original homepage’s look and feel and I’ve been meaning to build a theme of my own for this blog so I’m combining the two projects. When I’m complete, joshcanhelp.com will point to a home page on this blog, directing people to information about me and what I do.

I’ve decided to use Wordpress as my page for a few reasons:

• Constantly revolving, current information gets the attention of search engines MUCH better
• Homepage is getting zero hits monthly, this blog gets several hundred.
• I need to spend more time helping people and less time futzing with my own site
• Content management is much easier and I don’t need to think about where new stuff will go
• Wordpress aesthetic is attractive

To get through this long process without driving myself crazy, I’m going to use an excellent web site design guide I found a while back. It’s called, appropriately, 12 Steps to Creating a Professional Web Design and it’s by Matt Jurmann. Though I’m new to the web design discipline, I’ve always had an organized mind and like walking through a process step-by-step rather than smashing my way through it. Matt’s article puts all the important steps in a logical order and presents it very accessibly.

So, what does Matt recommend as step 1? A three-stage design process to wring out all of those great ideas out and onto the table. And, with that, we begin…

Step 1: Design (stage 1: The Flow)

I’ve worked almost exclusively with non-designers on the web, email, and print projects I’ve been involved with and this step is always conspicuously missing. Don’t get me wrong, I’m definitely part of the problem, but two people on a mission without a concrete plan or idea of what they’re trying to communicate is a recipe for disaster.

The Pieces of the Puzzle

Let’s nail down what I’m trying to do with this project (keep in mind that I’m writing this as my brainstorming process). It’s of the utmost importance that I vocalize what needs to be accomplished and then stick to these throughout the process:

• I need, first and foremost, a digital business card. The most important reason this website exists is to get me new clients and make new connections on-line. For this reason, the fact that I’m for hire and my contact information needs to be present and somewhat prominent everywhere.
• The clients that I want/expect are not going to be greatly technologically savvy. As such, everything needs to be easy to use and easy to find. Form MUST take a back seat to function; this is not so much a creative outlet as it is a funnel for the technologically challenged.
• Because I like to write and my writing brings clicks and new people, the blog feed needs to be prominent on the site and be an integral part of the process. I want to post news, happenings, hirings, new projects, completed projects, design inspiration, and how-to guides. Anything new added to the site will likely end up being posted on my blog at the same time.
• I need a portfolio to put my completed work and anything extra that I do for myself. There are a few different types of work that I do and each one needs a bit different type of “gallery”
• I need a place for my resume (I have a page for now). This includes experience, qualifications, mad skills, recommendations from LinkedIn, and completed projects.
• The site needs to generally match the style of my business card. Either white or off-white background with a concentration on typography and simplicity. My target audience is not designers or tech-savvy people so I want a layout that’s very easy to use and visually appealing.

Skeleton Styles

I made a quick sketch in the car during a recent trip.

Everything with an underline is it’s own page. You can see that this is going to be a nice, simple website. I don’t want a lot of pages to manage and if I need to add content, I’ll add it as a blog post and link to it. I want my concentration to be on adding posts and blogging about the work I’ve completed. I also want potential clients to be able to scroll through my work quickly and only read more about the ones that interest them (links to posts).

Thoughts on Design

The next step is mocking up the pages and figure out how everything is going to come together. I’m not completely sure but I have a few ideas. Here’s my first draft for the layout. Comments on style and usability are always welcome.

I see a few things to change already but so far so good!

What’s Next?

• Start moving content into the blog before any design begins. I want to get the copy finished and formatted before I move forward with the theme creation.
• This is just the home page; work still needs to be completed on all the other pages, particularly the portfolio pages.
• Start looking through a few inspiration sites to add a bit more personality (light pattern in the background maybe)
• Find a blank or simple theme that I can start working with.

Next post: finished home page and portfolio designs!

Edit: I future-posted this and have completed a few of these items and taken the deign in a different direction (the one above it too “Josh” [if you know me then you know what that means]).

Tags: 1 Comment

I like finding two things that don’t intuitively mix and extend them out until they touch. It might seem funny to a graffiti writer think that the tools of logo/icon design (vector illustration software like Adobe Illustrator) could help them achieve new things and reach new people. To me, a computer nerd first, a businessman next, and a graffiti artist on the side, the whole process makes perfect sense.

This kind of thinking can work for any kind of artist. If you paint pictures, you can design shirts. If you draw cartoons, you can easily translate that to digital images for web sites or blogs. Find the niche, spread the word, and extent your influence. The more people you can reach with your art, the better (from a sales and reputation standpoint). If you do your art on the west coast and have build a following, there will be people on the east coast who have never heard of you and would probably love your work.

Here’s what I’m talking about…

I started with a simple drawing in my sketchbook. First step was pencil, then just plain old Sharpie marker on top. I don’t pretend to be an accomplished artist by any means but you get the idea. At this point, it was time to put some paint down so it was off the the Art Academy of San Diego.

Overall, this is definitely the best piece that I’ve done. It’s also the third time I’ve ever put can to wall and really went at one of my drawings. This art form is very cathartic for me… more on that another time.

The second picture above is almost where I stopped but I decided to add the white shine on the top and sides which really set the piece off. I really wanted a black outline but I bought Rustoleum satin black and that just is not the right paint for an outline so I ended up falling back to my old faithful, “blue note” by Montana Gold.

This could be the stopping point for an artist but, in my mind, there is more to do… much more.

With just ink on paper, there isn’t much that can be done with it but, as you can see here, I scanned the image into my computer (with my handy-dandy Canon MP610 printer/scanner which I highly recommend). Now, in Adobe Photoshop, I start playing with the image to make it look more vibrant and consistent. First, (this is always first for me) I opened the Image > Adjustment > Levels window. For those unfamiliar with Photoshop, this affects how much white and black is in the image; it’s like a contrast adjustment on crack. Just play with the levels until it looks right. Next adjustment was Image > Adjustment > Saturation. I use this to bring out the colors and make it look a bit more like my drawing (scanned images seem to lose a lot of color). Finally, to make the colors (black, light blue, and orange) perfectly consistent, I used the Eyedropper tool (”I“), picked a color the represented the color the best, then picked the Paint Bucket tool (”G“). At the top, I set the tolerance to “60,” found a spot on the color I sampled, then dumped it. Because the contrast is so high between these colors, it worked out perfectly. Then, using the same color, I picked the Brush tool (”B“), chose an appropriate size (”[" to decrease and "]” to increase), and cleaned everything up. I did this for each color.

This image is “finished,” meaning that this drawing has gone about as far as it can. To move forward and make something transferrable, we need to move it into a new program, Adobe Illustrator.

First, in Photoshop, I took all the color out by going to Image > Adjustment > Desaturate. I’m not going to transfer the scribbles in the middle nor am I going to keep the color, just the outline of the letters themselves and the outline of the background.

Now I select the image, copy it, and paste it into Illustrator. The next part is a pain in the butt (especially if you’re a novice like me).

I keep the black and white image from Photoshop and use it to trace. What we’re doing when we trace a pixel image (image from Photoshop) is creating a line path on top of the illustration. Because this awesome programs work with image layers, we’re not changing the original image (though it looks like we are). Image layers are the digital equivalent of clear transparencies. If you can imagine tracing a picture with pens on a transparency and you have an idea of these layers. The fun part about these is that the layers are basically infinite so minor changes can be made and altered a million different ways.

To make this outline, I took the Pen tool (”P“) and added an anchor point on each corner, following the outline of the letters. See how you can follow that line around the entire piece except for the dot on the “i” and the insides of the letters? Every continous line is its own path and will be traced separately and then combined.

I would love to write out a tutorial about how this is done but it’s a bit beyond the scope of this post. If you’re dying to know, here it is in a nutshell:

1. The path around the edge of each letters is 4 point with no fill (simple techniques you can learn on-line).
2. After creating the path with the Pen tool, it was really blocky with straight lines only. Correcting this was the tricky part. Hold down Shift, then press “C” to use the Convert Anchor Point tool. Click on the point that connects on of the lines you want to be curved, hold down the mouse button, and drag away from the point to make handles appear. If this doesn’t seem to work, zoom in and make sure you’re selecting the point. the two lines that connect to this point will likely be screwed up now. Click on the square end of one of the handles and drag it around the point to separate it from the other handle. You’ve now made a “combination anchor point.” Now, type “A” on the keyboard and screw with the handles until the line curves correctly. You’ll have to do this for all the lines you want curved. This is a pain in the butt, not intuitive at first, and takes practice.
3. The insides of the letters (4 paths… see that?) were subtracted from the outside by selecting all 5 paths (hold down Shift while clicking), then choosing Window > Pathfinder, clicking on the “Subtract from shape area,” then clicking Expand (both are in the Pathfinder window on the left).

After all of that, I finally had an outline. Why all of this work? This image can now be resized to any size, large of small, without losing quality. You can also do some awesome things with this but first…

….I added the original colors to show how clean this format is. Picking new colors is as easy as selecting the shape and finding a new color in Illustrator’s swatches. I was really excited to find some amazing combinations of colors, things I would never think go together. You can also use Adobe’s kuler.com site to import fun combinations (I’ll save explaining that until I actually use it but check out the site if you’ve never seen it).

Next, we can play around with new colors, line widths, and, everyone’s favorite these days, gradients (smooth shift from one color to another). Above, you see my shiny Halloween version. Gradients can go from any color to any color but add a nice sense of depth if you choose a color and a slightly darker/lighter version of the same color.

Additional designs can be added very easily in this format. In fact, anything too complicated should probably be left out when tracing with the pen and added later. In this case, I added the scribble-style fill that you can see in the original and converted it to some wacky ice-cream colors (because I have a sweet tooth)

Last but not least, we can have some real fun and extrude this design to make it 3-D. This control can be found under Effect > 3-D > Extrude & Bevel. There is way too much fun to be had with using Illustrator to modify an original piece of artwork.

The vector artwork is great because it’s the best version to use for printing because it’s quality is infinite. You could take the vector file of the image above and make a vinyl wrapper for a skyscraper and the lines would be as sharp as you see them above. In fact, you’ll notice, the images above have very sharp lines to them.

These designs can be used in magazines and books very easily now. Also, since the color information is very simple, these designs are great for screenprinting (though a but more work needs to be done). As I said above, they can be used in vinyl designs for vehicles or blown up and printed as posters.

The bigger implication here is flexibility and expansion. Maybe I’m not a great graffiti artist but maybe my simple illustrations above look like a logo someone wants and I get business drawing one up. Maybe someone out there is a great graffiti artist but translates his/her work digitally and makes it known that he/she can do more than just make a piece of paper or a wall look amazing.

Expand out and learn new things; you’ll never be sorry.

Tags:   Adobe · art · expand · graffiti · illustrator · new markets · photoshop · vectorNo Comments.

Final, final, final design. Ink will be really dark brown, card is an off-white called “pearl.”

Tags: No Comments.

I think I like this the most because of the design. The [re]Drive…

The other benefit? It’s really eco-friendly. Some of the benefits include…

* Designed using recyclable aluminum and bamboo
* bamboo is steamed press using water only. No harsh chemicals or wood varnish are used.
* The aluminum enclosure is 100% recyclable
* Simplified eco-friendly package contains just the bare essentials to reduce waste
* No extra bags or inserts; the user guide is printed on the inside of the box and is also digitally stored on the drive
* Retail box corrugate is 100% recyclable
* Master carton is 100% recycled post-consumer content
* Protective external drive end caps are 100% recycled newspaper
* Energy-efficient design reduces carbon impact
* Energy Star® Level 4-qualified power adapter offering up to 10% power efficiency improvement over our current model, and up to 30% greater power savings over non-Energy Star adapters

The list goes on and on… but that’s undeniably a good thing.

I do a lot to make sure my footprint is low and part of that is driven by conscious consumer product purchases. I’m not perfect but I try to research what I buy to make sure I’m not doing any unnecessary harm.

Taming your technology has to do, in part, with not affecting others. Wasting energy to fulfill your techno-fantasies is on-par with taking a 45-minute shower everyday. You have to ask yourself, is it really THAT enjoyable?

Tags: No Comments.

I’m always looking for a bit of inspiration, be it color schemes or layouts, and currency provides both.

Pull a bill out of your wallet (if you have one) and look at it really close. The detail is impressive and the layout is very interesting, particularly because it has a lot of limitations/requirements. Currency is very ornate and acts as a representative of the country at large. Cash is like a language: it speaks volumes at home and is typically useless abroad.

I found a few bills that I had been using as decoration and scanned them into my computer (fairly low resolution… is that still illegal?). I put the back and front together, then zoomed in and sampled colors that were representative of that bill. Those are the vertical brush strokes at the bottom. Then, I found a very contrasting color somewhere in the image and cut that across the middle. The result is interesting, to ay the least.

This Indian Rupee has a great combination of purple, light blue/turquoise and a little bit of pink/orange. In person, the colors look almost iridescent. The window is a watermark of a person (someone important I assume). I see an interesting 3 column design buried in there (portfolio?):

Falls under the ever-popular retro category for sure. Calm the ornateness down a bit and cut back on a few colors and that could be a very successful one-page design.

The colors on this one are some of my favorites. The right 4 on the pallet above combined with the pink is very vibrant and appealing. The back of the bill is slightly reminiscent of an American dollar with the building in the middle and the decorations around it. Whatever is extending out underneath the “1″ on the back is a super-superb mesh-type design. For some reason, I really like these symbols from the front of the bill:

Next up…Argentinian:

This one looks really royal and ancient, like it has some Greek influence. Photoshop helped me bring out some great colors on the back because this one is really faded out. The front of the bill has a great layout that I’m struggling to figure out a use for.. maybe a business card? With a cartoon avatar? Maybe a classy handout for a photography or art exhibit? That italic font combined with the small caps on the front is also a great feature of this one.

I like this one particularly because of its bold colors. Like the bill before, the vibrant orange in this one was brought out a bit in Photoshop. The layout is the familiar one from our own currency. I’m really feeling that font on the front though I can imagine that its usage is pretty sensitive (easy to use in the wrong spot or overuse it). There is a lot to see on this one because it’s a big bigger than the other ones (lengthwise). Great decorations surrounding the bust:

I took the end pieces, got rid of the surrounding pixels, rotated, and made a mirror image. Try making that little guy into a pattern… very “oriental rug” style.

Another note from Thailand with a really different color scheme. The two colors on the far right, the dark maroon/purple and the light yellow are a particularly nice combination; I can imagine those being used in a room or something. Lighten up the light colors and I could see this pallet used on, say, an upscale art gallery site or on a nice restaurant menu.

There were quiet a few shapes in this one that I like but, in particular, the corners on the front. The corner of this corner piece looks like an arrow, a shape I’m fond of for no discernible reason.

One more from the same country…

This one really strikes me because of just how ornate it is. The color pallet appears to be very limited but, zoomed in, there is a lot to see. The decoration is completely over-the-top but, because it’s cash, it’s allowed to be garish and distracting.

It might be hard, at first, to see where any usable inspiration could come out of this but it all lies in the details. I found the winged creature in the top left on the front very appealing; tone down the detail and stylize it and you could have a great crest for a logo. There are also several patterns in the framing that could be used, maybe in a more subdued color, as a background.

Finally, one of my favorites…

I got these bills a long time ago (15 years, maybe) from my grandpa and I never really liked this one in the beginning. They got put away for many years and just recently pulled out and this one jumped out as being so unique. Look at the guy on the front, how 50’s Hollywood is that image? The brown color is great (better in person) and the composition as whole feels, to me, very theatrical. The font for the “100″ is perfect and has this old west feeling to it. It’s also very creative how they incorporated the watermark spot into the unused portions of both portraits.

Hope you enjoyed that; I thought it was great to pull this apart a bit and really get up close and personal. I wish I could scan these with more detail but, well, that’s probably not a good idea.

Tags:   color · currency · design · money · palletNo Comments.

Somehow, all the permissions on arbitrary folders on my web host got changed to arbitrary numbers. VERY little help from my host on this one, none-too-happy about that. Stay tuned for an explanation of the problem.

In the meantime, a photo of what I do in my spare time… recycle. This time, electronics:

Part of taming your technology is making sure that you deal with it responsibly. I found an e-waste even on-line and took a whole mess of monitors from the software company I’m working with. Electronic waste is a big problem; make as little of it as possible and, what you do make, get rid of it responsibly too. Here are a few resources for those of your in San Diego:

San Diego Waste Management can pick some of it up.

San Diego E-Waste takes it but they charge a fee.

Have newer, usable electronics? Check out Costco; they’ll pay you for certain items.

Recycle San Diego gives a few free events and it looks like it is kept up to date. Plus they have this awesome hard-drive crushing video:

Tags: No Comments.