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

How much transparency around artwork

Explorer ,
Nov 25, 2022 Nov 25, 2022

Copy link to clipboard

Copied

Hi guys!

Ok....here goes...

If I am using vector art that is for example designed to be a rectangle shape....I am creating images for the web and have chosen aspect ratio 4:3 and in this example 1600 x 1200. If I export for web this image will be 1600 x 1200 and even uploading it to website I am working with the same dimensions, although, the artwork is probably 800 x 550...

Yes I save with transparency but I want the artwork to fit my artboard as much as possible 1600 x 1200...

I want the imported art 800 x 550 to fit my artboard as best as posible.

There is scale up and such ways of doing it....I just want it to fit the boundaries of the artboard as much as possible..

Is there a quick way to do this and should I have a little space around the artwork? I fit atwork to artboard bounds etc it would leave me with the 800 x 600 and not the 1600 x 1200 4:3 aspect ratio and that would mean a lot of space around the object which one has to consider when uploading to the web..

I hope someone can follow my ramblings

Thanks 

bookie56

 

TOPICS
Import and export

Views

1.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

correct answers 1 Correct answer

Community Expert , Nov 26, 2022 Nov 26, 2022

bookie,

 

As I (mis)understand it, if you wish to scale the artwork such as 800 x 550 in your OP, to a certain pixel x pixel size, such as 1600 x 1200 in your OP, you can use the Transform panel as follows:

 

A) If you wish to retain the proportions, you can select the artwork and then set the W value (in other cases the H value) as desired to 1600 px and Ctrl/Cmd+Enter to get the H value 1100 px, in other words 100 px less than the desired value, so you get a transparent band of 50 px at top an

...

Votes

Translate

Translate
Adobe
Community Expert ,
Nov 25, 2022 Nov 25, 2022

Copy link to clipboard

Copied

And why does simply scaling the artwork not work for you? You can just scale it beyong the artwork bounds so that it fits on all sides, but is too large on others.

 

Also: please show then we can help better.

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
Explorer ,
Nov 25, 2022 Nov 25, 2022

Copy link to clipboard

Copied

Hi Monika!

Nice to hear from you...

Ok scaling works....is there a recommended boarder around the artwork you would recommend?

Obviously that depends on the overall dimensons of the artwork...

It might be smaller on the width than the height for example.....not worried about that....just wondered if I have as my example stated...

If I scale to 200% and my artwork is the width of my artboard....but that doesn't leave a little margin around the artwork on the width....

Just wonder what you do in such situations? Do You allow for a border or do you scale so it fits one of your artboards dimensions?

 

bookie56

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 ,
Nov 25, 2022 Nov 25, 2022

Copy link to clipboard

Copied

Please show something.

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
Explorer ,
Nov 25, 2022 Nov 25, 2022

Copy link to clipboard

Copied

Here are three pics...

The first showing the settings being 1600 x 1200

The second I have scaled the artwork to fit the top and bottom boundaries...

The third shows the export to .png

But I haven't left any border top and bottom

 

 

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 ,
Nov 25, 2022 Nov 25, 2022

Copy link to clipboard

Copied

If that were my artwork, I think I would try and rotate that clipboard, so that the image gets wider.

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 ,
Nov 25, 2022 Nov 25, 2022

Copy link to clipboard

Copied

I'd probably make it fit proportionally, and if you want padding add that in CSS. It's more predictable for the web designer.

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
Explorer ,
Nov 25, 2022 Nov 25, 2022

Copy link to clipboard

Copied

The artwork is a lot smaller than the image size so I have taken it proportionally in the pics....to the max I can have for the artwork dimensions.

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 ,
Nov 25, 2022 Nov 25, 2022

Copy link to clipboard

Copied

You said you'd scaled it to fit the 1600 x 1200 artboard? That's what I'm saying I'd do.

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
Explorer ,
Nov 25, 2022 Nov 25, 2022

Copy link to clipboard

Copied

Yes, I scaled it to fit - but the proportions of the artwork don't allow that in both directions....which is Ok because I didn't design the artwork....;)

Thanks for your replies!

 

bookie56

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 ,
Nov 25, 2022 Nov 25, 2022

Copy link to clipboard

Copied

Why is it necessary to have a 1600 x 1200 artboard? Why not have the artboard fit the 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
Explorer ,
Nov 26, 2022 Nov 26, 2022

Copy link to clipboard

Copied

Hi Doug! 

I am trying to use stock vectors and create images for wordpress...

Ok I would like some advice on this if I am thinking totally wrong....

The suggested sizes to allow for all situations  seem to be as follows:

Logo images 200 x 100

Background images 1920 x 1080 

Featured (landscape) images 1200 x 900

Featured images (Portrait) 900 x 1200

Thumbnails 150 x 150

I know WordPress Media Settings can be changed but as standard are:

Thumbnails 150 x 150

Medium size 300 x 300

Large size 1024 x 1024

Now the actual size of this artwork with artboard to artwork bounds is 1057,8 px x 1050,155px

If I scale up the artwork to say Featured image Landscape - then my width would be 1200px x 1191,328 according to illustrator... saving for web would mean 1200 x 1191.

When using someone else's vector art one has to work with what one has...

How would you go about the problem...?

The reason for 1600 x 1200 was to have my images large enough for all devices...in this case I was looking at the Featured image landscape 1200 x 900 aspect ratio 4:3 which my larger image of 1600 x 1200 is 4:3 aspect ratio

Would you scale up so it is proportanate to the height or width of the artwork depending on how it was designed and then just accepting the one of the sides is not going to be exact ot recommended sizes?

What aspect ratio would you use?  for a landscape image....? I have been reading that 4:3 is fast disappearing

I would appreciate any advice you can give....;)

 

bookie56

 

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 ,
Nov 26, 2022 Nov 26, 2022

Copy link to clipboard

Copied

You may want to look into using the .svg format instead., as that artwork in your example is vector and wordpress will use .svg. The artwork you design will have more value/usage as people can edit them to make them more portrait or landscape.

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
Explorer ,
Nov 26, 2022 Nov 26, 2022

Copy link to clipboard

Copied

Yes, svg is a solution but as all information about svg's out there points to problems with hacked code....not sure how to use that solution...

 

bookie56

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 ,
Nov 27, 2022 Nov 27, 2022

Copy link to clipboard

Copied

LATEST

Not sure how you are associating svg with  hacked code. You can save as >> change format to .svg. If your art is made with vector paths (as seen in your screenshots)  you need not worry about resolution.

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 ,
Nov 26, 2022 Nov 26, 2022

Copy link to clipboard

Copied

bookie,

 

As I (mis)understand it, if you wish to scale the artwork such as 800 x 550 in your OP, to a certain pixel x pixel size, such as 1600 x 1200 in your OP, you can use the Transform panel as follows:

 

A) If you wish to retain the proportions, you can select the artwork and then set the W value (in other cases the H value) as desired to 1600 px and Ctrl/Cmd+Enter to get the H value 1100 px, in other words 100 px less than the desired value, so you get a transparent band of 50 px at top and bottom if you centre it on the Artvoard;

 

B) If you wish to scale the artwork in a non uniform way to fill the Artboard, you can, you can select the artwork and then set both the W value and the H value to those of the Artboard.

 

Remember to have the artwork placed fully within the Artboard and to have the Artboard placed within whole pixel values, such as the upper left corner having X = Y = 0; this can also be done using the Transform panel.

 

 

And then you may wish to look at the following which may sound unforgivably outdated and boring, sorry.


If you wish to have PNGs (PNG24 (also (little) known as PNG32, it holds 24 bit colour and 8 bit Alpha channel (transparency)), of course) look crisp and clean, at least when it is (also) to be used at moderate screen resolutions, it is important to have the images in the exact desired final pixel x pixel size, or at sizes that are powers of 2 times as large (2x, 4x, 8x, and so on, the larger values can improve the appearance on high resolution screens and still ensure best possible appearance at low resolution screens); forget about resolution which may actually lead to wrong sizes and hence blurriness, or work at 72PPI or powers of 2 times as large (144PPI, 266PPI, 576PPI, and so on).


It is easiest and safest to work at the desired size when creating the artwork.


It is important to remember that a raster image represents the whole appearance, including strokes, so to make sure you get it right you can click Show Preview Bounds in the General Preferences (and untick it afterwards).


A very common unsuitable way is to Export to PNG (remember to use PNG24 and use Transparency for artwork to be in front of different backgrounds) with a medium or high resolution, such as 300PPI.


And a common misunderstanding: (almost) 11 out of 10 times, a statement like "I created the document at 300 PPI" means that the value is chosen in Effect>Document Raster Effects Settings; however that only means that the (current) resolution of any raster effects applied to the vector artwork, such as (any kind of) Blur, is set to that value (and only unless/until the value is changed to something else); when zooming in, this resolution can be seen in contrast to and on the background of the vector artwork. So this setting has nothing whatsoever to do with the actual resolution of a raster image created from the (vector) artwork (but it ought to (at least) match it).


For clean and crisp artwork avoid JPEG.


It is also important to have the artwork and also the Artboard placed fully within integer/whole pixel X and Y values in the Workspace, which means that the X and Y values at the corners must be integer; this can be ensured by using one of the corner Reference Points in the Transform palette, and then checking that all the values X, Y, W, and H, are integer (the centre Reference Point can only be used if both W and H are even numbers).


Otherwise the resulting image will become a bit wider/taller and the extension(s) will be empty and therefore be (partially) transparent/white.


Therefore, the safest way is to create the artwork at the final pixel x pixel size and use a corresponding Artboard, then use the Legacity Save for Web (where you can look in the Image Size window for size confirmation and possibly multiply by 2, 4, 8, whatever), or use Export at 72PPI (or 144/288/576/whatever PPI), or use Export for Screens (in either way). In either case, use the relevant optimization (available with both ways); it is also convenient to have 72PPI (or 144/288/576/whatever PPI) in the Effect>Document Raster Effect Settings.


If you have pure vector artwork, you can relax a bit and have the artwork/Artboard at any size (the Artboard must have the same proportions as the final image), then use the Legacity Save for Web and set either Width or Height in the Image Size and Apply (make sure the other value is also correct).


The Legacy Save for Web may be an old carthorse, but it knows its way home, even if the driver is drunk and sleeping it off in the hay in the back.

 

Or you can switch to SVG, if applicable.

 

https://helpx.adobe.com/search-results.html?q=svg&scope=%5B%22helpx%22%5D&subscope=%5B%5D&limit=10&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
Explorer ,
Nov 27, 2022 Nov 27, 2022

Copy link to clipboard

Copied

Hi Jacob!

Wow...bells and whistles...;)

As written to MikeGondek...I love svg's and what they can do - but how you handle them is still a bit over my head...

I know they can go to any size...

Just not sure what size to save them as if for example I am using an image 1600 x 1200

I am grateful for the link and there is a ton of information that can be useful....just sifting through it for some general explanation of what one should consider and when...

Thank you so much for the info!

 

bookie56

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 ,
Nov 27, 2022 Nov 27, 2022

Copy link to clipboard

Copied

For my part you are welcome, bookie.

 

As I (mis)understand it, you can still just scale the Artwork as in A) and then save the SVG at 1600 x 1200 with transparency at top and bottom; or use B) if you must.

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
Explorer ,
Nov 27, 2022 Nov 27, 2022

Copy link to clipboard

Copied

Ok Jaco!

That answers a lot of questions...

Thank you!

 

bookie56

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 ,
Nov 27, 2022 Nov 27, 2022

Copy link to clipboard

Copied

You are welcome, bookie.

 

I hope you will report your findings.

 

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