image

New PLUS Tutorial – Create a Green Landscape Website in Adobe Illustrator

Jan 21st in News by Jonathan

We have another great VECTORTUTS PLUS tutorial exclusively available to members today. If you want to take your vector illustration skills into website design, then we have a a comprehensive tutorial for you. It details how to create an organic style vector website design. Every detail of creating this earthy design is covered!

PG

Author: Jonathan

I'm a print and web designer with experience in a range of software and technologies. If you like my tutorials or have constructive feedback please make sure to comment and follow me on Twitter.

This PLUS Tutorial is filled with Illustrative Website Advice

We have a new PLUS Tutorial written by Jonathan, and is titled "Create a Green Landscape Website in Adobe Illustrator." A little while ago I wrote a tutorial entitled Use Adobe Illustrator to Create a Clean Website Layout which was met with much fanfare with equally notable opposition. That tutorial was directed towards people just getting started in Illustrator. It eventually made it to the front page of Digg as well.

To set things off on the right foot, let me take a moment to point out the obvious… this website design can be created in Photoshop too! However, the purpose of this advanced tutorial is to explain how to use Adobe Illustrator (hence the name VECTORTUTUS) to design a website. Let me also distinguish design from front end coding. While I'll show you how to design the website in Illustrator, this could be taken further (with the use of standards based XTHML/CSS) to make the design function. This tutorial focuses on creating the graphics and layout for this high end vector style website design.

This PLUS tutorial takes you through the entire creative process for developing this vector layout. The final image is shown below. Members can Log in and Download! Otherwise, Join Now! A preview of the final image is below or you can view a larger version here.

final

This is a High Quality, Stylish, and Detailed Tutorial

Vector style website designs can set a site apart by giving it a unique look. In this tutorial, you'll create an organic style green website with Adobe Illustrator. This tutorial shows you how to create illustrative vector graphics and apply this to web design layouts. Sign up for PLUS today and get access to this awesome new vector illustration tutorial. Members can Log in and Download! Otherwise, Join Now! Below are some sample images from the tutorial.

Picture-34
Picture-44
Picture-66

VECTORTUTS Plus Membership

As you know, we run a premium membership system here called VECTORTUTS Plus that costs $9 a month (or $22 for 3 months!) which gives members access to the Vector Source files for tutorials as well as periodic extra tutorials, like this one! If you're a member you can log in and download the tutorial. If you're not a member, you can of course join today!

Also, don't forget to subscribe to the VECTORTUTS RSS Feed to stay up to date with the latest vector tutorials and articles. Be the first to hear about the next PLUS Vector Pack as it's released!


Enjoy this Post?

We'd love your vote!

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )
  1. PG

    OpenSourceHunter January 21st

    WOW this is awesome!! Its time for me to get an account here ;)

    greetz
    http://www.opensourcehunter.com/2009/01/15/two-ebooks-give-away-at-opensourcehunter/

    ( Reply )
  2. PG

    W. Dohmen January 21st

    Looks like one hell of a tutorial :D , wish I had a plus account now :( to bad you need paypal (I think)

    ( Reply )
  3. PG

    Timothy January 21st

    That’s a pretty sweet design. Looks very good. Thanks!

    ( Reply )
  4. PG

    Nixul January 21st

    I’m a little confused on how the plus membership works. I really would love to see this design, so I decided to subscribe. When I went into the library all the recent titles have to files associated with them. Could someone please tell me if i’m doing something wrong. Thanks!

    ( Reply )
  5. PG

    Matt January 21st

    Nice looking design again, Jonathon. :P
    Keep it up…you’ll be a rich man on here soon! Ha.

    Is this ready for download yet? Can’t find it in the “Plus” area?

    ( Reply )
  6. PG

    Sergio Ordoñez January 21st

    Very nice work :)

    ( Reply )
  7. agree with sergio Ordoñez, very nice work! great job!

    ( Reply )
  8. PG

    CArlos January 21st

    Hi, i can´t find the tutorial in the member plus area, im logged but i dont see the tutorial….., thxs

    ( Reply )
  9. PG

    Max January 21st

    That looks a very cool design !

    ( Reply )
  10. PG

    Mr. Tunes January 21st

    yeah i can confirm it’s not in my Plus section yet. will be patient. looks nice.

    ( Reply )
  11. PG

    Evan Byrne January 21st

    Beautiful, although I’m not sure how it would work with longer page content.

    ( Reply )
  12. PG

    Rich Sipe January 21st

    Looks great. Also couldn’t find the download in the PLUS area. Let me know if I am missing something

    ( Reply )
  13. PG

    Chris January 21st

    I don’t see it in the Plus section either… Looks great so far though.

    ( Reply )
  14. PG

    DKumar M. January 21st

    WOW, The final result is very amazing….. Thanks for sharing good stuff !!

    ( Reply )
  15. PG

    Justin January 21st

    Wow this was an awsome tut for those that dont have tut plus…this is a must. Lol im a poet great Jonathan!

    http//:www.buzzafied.com

    ( Reply )
  16. PG

    Indra January 22nd

    That is GORGEOUS!

    More of those things and I’ll be forced to make an account! O.O

    Godly <3

    ( Reply )
  17. PG

    Rachelle January 22nd

    I’ve been doing a lot of web work lately, and it’s always nice to see a site that is so organic and artistically inclined yet this extremely functional!

    Great Job!!

    ( Reply )
  18. PG

    Jonathan January 22nd

    Appreciate the positive feedback guys!

    ( Reply )
  19. PG

    Ariana January 22nd

    That is an Awesome Design! I’ve been looking for a tutorial like this! I am signing up right now! You reeled me in ;-)

    Thanks!

    ( Reply )
  20. PG

    devlim.com January 23rd

    I like this design~

    ( Reply )
  21. PG

    Paris Vega January 26th

    Really nice little illustration. I could have used this a few weeks ago when I started redesigning a solar company’s website. Good Stuff.

    ( Reply )
  22. PG

    Serhio January 28th

    GREAT IDEA

    ( Reply )
  23. PG

    5ivedance February 15th

    Smart design,thx all those nice works

    ( Reply )
  24. PG

    iMennow February 15th

    NICE VERY NICE ARTWORK

    ( Reply )
  25. PG

    shawntleslie February 21st

    The tut is available in the plus content “bonus tuts” area… It’s at the top of the Source Files list. You can download it there.

    ( Reply )
  26. PG

    Pol DeNais February 27th

    Very Cool, does this tutorial show how to get it setup for Dreamweaver then?

    ( Reply )
  1. Arrow
    Gravatar

    Your Name
    February 27th