Return To Illustrator

After giving some thought to my current project yesterday, I decided that the current design style is too bland.  I would either need to work on the weight and balance of the site, or reconsider the design approach altogether.  Here is the current version of the site:

Image

Rather than emphasize the Socialist / Communist theme of the site in terms of design, I decided that to try a completely different approach, and have emphasis on the Homemade Food / Farmers Market / Wholesome elements – and create a fun, light, Vector cartoon style site that seems to be incredibly popular these days.  My natural default seems to be to veer toward the minimalist, clean, crisp style – so this would be a good way for me to branch outside of my comfort zone and get some much needed practice creating graphics.

First, I sketched some plans for the new version of the site:

Image

For this I would need to create some bold Vector graphics in Illustrator. I haven’t used Illustrator for a number of weeks (since the previous project) so I thought I’d have a few practice sessions.  I was shocked to find that already I could no longer remember how to perform the most basic of functions. Therefore, I immersed myself in some online Youtube tutorials.  There were some great videos of people creating logos which I found really inspiring.

To create a ‘Hills, Sky and Clouds’ landscape I followed this tutorial  (http://www.youtube.com/watch?v=9raEbBMHq4E) step by step.  This was a really good way of getting used to a number of techniques. The Youtube tutorials are intentionally very fast, but by pausing the at each stage and following along in Illustrator I learned some of the fundamental processes.

Below is the result of my practice session for a basic background:

Image

My plan for the site is as follows:

  • Copy the Vector elements over to photoshop as separate png image per layer (Hills / Sky / Sun / Individual clouds
  • Each layer would have transparency on background
  • Stack these images up in the header (Position:absolute)
  • Apply CSS3 transform to clouds to have them slowly move across the screen
  • Apply CSS3 transform to the sun to have it slowly rise from behind the hills
  • Maybe a plane that travels across the screen with a banner displaying “Social Change Through Condiments” – this is likely to push my drawing skills though!
  • Illustrator hills have a gradient (top to bottom).  The main body of the content that sits under the header will have a ‘linear-gradient’ applied to the background-color – the gradient will start with same green of the bottom of the hills in the header and will darken toward the bottom of the site
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s