AndySowards.com :: Web Design, Development, Programming

30+ Responsive Web Design Tutorials

Andy Sowards — Thu, 24 May 2012 16:06:48 +0000

Since you guys really liked the Responsive Web Design Inspiration we showed you last week, we decided to put together some really good tutorials for making your site look great on mobile devices like those. Responsive is where it is at! Over the past year or so (and recently) we have found some really great tutorials we thought we would share with you that explain the basics, and the more advanced topics like fluid grids and css3 media queries, layouts, javascript tools, etc.

Responsive Design is not going anywhere anytime soon, so prepare yourself, and learn it! The web is heading more and more towards mobile devices as the mobile phone & app trend rise. Responsive web design basically makes your website look great for desktop users at home, and mobile users on the go – with some minor guidelines and some css3 . So I hope you enjoy these tutorials and learn something! There is even some more inspiration in these things, so dive in! Enjoy!

Responsive Web Design

This is easily the best place to start on your journey of responsive web learning – Good foundational knowledge! This article was written by Ethan Marcotte who (according to the wikipedia) coined the term Responsive Web Design (RWD) in this article way back in 2010 – and even wrote a book on the subject of responsive web design

Beginner’s Guide to Responsive Web Design

This is another really nice place to start, if you are new to the mobile arena and have no idea what ‘responsive web design’ is – then this does a great job of explaining it and telling you about stuff like fluid grids and media queries.

Responsive Design in 3 Steps

Great little tutorial that shows you 3 simple steps on how to setup your web design workflow to be responsive and mobile friendly!

5 Useful CSS Tricks for Responsive Design

A nice quick little list of some tricks you can use in your designs to make them responsive!

5 Really Useful Responsive Web Design Patterns

This is a really nice post for once you get the grasp of everything and you are building your responsive design. This post goes into an overview of common & proven patterns used in the wild – it will help you see what works and give you some ideas on how to structure your sites layout with one of these patterns or perhaps make your own!

Responsive Web Design: What It Is and How To Use It

This is another nice overview of Responsive Web Design – has very in depth examples that explain concepts and guidelines on how to pull these things off – and at the end it has some really nice responsive web examples showcased.

Create a Responsive Web Design with Media Queries

Great tutorial that really ties everything together and shows you how to build a responsive web design from scratch, beginning to end! Will really put all the pieces you’ve learned together

Responsive Web Design: Layouts and Media Queries

Good tutorial that gives you a few different types of Layouts that are typically used in responsive web design, gives you the code examples and explains how they are working and what they will look like!

Great post with an overview of another developers workflow for how he is implementing responsive web design. As I always say, it is very good to see how other people work, and adapt their methods to your own. Once you learn the basics and check out a few other peoples workflows, you have everything you need!

W3C Media Queries

W3C is the standard source – so its always nice to check that out when really learning the basics on anything

Responsive Web Design Techniques, Tools and Design Strategies

This is a great article with tons of tutorials, inspirations and resources relevant to Responsive Web Design!

50 fantastic tools for responsive web design

Ultimate Guide to Responsive Web Design: 55 Stunning Tools, Tutorials, and Examples

Responsive Illustration

I added this just because I thought it was really cool – resize your browser and it shows you basically what ‘responsive design’ is all about cool animations & illustration

What was your favorite tutorial? Got a new one for us? Got a cool responsive website to show off? or some cool mobile trick? Leave it in the comments below!

You like this? Don’t forget to follow us on twitter @andysowards and like us on facebook @andysowardsfan! We are also on that Google Plus & Pinterest thing.

If you like this, You’ll love These.

Increase Event Attendance by Improving Your Call To Action

Endre Rex-Kiss — Thu, 24 May 2012 07:04:10 +0000

Advertise here with BSA

Whether you’re putting together simple vinyl banners promoting your event, or you’re setting up a WordPress blog or Facebook event listing, one of the keys to creating successful promotional material is to have a strong, prominent call to action. A call to action is simply a set of words or a phrase designed to invoke the response you desire from your visitor, whether that response is to register for your event, purchase a product, or sign up for a newsletter.

While incorporating a call to action in your ad may seem like common sense, novice marketers often focus their energies on finding the right graphics or creating a catchy headline, forgetting to actually ask the customer to take action. While it’s certainly crucial to have an attention grabbing headline and some great copy selling the benefits of your event, it won’t do much good if your potential customer doesn’t know how to sign up. This might be ok if you’re a massive brand simply looking to get blanket exposure, but for most event organizers, failing to include a clear call to action in your advertising means that your ad might as well be invisible.

If you’ve been neglecting your call to action, here are 4 simple steps you can take to increase attendance to your event simply by improving your call to action.

Include A Prominent Call To Action

38 “Call To Action” Button Templates That Really Stand Out

The simplest improvement an event organizer can make to their promotional materials – whether it’s a website, vinyl banner, or a simple leaflet – is to increase the prominence of the call to action. Taking your call to action from a little line of text buried in the corner of your banner to a big, colorful button or bolded statement right in the middle of your banner is one of the easiest ways to instantly increase your event attendance.

Keep It Simple

35 Inspiring Design and Development Related Event Websites

In trying to increase conversions and improve event attendance, it’s possible to go overboard with our marketing efforts. If you demand that your customer subscribe to your email list, join your Facebook group, follow you on Twitter, watch your promotional Youtube video, and register for your conference – all at the same time – you actually make it likely that your overwhelmed customer won’t do any of it.

If you’re putting up a simple banner or other form of display advertising, stick to a single, simple call to action. The simplest calls to action are often the most effective.

Offer Incentives & Increase Urgency

Do’s and don’ts of call to actions

While a potential attendee might be tempted by your clear, prominently displayed call to action, indecision or plain laziness can sometimes stop an interested party from actually following through with registration. You can help entice potential attendees by offering an incentive for completing the call to action. You can make it even more compelling by fueling a sense of urgency. “Register By June 15 To Get 20% Off” or “Only 10 Spots Remaining, Register Now” is a lot stronger than “Register Now”. While keeping your call to action simple is important, don’t be afraid to get a little creative and when it comes to stirring up motivation and urgency.

Make The Action Easy To Perform

Permission Marketing : Turning Strangers Into Friends And Friends Into Customers

The easier you make it for viewers to do what you want them to do, the greater the likelihood that they’ll actually do it. If you want them to “like” your Facebook group, the “like” button should be right next to your call to action. If you want them to subscribe to your email newsletter, there should be a box where they can type in their email address. And if you want attendees for your conference or other event, you’ll want to make sure they can easily register and access event information.

While this may be easier to do for online advertisers – where visitors are always just 1 mouse click away from any action – you can still benefit from this principle if you’re putting up vinyl banners or handing out leaflets. Adding a prominently displayed website address to your promotional material – or even a QR code that can be easily scanned by a smartphone – will make it that much easier for your potential attendee to secure their place at your event.

Despite the value a conference or other event can offer to an attendee, spreading awareness and interest for an event isn’t always easy. Whether you’re putting up banners, handing out leaflets, buying web ads, setting up a Facebook group, or even if you’re buying up radio or TV ads, increase the effectiveness of your marketing by including a strong call to action.

If you like this, You’ll love These.

30+ Cool Geek Gift Ideas & Gadgets For Fathers Day

Andy Sowards — Wed, 23 May 2012 07:58:40 +0000

Advertise here with BSA

So are you ready for Sunday, June 17, 2012? Do you know what day that is? It is Father’s Day!

I know you are prepared, because you are a good kid, wife, parent, etc. Sure. Sure you are. But we don’t judge, we know how hard it is to pick out gifts for people these days, especially geeks!! So since I am a geek, and a Father, I figured I would put this list together of a few things that I WOULD LOVE to get for father’s day (taking notes? paying attention? feel free to send me some of these haha)

When the holidays get closer I am sure that there will be a ton more awesome gadgets to drool over, like the new macbook pro & whatever else comes out from now until Christmas – but for right now, here is a quick list of some of the hottest & freshest gadgets & items out there that any geeky dad would love to get for fathers day! Enjoy!

Geek Toys For Dads Desk

As a dad with a desk, I love putting things on my desk. I would totally put these figures on my desk! I am pretty sure all the other geek dads out there love putting silly toys on their desk too. Did I say silly? I meant.. big.. strong.. handsome… manly toys. *grunts and pelvic thrusts*

Avengers Mini Papercraft

Paper Craft is Fun, Geeky, Cool, and often times FREE! (that is the best part right?) Let dad know you care by printing off some papercraft like these or trying to make some yourself, I would rock these on my desk as well! Avengers Assemble! (some assembly required lulz)

USB Mustache

Because. uh. MUSTACHE. Need I say more?

Pivot Power Adjustable Surge Protector

This is easily the coolest surge protector I have ever seen. I want one. I don’t even need one. but I want one. So functional!!!!

Xbox 360 Star Wars Edition + Kinect

A geek has got to game. and It is pretty hard to beat an Xbox 360 for that. Especially this epic star wars edition one – its so beautiful!!! R2-D2 & C3PO would be proud.

Lunatik + Tik Tok – Ipod Nano Watches

Anyone who knows me knows that I do not wear watches. I would never even buy a watch. But I WOULD buy this one that I found recently, TikTok + LunaTik. Basically they transform your iPod Nano into the world’s coolest muti-touch watch. So sexy.

Kinekt Design Gear Ring

Featured this here before, so you may recognize it – but its so damn cool, im featuring it again. bask in its awesomeness! Any guy who has this as a ‘wedding ring’ would never lose it again hahaha.

Pi Wall Clock – Geek, Nerd, Math Chic

Again, these days clocks are pretty novelty – but I really love this one. It is so aesthetically pleasing that I would put this up in my office or anywhere lol.

Apple MacBook Air

If you really love your dad you would get him one of these bad boys. Or a Macbook Pro. Epic computers! So thin!

C’mon Macbook! Eat a Sandwich!

Game of Thrones: The Complete First Season (2012)

Every true geek, enjoys the game of thrones. Winter is Coming.

Fred & Friends Tank Up

Geeks have a lot of work to do, so we need to re-fuel and stay awake – get dad one of these awesome cups to store his caffeinated beverage in! Cool Design!

Apple iPad

One of the hottest gifts on the market! Everyone loves Apple – and everyone wants an iPad (if they don’t already have one!). Get your dad into the mobile future!

Kindle Fire

Not as pricey as an iPad – but still cool! I would definitely love to play with one of these little gadgets for Fathers Day.

Fascinations Levitron Revolution Platform With EZ Float Technology

This is just, awesome. I want it on my desk. Who doesn’t want to be able to levitate junk? I want levitating junk.

Olly Moss Alternative Movie Posters & Prints

These go good in any space, for any geek. Love these alternative movie posters, they are so cool and well designed. the prints are actually fairly hard to get though, here are a few I found. So Classy!

Canon EOS Rebel T3 Digital SLR

Probably one of the cheapest AND best cameras on the market at the moment for the price – really nice one. Any geeky guy would love to have one of these things whether it be for pictures of the kids or pictures of their wicked geek gadgets & stuff they make!

Geeky & Funny T-Shirts

I have yet to meet a geek that does NOT like hilarious geeky t-shirts. Here are just a few that would put a smile on some lucky dads faces .

Well, What are you getting for your dad on fathers day? Shirts? Books On Web Design? Gadgets? Let us know in the comments below – If you have any other ideas please share them below so everyone will have a happy dad this year! Thanks for Reading!

You like this? Don’t forget to follow us on twitter @andysowards and like us on facebook @andysowardsfan! We are also on that Google Plus & Pinterest thing.

If you like this, You’ll love These.

10 Tools to Drastically Increase Your Productivity

Vincent Clarke — Tue, 22 May 2012 15:47:05 +0000

Advertise here with BSA

Tools For Productivity

Of all the challenges I’ve heard mentioned by business owners, employees, and freelancers, “not having enough time to get the most important tasks done” is the most common. Poor time management, outside distractions, multi-tasking, disorganization, and forgetfulness all stand in the way of productivity. If you or your workers could use some helpful tools getting back on track and staying ahead of the game, take advantage of these great finds designed to save you time and keep you organized. You’ll complete your to-do list in less time, more efficiently, and more effectively. They’re all very straightforward and easy to use, and most important of all – they’re all free!

Dropbox

Dropbox is an excellent way to keep your document files organized quickly and easily. This service lets you save items to your “dropbox” while simultaneously saving them to your computer, mobile phone and your Dropbox web account for consistency. With Dropbox, you don’t have to deal with the pain of multiple copies of the same data files, or waste precious time emailing yourself updated versions of the files. You can also invite your project team to look over specific documents and folders for simple feedback collection.

MakeSomeTime

Managing invoices poses a big challenge for entrepreneurs. You can sign up with MakeSomeTime to keep track of invoices, clients, projects, and bill times, all within your internet browser. Their free plan lets you add up to five clients and deliver one invoice per month.

Dlvr.it

A neat little tool that automatically tweets your new blog posts. In addition to auto-publishing your new posts to twitter, this app will also post on any other social network you have connected to it. Dlvr.it also lets you integrate your bit.ly account. But it also has its own default URL shortener anyway, which saves you the trouble.

Fonolo

Tired of navigating through countless phone menus? This web service tool grants you access the phone menus for customer service numbers and allows you choose any menu directory path and then sends you right to it, bypassing those annoying automated response systems.

Wetransfer

For those irritating and frustrating times when your work is just too big to send through an email, try using Wetransfer. This service tool makes it incredible easy to send your files, docs, or projects to anyone with an email address. All you have to do is just upload and hit send.

Evernote

This popular note-taking tool is great for marketing vital online resources. You can keep yourself organized by categorizing items into different notebooks and subsections that you can customize in any way you choose. The best part is that this app synchronizes with your mobile smartphone and computer for fast access from anywhere.

Pidgin

If you’re like me and you use IM chat networks for the office, home, school or anything else, you can save time by using Pidgin. Supporting the largest assortment of chat networks including the popular AIM, MSN, Google Chat, and Yahoo Messenger platforms, this tool lets you log into multiple chat accounts simultaneously. Get ready to chat up a storm.

Remember the Milk

(I always forget the milk). This task management website will help you stay focused on the tasks at hand so that you can get more done in less time. You can update and add tasks from any location, receive important reminders and alerts, and organize your tasks. Remember the Milk can be used on the iPhone or Android smartphones, as well as the iPad.

Rapportive

This productivity plugin does wonders for your email. It gives you a detailed background profile on whoever sends you an email. If you are like me and you get an email from somebody you forgot or don’t know at all, one of the first things you’ll do is Google them to get the facts. Rapportive takes care of that for you. It’ll search and show you all related social media account information on Facebook, Twitter, LinkedIn, and more – all from your inbox.

Yammer

This “Twitter for Business” tool lets you communicate in a closed environment and share files. It won’t replace traditional email for your business but it is great for downsizing large quantities of group emails and sharing links and files in an efficient way.

Collabtive

This open source project management software runs on almost any computer and does it well. Collabtive lets you to manage projects by creating different tasks and assigning them to different people. The progress of these tasks can then be tracked using their easy-to-use GUI. The project administrator can then add multiple users to the program and each person can access the interface through their browser. There’s also no limit on the number of users that can work at the same time on the Collabtive program.

So what about you? Do you have any time-saving, easy and free tools that you use to help keep you on task?

If you like this, You’ll love These.

How To Create a Cute and Cuddly Vector Dinosaur Character Tutorial in Illustrator

Andy Sowards — Tue, 22 May 2012 14:37:11 +0000

Advertise here with BSA

Today I have an Illustrator tutorial for you! With a cuddly dinosaur! Roarrrr!

I hope that this tutorial will help your Adobe Illustrator skills, and help you relax, have some fun, and subscribe to keep the good times rolling in the future .

Please feel free to leave comments, ask questions, and just really engage and get involved with these tutorials. We want to help you succeed, and we also want to sharpen our own skills and take your comments into consideration for future tutorials.

Please note that not everyone’s dino will look exactly the same, its about learning the techniques and methods – So just have fun and create your own!

Having said all that, lets jump right in shall we?

Final Image

Now that is what I call a Man’s Dino. See the testosterone radiating from it? No? Really? Okay.

Ready to make your own? Keep on Readin’!

What you need

For this tutorial, you just need Adobe Illustrator (I am using CS4), and your skillz. (a mac would help, LOL jk)

Step 1 – Getting Started

Ok, Fire up Illustrator and Start a new fresh document (File > “New” or Command+N) and hit OK. The default size (1200px by 900px) is what I typically use unless I know I need something huge, or am working in Print, but I am almost always doing web stuff, so this is fine for now. Just imagine you are a painter, and this is your canvas, and that is the point of Illustrator .

Usually Illustrations almost always start with a sketch of what you want to draw out in Illustrator, then you scan the sketch you did, and import it into Illustrator to trace. Well that isn’t how we are going to do it today, mainly because I suck at drawing (but drawing on the computer is easy for me? Strange I know), so I will spare you from that . I like to play around with what works in Illustrator, and sometimes I take it in a completely different direction than what I thought I was doing when I started, it is all part of the creative process.

Lets start drawing the head of our little Dino!

First, just grab the ellipse tool (Press the “L” key to select) and draw a circle like in the above image. By default this will have a white fill and black stroke, which is fine for now.

Again, if it doesn’t look exactly like what you have, no worries, just make it as close as you want .

Now that we have the Circle, we need to add some points to it that we can manipulate to make the dino’s head shape more natural.

To do this just grab the Direct Selection Tool (Press the “A” Key to select) and click on the circle. Then grab the Add Anchor Point Tool (by pressing the “+” key) and add some points like I did in the image above.

Step 2 – Manipulating Shapes & Building out the Character

Ok, So now we have the Shape for the head, the Points added (I added 8 new points, you may have added more/less) so now we are ready to manipulate those shapes and make it look more like a Dino head!

To do this, we again grab the Direct Selection Tool (Press the “A” Key to select) and click on the head shape again, then we click on the individual anchor points and you will see little “Handles”. What we are going to do, is click on these handles and drag them to manipulate the shape of the circle. Drag the handles around until you get a shape similar to the one above. It is tricky to get it right the first time if you have never done it before, but you get used to the handles, they are your friend .

Ok great, so now we are going to again use the ellipse tool (Press the “L” key to select) and draw another circle on top of the one we had done before, similar to the image above. This is going to be his Nose/Mouth.

We are going to add some more points like we did before. Grab the Direct Selection Tool (Press the “A” Key to select) and click on the new circle. Then grab the Add Anchor Point Tool (by pressing the “+” key) and add some points and drag out the handles a little to shape them similar to how I did above.

Now we are going to use the Direct Selection Tool (Press the “A” Key to select) to select the top center anchor point in our newest circle, and press the ‘delete’ key to get rid of it. Then use the Direct Selection tool again to click on the top anchor points that are left, and drag them both up a little bit, and round out the edges a little more like above.

Now you should have the basic knowledge of Illustrator to build basic shapes and manipulate them. So I am going to build out the rest of the Dino using those techniques since I will be using the same methods to achieve the shapes, then in the next step I will show you how to connect these pieces!

The above image is where we are going to start in step 3. Starting to look like something eh??

Lets keep going!

Step 3 – Minor Details

Ok, so the basic outline is there, lets group some things together and add some character and color!

First lets group up the body, arms, and legs/feet. Simply use the Selection Tool (Press the “V” key to select) to click, drag, and highlight all the appendages. Then Right Click on the selection, and click ‘Group’. If you are confused refer to the image above.

Now we can add some Color!

With the grouped selection highlighted, lets click on the “Fill” color (which should be white at this point) and lets change it to Orange (#FF6D00) because I like Orange Dinosaurs. Your Dino can be a different color if you want. Refer to the image above to see what I did there.

Now lets take care of cleaning up the blocky parts where we deleted anchor points. Open the Artistic-Ink brush library from the Brushes Palette, make sure you have selected the grouped layer we just colored when you choose a nice tapered effect to remove the square edges. I used the ‘Tapered Stroke’ in the Artistic_INK pack as seen above.

Now do the same thing we just did for the body, for the head, as seen above. However, make sure you SHIFT Click the eyes, so they aren’t grouped. It looks creepy enough with White eyes, we don’t need orange eyes!

You should now have something like the above image, maybe not the same color, depending on your mood

Now lets move on to the final details!

Step 4 – Even Minor(er?) Details!

Ok, It looks like a Dino now!

With Creepy Eyes.

Lets fix that first so it will stop stealing your soul.

First, you want to create the Iris using the ellipse tool (Press the “L” key to select). Hold down the SHIFT key while making the circle, and it will make a perfect circle (Good band lol). Once you have the circle in place, then use the Gradient panel (Window > “Gradient” if you don’t already have easy access to it) to create a blue going up to a darker blue and set it to ‘Radial’. You can pick whatever color you would like however.

Then just Copy (CMD+C) and paste (CMD+F) the Pupil circle, scale down while holding Shift, then swap the gradient out for a couple of darker greys to form a pupil.

Then select the Pupil, and the Iris circles, copy (CMD+C) and paste (CMD+F) them, move them over to the other eye, and then go to (Object > Transform > “Reflect”) select “Vertical” and 90 Degrees. Then you will get a mirror image of the pupil/iris you just created! It should look like the above image.

Then we just want to click on the white part of each eye with the Selection Tool (V), and just remove the “Stroke” like we did in the above image from the stroke menu.

While we are at it, lets select the upper mouth part and lower the stroke just a tad like in the above image.

Now that we have the eyes in there, Lets add a bridge to his nose, so his face looks a little less flat . To do this, like in the above image, simply select the Pen Tool (P) and click once, hold it down, and kind of move the mouse in the curve that you want, sort of like drawing an imaginary line. then once you release, the point is there at the beginning, then click for the 2nd point where you want the line to end. Illustrator will then draw out the curve for you (almost, typically needs some tweaking to get it exactly how you want it, but this is a good way to speed things up).

Then, we add a nostril, using the same technique as above! Pen Tool (P) Click, hold and drag. Draw out the imaginary curve. Release mouse button, then click again for the line end point.

Then same technique again for the top of the nostril! Repeat that for the other side.

Now we need some teeth! To start off with the teeth, we are going to create a rounded rectangle using the Rounded Rectangle Tool. Just make a small, rounded rectangle with a white fill. as seen above. THEN we are going to create a rectangle over top of the bottom half of the ‘tooth’ for clipping purposes only.

OK, now select both the ‘tooth’ and the rectangle at the same time, but SHIFT Clicking on them one at a time. Go to File > Object > Clipping Mask (Or Command+7) and VOILA!

You get a nice little half rounded corner thing that looks like a tooth!

Now, take your newly created tooth, duplicate it 4 times, and start sizing them down (squishing them almost) to a nice little size and align them along the bottom part of the upper mouth. Like in the above image.

Now lets add ferocious claws!!! I took one of the teeth CMD+C & CMD+V’ed it and just resized it for the claw above, Illustrator rocks the vector like that, so its all good .

But I want to put a light gradient on my claws so they shine just a little. To do this, just right click and select ‘Isolate Selected Path’ and you get a nifty little lightbox effect on the shape.

Then all you have to do is select the gradient you want to use, im going with an extra light grey to white.

Once satisfied, just right click and ‘Exit Isolation Mode’

Now just CMD+C then CMD+V for the other two claws on the hand, I slightly resize them and spread them a tad. Once you light the way hand #1 feels, lets just SHIFT Click the three claws, and CMD+C and CMD+V them, then just go to (Object > Transform > “Reflect”) select “Vertical” and 90 Degrees. Then you will get a mirror image that you can move over to the other hand!

For the foot claws (what? lol) I copied over the claws from the hands, spun them around, made them bigger and spaced them out some more.

Then I went ahead and added a stroke to them all, by SHIFT Clicking each claw, then applying a 0.5 stroke to them.

Then for the final touch! I selected all of the eye parts, and added a 1pt stroke to them. DONE.

Final Image

Well there you have it. You should have something similar to this image for your dino!

Everyones will be different slightly or by a lot, depending on what you want to do

I hope that everyone enjoyed this tutorial and learned a lot of things about Drawing in Illustrator!

If you guys attempt to create your own dino I would love to see it! So leave your attempts in the comments!

If you have any questions or comments feel free to leave them as well!

You like this? Don’t forget to follow us on twitter @andysowards and like us on facebook @andysowardsfan! We are also on that Google Plus & Pinterest thing.

AndySowards.com :: Web Design, Development, Programming

30+ Responsive Web Design Tutorials

More Responsive Web Tutorials & Resources

If you like this, You’ll love These.

Increase Event Attendance by Improving Your Call To Action

Include A Prominent Call To Action

Keep It Simple

Offer Incentives & Increase Urgency

Make The Action Easy To Perform

If you like this, You’ll love These.

30+ Cool Geek Gift Ideas & Gadgets For Fathers Day

If you like this, You’ll love These.

10 Tools to Drastically Increase Your Productivity

Tools For Productivity

If you like this, You’ll love These.

How To Create a Cute and Cuddly Vector Dinosaur Character Tutorial in Illustrator

Final Image

What you need

Step 1 – Getting Started

Step 2 – Manipulating Shapes & Building out the Character

Step 3 – Minor Details

Step 4 – Even Minor(er?) Details!

Final Image

If you like this, You’ll love These.