Drawing/Image to cover full web screen

#1
Hi there,

I have a couple of questions regarding drawings made in Photoshop by an artist for my website. The Pixel Dimensions are 5451x3809 with Resolution at 300. The artist has no experience in web design so she drew within these dimensions.

I need the drawings to cover full web screen of whatever device is in use. Unfortunately, by the time a web developer got involved it was already too late to change the dimensions without stretching (width), the drawings. The dimensions recommended by the web developer are 1366x662 and according to him this should cover most screens.

I should also mention that the drawings can't be cut from top, even slightly, the other sides are more or less acceptable to be cut. There is an unlikely option of adding a frame around the drawings, but I would prefer to add/extend the drawings to fit the given dimensions of 1366x662.


So here are my questions:


Is there a way to make 5451x3809 into a 1366x662 (or whichever dimensions you recommend), without stretching the drawings?


If not, then within what Pixel Dimensions would be best to add a frame around the drawings or extend the drawings in order to fit most screens/devices?
(Also, I would like to add some extra frame/extension as well. So let's say if 1366x662 is fine, then I would like to add more frame/extension, if possible, just in case).


I appreciate your time and answers very much.


Best,

Bob
 
Last edited:
#2
I don't see why you would stretch it out when the image size is larger than the size you want to go down to, Take the original back in to Photoshop and crop it down to your required size... Then save it out as another copy with a slight different name so you can keep the original.

You should be able to put the new one in to your image folder on your site and the developer can use it.

I'm sure there is another way of using the original on your site using css, but someone with greater knowledge would have to advise you on that one.
 

fredfish

Forum Moderator
Staff member
Forum Moderator
#4
inkpad.t I think the OP is saying that he doesen't want to crop out any detail (OP please correct me if I am wrong).

Have you thought about resizing down to a size smaller than the desired end result (keeping the aspect ratio the same) and then creating an abstract frame based on the original image - I would go for a blurred faded version of the original image. It is difficult to come up with specific suggestions without seeing the image (I appreciate that may not be possible for commercial reasons).

Cheers

John
 
#7
Here is project i'm working on, the full size image has been crop down to 4 sizes.
2016-12-14 22_14_49-Start.jpg 2016-12-14 22_14_17-Start.jpg 2016-12-14 22_13_46-Start.jpg 2016-12-14 22_13_23-Start.jpg 2016-12-14 22_13_23-Start.jpg 2016-12-14 22_13_23-Start.jpg

As you can see the detail has not been lost, only areas of the original image.

If you want the whole picture but in a smaller size, as i mention before you can re size it to your required pixel size.
 
#9
Well, here's the dilemma...when I resize the image with the "Constrain Proportions" selected, on 1366 it gives me 955, which is not an option for full web screen. When I deselect it, the image becomes horizontally stretched. Cropping is not an option either, since I need to see every single skull that you have on your image (taking your image as an example). Also, some parts of the drawings are going to be interactive. So I won't be able to cut any of it, especially the top.

I'm sorry, but I won't be able to display any of the images at this point.


Thanks much for all the responses.
 
#10
It might not be possible to re size your image without losing something along the way, What if you create a new document 1366x662 which is your required size . then import your image and see if it can be scaled to that size.

this is a link to common screen sizes ( might a bit out of date i don't know ) but i would have thought you could use your original image on the web site and and make the site a responsive web site which would scale it to whatever device it is shown on...

I could be totally wrong but just a thought.

http://www.rapidtables.com/web/dev/screen-resolution-statistics.htm
 
#12
Yeah, this link is exactly what I'm dealing with. The first and second pics. Well, I'm going to either add a frame around it or add an additional drawing.

Thanks for your help.

Cheers.