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
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.
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).
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 !
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)?
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
Copy link to clipboard
Copied
or this one :Behance
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.
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 !
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.
Copy link to clipboard
Copied
thanks !!
Copy link to clipboard
Copied
Vincent,
What Monika said.
I was away for (quite) a while.
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
See how those are from the same project.
Thanks !
Copy link to clipboard
Copied
It's no longer a vector image when you save to PNG.
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
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.
Copy link to clipboard
Copied
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?