Jump to content
You must now use your email address to sign in [click for more info] ×

having a problem sizing pics for website products


Recommended Posts

Hi,I'm new to photo editing.Ive been reading and watching a lot of videos on the topic.From dpi settings to pixels,resizing,cropping etc.The issues I'm having are that I have different sized products. from dropper bottle size to 16oz jars.Ive tried taking the shoots from different distances to no avail.I'll set up my galaxy s8 on a tripod and I can even shoot all the products from the same exact distance.But when I go to add them to my wp site 1 pic will fit perfect and the next will be blown out of proportion.Its hard to explain what I'm trying to do without knowing the proper terms for this stuff.I'll go through the steps I take to help you help me.I take the pic,does'nt matter the distance nor the aspect ratio,i''ll shoot it in 16:9(9.1m) 16:9(3.7m) 4:3(12m) 4:3(6.2m) etc,then I take it and open it up with affinity photo and I crop out the background to focus in on the product only.I apply the crop and it gets way to big so I try to adjust the pixels in the resize box with resample and without,i'll try to adjust the dpi from 72 on up to 300.nothing seems to make much of a difference.i'll export.the smaller products don't seem to give me much issue for the most part,but the bigger ones never work out.so ill drop the zoom after all of that to about 25% and it looks perfect,not over pixelated the label is clear etc.but I can't find any options to allow me to export the pic in that state it will always undo the zoom and export based on the crop size it is not zoom.My goal to all of this is to have the exact same size per product on the page.I don't want each pic to be bigger or smaller than the last.I would like them all uniform if possible.so if a product is bigger in size I need the pic to size to fit the rest.I guess meaning that if 1 product is bigger it needs to be zoomed from say the norm is 80% and it needs to be zoomed down to 60% to look uniform than that's the goal. I hope I'm explaining this correctly?I will attach pics to show my issues.. I would even like to make the pics in the uploads to be half those sizes,but when I try to size them down further the quality goes down hill.the 3rd pic of the deep relief salve I would like that zoomed back a lot by 60% or more.Its way to close after cropping.

screencap sample1.jpg

screencapsample2.jpg

deeprub300mg.jpg

Link to comment
Share on other sites

If I understand you correctly, you want identical size final pictures, with different zoom levels and different cropping from the original photos.

 

lib1.jpg.058a1815bc1aebf712adf0a78088092a.jpglib2.jpg.4342e8cddceeeb572d3c44dba5005f8d.jpgben1.jpg.8bcbeac8e7d553ba87f948c89e3f7299.jpgben2.jpg.2414c1679b6b43a17881a856b4eef002.jpg

 

I made an Affinity Photo document 200 pixels by 300 pixels. I then "Placed" the pictures (File > Place) one by one and zoomed them in to achieve the crop I wanted. That is easy to do when placed by just resizing the placed image layer. It will crop the image to the page (or canvas) size, no matter how much it overlaps the edges.

 

Because the document is 200 x 300 pixels, all pictures output at exactly 200 x 300 pixels, no matter what the original size of the picture or the zoom or crop ratio. There is no need to fiddle about with dpi setting or resolution, Affinity Photo does it all for you. Just concentrate on getting the zoom and crop right. Those four pictures took about one minute.

 

The final quality is decided by how many pixels there are. So a 200 x 300 pixel image will always be 200 x 300 pixels. Nothing you can do about that. That is just websites for you.

 

 

Windows PCs. Photo and Designer, latest non-beta versions.

Link to comment
Share on other sites

The zoom level just sets how much of the document is visible in the workspace window -- it only changes what is displayed. It has nothing to do with the dimensions or aspect ratio of the document itself. When you crop a document, the zoom level automatically changes to fill the workspace window with the cropped image, so it is not actually getting any bigger.

 

The dpi setting is irrelevant for exporting to web pages; it is for printed output. (See the Understanding DPI video tutorial for more about that.)

 

If you want every product photo to be the same size (IOW, have the same height & width) on the web page, they must all have the same aspect ratio (the same ratio of height to width). You can do this with the Crop Tool in the "Custom Ratio" mode. So for example, if most of your products are bottles you could use a 2 X 3 (2 units wide by 3 units high) setting & save that as a custom preset to make it easy to apply that aspect ratio to all your shots. You will need to adjust the position & size of the crop box as needed for each photo.

 

When you export the photos (for example, to a web-friendly format like JPEG) you can set the size (in pixels) in the export dialog. Make sure the lock is on. This will ensure that the aspect ratio is maintained. The quality (for JPEG), pixel dimensions, & resampling method will determine the file size & quality of the photos -- larger dimensions & higher quality settings will look better but take longer to download & thus longer before your potential customers will see the entire web page.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.