.Ai to HTML and CSS

Envato Authors Theme Authors
1

Hello guys !!

I want to design websites through illustrator (As i’m expert in illustrator)

I’ve also learned html and css.

Now the most important thing is to combine it. I mean from my illustrator design, I want to convert it to html and css.

Do you guys have any idea about this ??

It will be a great help for me.
Thanks … :slight_smile:

2

There is no easy way to convert AI to HTML/CSS Split the design and save these parts as png/jpg images, then you can use them in your template.


CSS:

.element{
    background: url(../images/a-small-part.jpg) no-repeat 0 0;
}

:wink:

3
Smartik said

There is no easy way to convert AI to HTML/CSS Split the design and save these parts as png/jpg images, then you can use them in your template.


CSS:

.element{
    background: url(../images/a-small-part.jpg) no-repeat 0 0;
}

:wink:

So you’re giving me hope !! I was afraid if I have to learn photoshop for web-designing.

As still learning html/css/javascript, if I go for photoshop, then it will be a big mess for me.

Just to be sure, is designing in photoshop mandatory? Or will it be very helpful for me, if I learn photoshop for web-designing??

Thanks for your help … :slight_smile:

4

AI is used for vector graphics, but you need a raster graphic for web. Of course you don’t need to learn Photohop to create a web graphics PS is just industry standard. You don’t need any graphic editor at all, if you have a great imagination, you can code web pages straight from your mind:)

It be very helpful for you, if you learn photoshop for web-designing.

5

You can convert AI’s to PSD so should be Ok, you might need to edit it slightly to fix any anomolies in the conversion

The standard for building website designs is PSD though so it’s worth having a copy of it (Photoshop express is much cheaper and easier to use) just for testing purposes.

Both of my designers use AI to design and then convert to PSD ready for me to build

6
kazierfan said
Smartik said

There is no easy way to convert AI to HTML/CSS Split the design and save these parts as png/jpg images, then you can use them in your template.


CSS:

.element{
    background: url(../images/a-small-part.jpg) no-repeat 0 0;
}

:wink:

So you’re giving me hope !! I was afraid if I have to learn photoshop for web-designing.

As still learning html/css/javascript, if I go for photoshop, then it will be a big mess for me.

Just to be sure, is designing in photoshop mandatory? Or will it be very helpful for me, if I learn photoshop for web-designing??

Thanks for your help … :slight_smile:

Basically Illustrator is not for web design, is for graphic design. I don't know so much about illustrotor, so I can't give you a good advice how to extract images from it and then use them in html.
As other already said, I recomend to learn Photoshop(it is easier than AI) and design websites with it.

If you have a great idea and good design skills, learn CSS3 and you’ll be able to design premium websites without Photoshop, Illustrator or any other design software. As an example: My latest template is 90% based on CSS(3), it was designed in Photohop by another designer, but for code I’ve used only a very small number of graphics. :wink:

7
Gareth_Gillman said

You can convert AI’s to PSD so should be Ok, you might need to edit it slightly to fix any anomolies in the conversion

The standard for building website designs is PSD though so it’s worth having a copy of it (Photoshop express is much cheaper and easier to use) just for testing purposes.

Both of my designers use AI to design and then convert to PSD ready for me to build

It’s a good idea. But I’m confused does converting AI design to PSD will work properly ??

Thanks to all of you guys for sharing wonderful ideas and suggestions … :slight_smile:

8
kazierfan said
Gareth_Gillman said

You can convert AI’s to PSD so should be Ok, you might need to edit it slightly to fix any anomolies in the conversion

The standard for building website designs is PSD though so it’s worth having a copy of it (Photoshop express is much cheaper and easier to use) just for testing purposes.

Both of my designers use AI to design and then convert to PSD ready for me to build

It’s a good idea. But I’m confused does converting AI design to PSD will work properly ??

Thanks to all of you guys for sharing wonderful ideas and suggestions … :slight_smile:

You need to check the right settings in AI when doing it (layers etc) but it then should open properly in PS. My designers do this for me so it does work, might be worth Googling (converting ai to psd) to get an idea on the best way to do it.

9
Gareth_Gillman said
kazierfan said
Gareth_Gillman said

You can convert AI’s to PSD so should be Ok, you might need to edit it slightly to fix any anomolies in the conversion

The standard for building website designs is PSD though so it’s worth having a copy of it (Photoshop express is much cheaper and easier to use) just for testing purposes.

Both of my designers use AI to design and then convert to PSD ready for me to build

It’s a good idea. But I’m confused does converting AI design to PSD will work properly ??

Thanks to all of you guys for sharing wonderful ideas and suggestions … :slight_smile:

You need to check the right settings in AI when doing it (layers etc) but it then should open properly in PS. My designers do this for me so it does work, might be worth Googling (converting ai to psd) to get an idea on the best way to do it.

Thanks a lot mate … :slight_smile: