Holy crap, I had no clue how much effort and detail is put into making these characters. Granite I’m still perfecting the tools in Illustrator, so a professional would have probably finished this tutorial in half the time, but man this guy took forever. I probably have an easy 40+ hours into it, 1 hour here, 1 hour there etc. And I didn’t even do the blood pool effect part! I love the finished product, but man it sure gave me a lot of respect for vector artists out there.

The tutorial starts with a pencil sketch that is provided. I started outlining the parts and got most of it done, then my friend at work, Travis, a really good designer and artist (http://www.travisdahl.com) was helping me out and I ended up having to retrace the entire thing. One thing to remember is you want to always work all the way out to in. So background first, in this case it was the outline of my zombie character and then work on all the little features. I guess is pretty common in art, I should have taken more art classes in school, lol. At the point when I finished the outline, I had a good 4 hours into it already because I had to retrace a bunch of stuff. Pen tool FTW! I used the pen tool more on this tutorial than I ever have, really getting good with that guy now.

Another thing I liked about this tutorial is the shading aspect. I’ve never really dealt with shading before, especially on a complex vector zombie, but glad that this tutorial made me do it. Creating the shade was challenging at first, but then got a little easier. It’s all about dealing with masks and Gaussian blur to make sure the lines aren’t too sharp.

Overall, this has been my favorite tutorial to date. I want to start sketching out some of my own characters now and vectorize them . I finished the zombie right before Halloween, perfect timing for my new facebook profile pic, lol.

Here is the finished product:

Download Scot’s AI source file: VectorZombie.ai

View the tutorial here: http://vector.tutsplus.com/tutorials/character-design/how-to-create-a-stinking-zombie-flesh-eater-in-illustrator/

Thumbnail: http://www.scotspellman.com/wp-content/uploads/2011/11/Vector-Zombie.jpg

One thing I really liked about this tutorial is that it touches both Illustrator and Photoshop, showing how you can use them together to create something awesome. I started by creating the 3D text in Illustrator and then I brought it over to Photoshop for the remaining effects such as the clouds, flaming first letter, blur, etc. The most challenging part was all the fire and sparks coming from the ‘d’. It was hard to make it look real and not like a cartoon. I played around with it a bunch and overall am happy with how it turned out even though it doesn’t match the tutorials effect exactly. This ended up being a really fun tutorial.

Here is the finished product:

Download Scot’s AI source file: TwistedAsteroid.psd

View the tutorial here: http://psd.tutsplus.com/tutorials/text-effects-tutorials/create-a-spectacular-flaming-meteor-effect-on-text/

Thumbnail: http://www.scotspellman.com/wp-content/uploads/2011/11/TwistedAsteroidCropped.jpg

First, I wanted to find a nice mountain scape to trace for the silhouette. I tried to find one from my personal photography stash, but no luck. After looking a bunch of mountain scapes, I finally found one that I liked and looked like he would fit the bill quite nicely (which he did). Google images ftw! Here is the photo I decided to use as the base for my silhouette:

After bringing the image into Photoshop, onto tracing the mountain horizon using the pen tool. I can’t emphasize enough how power this pen tool is, still blows me away. It’s pretty tricky at first, but after my experience creating the Plantilicious logo, the pen tool starting to become more natural to use. Took a while to trace it out, then I grabbed the stars asset from the tutorial and put all the stars in the background.

After my base mountain and stars were there, no for the fun stuff, the light show. To accomplish this, I started with a think paint brush and then gave it a Gaussian Blur with some motion blur in there. I used similar steps to create all of the different light layers. The tutorial also showed how to make custom paint brushes, that are used to make the vertical lines in the gradients, giving them a really cool looking effect.

Then there were clouds. Another part I really enjoyed in this tutorial is how to make the clouds in Photoshop. I can’t believe how easy it was, Photoshop already has a clouds render-er built into it. Time to hit my staples “That was easy.” button, lol. After the clouds, it was just organizing the layers and wha-la, I have my Aurora Borealis light show.

Overall, this was a really fun tutorial. It exposed me to more of the pen tool along with effects like Gaussian and Motion blurs and got to play with some built in rendering methods like the clouds. I would recommend this tutorial to anyone that wants to expand their Photoshop skills.

Here is the finished product:

Download Scot’s AI source file: AuroraBorealis.psd

View the tutorial here: http://abduzeedo.com/create-aurora-borealis-wallpaper-photoshop

The hardest part of this tut for me was the Pen tool. Talk about one weird, interesting and extremely powerful tool. I spent a good 2 hours on Pen tool tutorials before I could make the leaf shape look good. I definitely recommend learning how to use the pen tool to anyone interested in design.

One of my favorite parts of this tutorial was making the lady bug. It came out really good IMO. I had some initial trouble getting the intersect tool to do what I want, but I eventually figured out that you can only intersect 2 items at a time (I was trying to intersect 5 of them at one time, oops).

Overall, this is the most fun I’ve had doing design tutorials to date. The tutorial touched on a bunch of tools which is helping me learn illustrator and the finished product is something that I find very visually appealing and professional. We’re even planning on using it in a production when we launch Plantilicious.com .

Here is the finished product:

Download Scot’s AI source file: PlantiliciousLogo.ai

View the tutorial here: http://vector.tutsplus.com/tutorials/text-effects/creating-an-environmentally-friendly-green-type-treatment/

This tutorial is a bit more in depth than the first one, with many more steps. Don’t let that discourage you though, this tutorial is definitely worth checking out for design n00bs like myself. I found it really helpful starting out with a layout grid that the tutorial provides. I also really like how it goes over creating that social widget. Making the Facebook, LinkedIn, Flicker and Twitter logos was a bunch of fun, I find it crazy how you can skew rectangles to give the 3d effect on those icons. This tutorial was also nice because it went over image reflections as well, another key effect in web 2.0.

Overall, a great tutorial which I learned many techniques from.

Here is the finished product:

Download Scot’s PSD source file: web2_0.psd

View the tutorial here: http://psd.tutsplus.com/tutorials/interface-tutorials/create-a-professional-web-2-0-layout/

I realize that I could have spent more time cutting out the flowers, but I really wasn’t doing this tutorial to become proficient in cutting up images. Looking at the final product, I think that’s the only thing I could have done a little better. I learned how to do the effect I was going for regardless of the little choppiness in the flower cutout. Overall, this was a great starter tutorial for me because I don’t know how to use Photoshop very well. Doing this tutorial forced me to familiarize myself with some Photoshop tools and taught me some basic web 2.0 design techniques.

Here is the finished product:

Download Scot’s PSD source file: banner.psd

View the tutorial here: http://www.photoshopstar.com/web-graphics/stylish-banner-for-your-website/

So where to go from here? I fired up my interest and feel very inspired, but what now? The more dominant, left side of my brain, tells me I need a plan of attack, it is as simple as setting a goal and then figuring out the steps you need to take to get there. Here is my overview.

Goal: Become a talented designer and artist.
What needs to happen for me to reach my goal?

• 1) Need to learn how to use the Adobe suite, Photoshop and Illustrator specifically.
• 2) Need to freehand draw more to increase my creativity.
• 3) Like anything you want to do in life, practice makes perfect.

And wha-la, easy right? One of my favorite quotes came from Fabio @ Abduzeedo, it is plain, simple and straight to the point, “think less, do more”. I know that when I’m trying to design, I definitely over think when I could have spent that time actually doing the design and then critiquing and tweaking it to look like I want it to. I’m slowly trying to get away from over thinking, but this has been a tough one for me as I am more of a logical thinker rather than a creative person. That is what I want to change. While I don’t intend on becoming less of a logical thinker at all, I do intend on becoming more of a creative thinker.

What does this mean for you, the reader? It means that there is a new category on ScotSpellman.com “Diving Into Design” where I will post inspirations, tutorials and some of my personal work as I take my journey becoming a better designer. Please feel encouraged to critique, comment or give suggestions on what you think would make any of my designs better. I feed off of constructive criticism. I hope you enjoy!

My mom’s vegetable soup was originally inspired by a weight watchers recipe. If you’ve done weight watchers before, this soup is a whopping 0 points! On top of it being really healthy and low in calories, I absolutely love it. It has great flavors and it is the best way I can think of to get veggies in me. My mom would always make me this soup when I was in college, sending me home with a full pot of it on many occasions. Now that I’ve started my own cooking adventure, I had to call her up and get the recipe. I’ve made it a couple times now, not only do I realize how long it takes to create such a meal, but I found my own additions to the recipe to make it my own. I’ve noted the areas where my mom’s recipe and my version differ, but both are great, I assure you. The main differences are: Sweet Onion opposed to a regular Onion, 4 Carrots instead of 3 Carrots, 3 Green Zucchini instead of 4 Green Zucchini and the full jar of salsa where as my mom’s version calls for 1/4 jar of salsa. The salsa is what give’s it that kick for me. By putting a whole jar in, it turns the broth into more of a tomato soup and gives it lots of spices so that you don’t need to add any seasonings when you eat it. That’s about it for differences between my mom’s version and my own. It is truly a great soup, Enjoy!
Serves 8-10 servings

Ingredients

• 1 Sweet Onion
• 4 Stocks of Celery
• 4 Carrots (or 3 if you like Zucchini better, my Mom’s recipe calls for 3, but I prefer 4)
• 3 Green Zucchini (or 4 if you like Carrots better, my Mom’s recipe calls for 4, but I prefer 3)
• 1 Bundle of Green Onions
• 1/2 lb (8 oz) Green Beans
• 1/2 head of Green Cabbage
• 

  1 Can of Diced Tomatoes (Basil and Garlic flavor)

• 
  1 Jar of  Salsa* (Southwestern style with beans and corn)

• *Medium Heat if you like it spicy, Mild if you don’t
• 
  2 Boxes of Vegetable Stock

• 1 Tbsp Season Salt
• 1 Tbsp Extra Virgin Olive Oil

Instructions

Step 1: Prepare the Veggies

Always make sure to wash all of your vegetables before chopping those puppies up.

Step 2: Saute the Sweet Onion, Light Green Onion, Celery and Carrots

Grab your favorite saute pan, set your burner on high and drop in about 1 Tbsp of Extra Virgin Olive Oil. Then roll it around in a circular motion to get an even coat on the bottom of the pan and let it heat up for 1 or 2 minutes. After it’s hot, drop in the Sweet Onion, Light Green Onion, Celery and Carrots and then Saute them for around 15-20 minutes. I can usually tell when it’s done by looking at the sweet onions, they should have a clear/transparent look to them and be much more limp than before.

Step 3: Put everything in the pot

Grab a large soup pot, set it on the stove (burner is off at this point) and put in both boxes of Vegetable stock, followed by the Saute’d vegetables. Then drop in the rest of the veggies: Green Zucchini, Green Beans, Cabbage and Dark Green Onions followed by the Jar of Salsa (Southwestern style with beans and corn) and Diced Tomatoes (basil and garlic work the best). I like to add about 1 Tbsp of Season Salt, but before you add it, taste your broth, the salsa may have seasoned it enough where you don’t need a full tbsp season salt if any at all. Add to taste.

Step 4: Cook it!

At this point, turn the burner on high and bring everything to a boil. After the soup is at a boil, turn the burner down to a low setting then simmer with the top on for 30-45min, stirring occasionally. You can even go longer depending on how crunchy you like your veggies. The longer you let it cook, the more tender your veggies will be. I actually like simmering mine for a full hour, but I like my veggies really soft in my soups, so I wrote down 30-45min for this reason. It’s really personal preference at this point.

Step 5: All done, eat up!

And wha-la, after hours of preparing and cooking veggies, your soup is done! Thanks Mom! Enjoy!

I also bought a nice big, 18”x16”, end grain chopping block. $59.99 at Bed Bath and Beyond. I really recommend end grain wood for a chopping block. The normal grain one I had in the past end up getting chopped up and I  ended up with some sawdust in my onions. Granted this board was old, but yea, wouldn’t happen with a nicely kept end grain board. Maintenance on the end grain board isn’t bad. Simply cover it with mineral oil once a day for a week, then once a week for a month, then once a month for the rest of it’s life. Also try to stay away from directly submerging the board in water. The wood will swell up if too much moisture gets in, ultimately causing the board to arc a little bit when each little piece swells up. The board is absolutely fantastic to cut on and essential for my adventure.

Now that I have the tools, where to find the recipes? I watched a really neat show over the last couple months, ‘Jamie Oliver’s Food Revolution’. Jamie Oliver, a British celebrity chef, come’s to America to help reform the school system’s lunch programs to give kids a healthy, fresh start in life. I find Jamie Oliver pretty funny and respectable in the cooking industry, so I ended buying his iPhone app ‘20 Minute Meals‘ so that he could teach me some basics of cooking and some new recipes. I also got a couple recipes from my Mom to try out as well. Time to start cooking!

Prerequisites

Basic knowledge of HTML, JavaScript and CSS

What is jQuery?

From jQuery.com:

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

As a professional Web Developer, jQuery has done exactly what it promises, it is very fast, has a great animation package, supports AJAX right out of the box, cross browser compatible and above all, open source! jQuery also has a fantastic community following it, you can search google for any jQuery problem / question you have and find a resolution very quickly. jQuery also has a no conflict option that will let you use it in parallel with other similar javascript libraries such as Prototype or Dojo with no conflicts. jQuery is truly a great library and I am confident using it in professional, production environments.

jQuery Selectors Overview

jQuery selector is really what makes jQuery so nice to work with. The selectors use the same syntax that CSS uses to target either classes or ids of HTML elements, a dot “.” to target a specific class used by an HTML element and a pound “#” to target the id of an HTML element.

<a id="aLinkId" href="javascript:void(0);">Link targeted by an Id</a> <a class="aLinkClass" href="javascript:void(0);">Link targeted by a Class</a>
<script type="text/javascript">
     //click event targeting the id on the link 'aLinkId'
     $("#aLinkId").click(function(){alert("You clicked the link targeted with an Id selector!")});
     /*-----*/
     //click event targeting the class on the link 'aLinkClass'
     $(".aLinkClass").click(function(){alert("You clicked the link targeted with the class selector!")});
</script>

Example:
Link targeted by an Id     Link targeted by a Class

Understanding how jQuery selectors work is key.

Creating the Popup Image

Coming soon…

Making It Work

Coming soon…

Some Examples

Coming soon…