Web Layout

So a friend and I were talking about doing a web layout in Illustrator rather than Photoshop. My argument was that I worked faster in Illustrator. His argument was that I couldn’t create a decent layout for the web.

Now this design has yet to be sliced or coded but I feel a pretty good design. Simple and clean. What do you think?
Web Layout

Be sure to check out the rest of this blog and all my freebies!
Here is the link with Illustrator 10, CS, and CS2:

  1. nice~! I like it 8D

    • Jacques
    • June 9th, 2007

    This is very stylish.

    Don’t forget to name your web layouts. Who knows, you may create more of them.

    In the past I tried using Illustrator to create web site, however I was always finishing up using Photoshop. Maybe I’ll try again with Illustrator and see what comes up of it.

  2. Hi there!
    I like this layout with the hint of blur – cool!. I have a question though. How do you create those lines in 45 degree angle and then have them follow a shape like that? That would be very interesting to know!!! 🙂 When it comes to using Illustrator for the web I don’t see why it wouldn’t be possible – there is a save for web future just like in photoshop. Knowadays my work for the web is done almost entirely in flash so I might not be the right guy to say this. I find Illustrator to be an underrated program by many designers who is doing both web- and printwork. In my opinion it’s outstanding compared to photoshop for creating layouts. It’s easier to work with and you are more free in Illustrator – you feel less “boxed in”…

  3. @sakimichi – Thanks, I’m glad you liked it.

    @ Jacques – I have been thinking about creating more layouts in the future. Naming them is a great idea.

    @Niklas – There are several ways to make the angled lines. In this layout i used a the pen tool and created one. Then i did a step and repeat. Aligned them to the artboard. Then i expanded them. Next i added a gradient that faded from light grey to the dark grey behind it. Next i grouped them. And lastly i created a clipping mask for the over all shape.

    If you Save For Web out of Illustrator you should read over at bittbox.com
    and search for “How to use Vector Files In Web Design”. Its a great tutorial about his practices for getting art to the web out of Illustrator.


  4. Fireworks is the best of both worlds, with the efficiency of working directy with vectors and being able to (re) use symbols, while also being able to do more bitmappy stuff.

  5. @kemie:
    True Fireworks is probably the best for this situation, but… well.. i don’t know Fireworks very well.
    Plus its was a merely a proof of concept, that one could do a layout in Illustrator.

    • Jogos
    • July 1st, 2016

    whoah this blog iis magnificent i like reading
    your articles. Keeep up the good work! Youu recognize,
    a lot of people are looking around for this information,
    yyou could helpp them greatly.

  1. No trackbacks yet.

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

%d bloggers like this: