Phippy family image in homepage footer

[cjyabraham]

Style Phippy family photo in footer of homepage

[thetwopct]

@GarethAcidWorks Is this still the latest arrangement for the Phippy family photo suitable for the site footer?

During implementation I've run in to a few issues:

On the top part of the image (behind characters and mountain) there is a barely noticeable overlay, but when inserted in to the site next to other colors its very noticeable, so can it be removed? (Marked as (1) on image)

On the bottom part of the image, the reflection is abruptly cut off at the bottom so this needs to gradually fade out as otherwise it's noticeable. While working on the reflection, if the height of it is able to shrink, this would make implementation easier (there are some layering issues with other parts of the footer). (Marked as (2) on image)

To get a great alignment with the way the image sits on the black background it's important the image canvas is sized correctly. We want the "horizon" of the image to be dead centre 50% from bottom and top. As an example the red line is where we want the black background to sit (based on Figma) but currently the 50% height mark of the image is where the purple line is. If you can align the image so the horizon is at 50% this would greatly aid implementation.

While resizing, can you resize the canvas width - 2400px wide is fine (its around 3300px at the moment), this will be 2x pixels on most screens so should look good. Supplying the image to me as PNG is just fine.

Thanks!

[GarethAcidWorks]

Try this one, it has:

• background colour removed • 2400 x 760 • centre point is as close as I can get it at a nice 760 height

[thetwopct]

@GarethAcidWorks Have pushed up a testing site for this footer using the image with the slight overlay in the top part, will await the updated image from you:

• without the overlay on top part
• trimmed of white space left and right

Thanks

[thetwopct]

@GarethAcidWorks Thanks for supplying the new image this morning. Here it is in place:

https://pr-588-cncfci.pantheonsite.io/

I think we still have the following issues:

1) There is still an overlay or shadow or something coming off the image in the top half and this looks strange on the gradient background behind it creating a line that does not look pretty 2) The background now seems to have a very thin 1px black line on it, its especially noticeable on the white clouds 3) and 4) I think it looked better when the image was tight up to the edges of the container, does the image you supplied need a trim so it aligns to the edges exactly, or is it missing the small hills that were there previously that would fill the space?

Let me know when we can try again - if the designer can test the image they create on a gradient background they should be able to spot these issues before we go through a deployment process to see it.

[cjyabraham]

I'm noticing a weird line here when I zoom in:

[GarethAcidWorks]

Re 2 I also noticed the thin black line and wasn’t sure how that was appearing, that was occurring when I was. Saving it down, I will try to fix it.

Re 1, sure I can triple check that, I have control of the full layers, maybe it’s some light render that’s bouncing upwards.

Re 3. The small hills we removed to stop the wide shadows being cast, ill message you on slack for this one, im sure we can photoshop something for now

[thetwopct]

I didn't think any of our feedback was relevant now - you sent across an updated image and we deployed it and closed this issue.

As we discussed on Slack; it would be good to have the hills at the side cropped closer to the edge as currently there is whitespace and I'm using CSS to extend the image up to the container boundaries. On mobile you suggested we should push the image out of the container, which because of the whitespace is not possible. But then also said it looked good as is. So sounds like we could experiment some more if we really want to tweak, maybe next time we create a PR instance we can then update it.