• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Problem to export illustrator project for Behance and web portfolio

New Here ,
Apr 25, 2019 Apr 25, 2019

Copy link to clipboard

Copied

Hi,

I am a graphic design student and i want to create my behance page and my online web porfolio. The problems is i dont have no idea what is the best way to upload my projet(s).

I work in illustrator with separate artboards for my ''project presentation'' that i would download on behance. I only want to export whats inside all artboards.

I want the best quality as possible with the best loading time. If i upload my project in adobe portfolio in 72 ppi the loading time is good. When i do it in 150 or 300 the quality seems a little bit better (since i have images with a lot of colors) but the loading time is very bad. it can take 30 secs to for complex images to appear on screen..

I'm lost .. in illustrator there's so many way to export :

- export as png vs jpeg

- save for web : then there's png-8 vs png-24, but you have to export each artboard individually

- save for screens. : you can export all artboard at the same time at PNG 1x, or you can chose ''resolution'' (72, vs 300, etc)  . But with save for screen you can only chose ''PNG''.. not png-8 or 24 ..

im lost..

Thnaks

Capture d’écran 2019-04-25 à 12.11.13.png

Views

4.7K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe
Community Expert ,
Apr 25, 2019 Apr 25, 2019

Copy link to clipboard

Copied

300 ppi has no business in web design.

What you need is a raster image in the desired pixel dimension.

As for the different file formats: please read about them, there's plenty of documentation in the Adobe Helpx files for Illustrator as well as for Photoshop.

Usually withgraphic images that doesn't contain gradients you can most likely use a GIF or PNG 8 with limited color palette. Keeps file size low.

WIth photos and gradients and stuff PNG gets best quality. JPG should work as well with quality set to 10 resp. about 80%.

Mind that Social Media services always compress your files. you can't do anything about it.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 25, 2019 Apr 25, 2019

Copy link to clipboard

Copied

Vincent,

I believe you may find this useful:

How to export assets for the web using Illustrator |

In this context, PNG is PNG24, and that has just as many colours as JPEG and is better suited for crisp and clear appearance.

It is safer to work in Artboards that have the final pixel x pixel size(s) in the final image(s).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 25, 2019 Apr 25, 2019

Copy link to clipboard

Copied

OK.. so export all my artboards that way : save for screens / PNG / 72 PPI

My artboards are all web format 1920 x 1080.. (sometime i cheat and make some of them a little bit taller)

So i guess on this image PNG is PNG 24 and thats the way i should go ? thanks you very much all of you !

Capture d’écran 2019-04-25 à 19.42.21.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 26, 2019 Apr 26, 2019

Copy link to clipboard

Copied

Indeed, Vincent, and for my part you are welcome.

Concerning how the sizes work, the proof of the pudding is the eating. Are the two formats shown correctly, with different proportions, one a bit taller (when you are at it, you may consider going with 16:10 as in 1020x1200 instead of 1920x1090)?

Display size - Wikipedia

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 29, 2019 Apr 29, 2019

Copy link to clipboard

Copied

Why 1020 x 1200 ?

i want all my behance projet to have the same ''artboards'' size.  I thought 1920 x 1080 was the standard..

What do you think this project artboards sizes are based on https://www.behance.net/gallery/77573295/KININAL?tracking_source=for_you_recommendations

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 29, 2019 Apr 29, 2019

Copy link to clipboard

Copied

or this one :Behance

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 30, 2019 Apr 30, 2019

Copy link to clipboard

Copied

Vincent,

It is a bit difficult to find guidance, so you can have a look at some pages here,

https://duckduckgo.com/?q=behance+image+sizes&t=h_&ia=web

As you can see, up to 1400 in width are shown in full straight away, larger sizes can be clicked to.

The only reason to mention 1920 x 1200 was your mentioning this,

(sometime i cheat and make some of them a little bit taller)

As you could see from my other link, it is 16:10 instead of the film aspect ration 16:9, and the proportion of a number of monitors aimed at (more) profesional uses.

I am unsure whether I durst mention what it is (also) close to.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 30, 2019 Apr 30, 2019

Copy link to clipboard

Copied

Ok so if i understand clearly ? if i have i really tall image i wanna show. i must put it on two different artboards close to each other and not on a ''solo'' artboard that i'd make taller.

I worry my image would be cut a little bit.

Thank yu very much ! you are really helping me here !

Capture d’écran 2019-04-29 à 23.13.17.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 30, 2019 Apr 30, 2019

Copy link to clipboard

Copied

Doesn't make much sense to slice your images.

Only important thing in Behance is the width. So if you want your images to display in full width, make them 1400 pixels wide. The height doesn't matter. Make it in a way that you don't need to slice your artwork.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 30, 2019 Apr 30, 2019

Copy link to clipboard

Copied

thanks !!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 30, 2019 Apr 30, 2019

Copy link to clipboard

Copied

Vincent,

What Monika said.

I was away for (quite) a while.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 06, 2019 May 06, 2019

Copy link to clipboard

Copied

First of all thanks, i did what you all told me.

The problem is the quality of my export.. the quality of image at 72 ppi are excellent and te loading phase is not so long !

But all my artboards with vector are kinda trash... edge are really not sharp and line are not clear..  how image are beautiful but 100 % vector object looks really bad.

Look at this project i uploaded for an example of what i am talking about : Vincent Morin-Harvey - Branding : MIELLE

Capture d’écran 2019-05-06 à 13.48.05.pngCapture d’écran 2019-05-06 à 13.49.36.png

See how those are from the same project.

Thanks !

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 06, 2019 May 06, 2019

Copy link to clipboard

Copied

It's no longer a vector image when you save to PNG.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 06, 2019 May 06, 2019

Copy link to clipboard

Copied

yes i know it will converse to pixel !! but i look at some other behance online portforlio and i cann tell how ''vector'' element are so muck cleaner than mine

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 06, 2019 May 06, 2019

Copy link to clipboard

Copied

Unless you show a side by side comparison, it's kind of difficult to help you.

You might want to just get more practice with more projects and experiment a lot more in order to find out how to get the results you want.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 06, 2019 May 06, 2019

Copy link to clipboard

Copied

LATEST

Vincent,

I am a bit unsure what the (final) issue is, especially owing to this,

The problem is the quality of my export.. the quality of image at 72 ppi are excellent and te loading phase is not so long !

But all my artboards with vector are kinda trash... edge are really not sharp and line are not clear..  how image are beautiful but 100 % vector object looks really bad.

To get the clear and crisp PNG images, the safe way is to have the (actual) Artboard at the desired size in points/pixels and than Legacy Save for Web or export at 72PPI; and for a PNG only the actual pixel x pixel size matters.

Are you saying that the original vector artwork looks bad, but the resulting PNG images look fine?

Or?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines