Page 1 of 1

Preparing Flickr banner images

Posted: Tue Jul 30, 2013 7:50 pm
by Bruce N H
Hey all,

In this thread Sergeant Chipmunk posted an amazing MOC. BTW, the great presentation deserves a post in its own right in the publishing forum, but I'll let him do that if he wishes. I want to focus on Flickr banner photos.

Image

SC decided to make this his Flickr banner image, and I agree that this is a great idea. Unfortunately, due to the shape of the Flickr banner, difficulties with editing it, and most importantly all of the text that gets plastered across it, it comes out looking like this:

Image

Still very cool, but it loses a lot of the impact of the full photo. How can we fix this? And more to the point, how can you do the same for your banner photos? Okay, here's what I did. All of this is in Gimp, though you can use Photoshop or other programs. See this tutorial on downloading and using Gimp if you need to understand about using layers in Gimp.

Okay, first I took a screencap of his banner and pasted it into Gimp (above). I made this the top layer, with a white layer underneath. I was sure to add a transparency mask to the top layer, and I cut out all of the "image space", to give something like this (the white space is all a cutout from the top layer). I'll call this the "frame".

Image

Then, since his image is a silhouette against a gray background, I made this quick mock-up background. This isn't really necessary, it will just help to see how the final image will turn out. In this image the "frame" is hidden.

Image

Here's what it looks with the "frame" turned visible.

Image

Okay, next I took Sgt Chipmunk's original image, and pasted it into this Gimp file, in a layer over the mock-up background, but below the "frame" layer. I used the 'scale layer' option and moved the original image around to best highlight it, coming up with the following:

Image

Turning off the "frame" layer, we can see the image that would give rise to this banner. I suppose it would be possible to just go with this roughly edited version, and I'm sure more careful Photoshoppery (I know, Gimpery to be more accurate in my case) you could come up with a good image. OTOH, If Sgt Chipmunk wanted to do this, he could just rebuild the MOC and re-take the photo. In this particular case this would be pretty easy, since it would just be adding black to extend the ground on either side of the action, and re-take the photo, zooming out appropriately.

Image

However, let's say we're not quite satisfied. This just clumps the action in the middle, and wastes sections of the "frame". What if we rebuilt the MOC specifically to fit the "frame"? If you go back and look at the "frame" you'll see that it's irregularly shaped - narrower at the edges, and fatter in the middle-right portion.

Image

So, here's what I did. In Gimp I took Sgt. Chipmunk's original image and broke it into three pieces - the two figs on the left, moon in the middle, and the fig and the tree on the right. I made these into three separate layers, and moved each of them relative to the "frame" and background to come up with the following:

Image

Here's what it looks like if the "frame" is removed. Now, if Sgt Chipmunk wanted to, he could rebuild the MOC to look like this and re-take the photo. Again, in this particular case, the fact that it is all silhouette makes rebuilding reasonable, as all this would do is take sections of the original apart and add in a big black wall of bricks, with some plates in the middle to give some sloping between the sections. BTW, if something like the image below were used, the result with the "frame" included automatically by Flickr would look better than the image directly above this paragraph, because I've got gray behind the text, but in Flickr the text would be sitting against that black part of this image.

Image

Now, I show this not to suggest that Sgt Chipmunk needs to change his banner. I'm only picking on him because his image is so cool, and also the silhouette nature makes it a little easier to do all of this manipulation. Rather I want to suggest that people think about their banner images. If you think about the different elements you want in your image, you can play around with them in Gimp or Photoshop to see how you can optimize your image, and then go build accordingly. Think about putting the key parts of your image in the unobstructed part of the banner space, and conversely put relatively neutral parts of your image behind your name and other text.

I should note that there are certainly other options for banner images. A single MOC against a white or otherwise plain background can work well, particularly if the MOC stretches horizontally rather than vertically. Some sort of fairly random pattern, such as a pile of bricks, can also be very effective. Whatever you choose, though, the technique I suggested above of clipping out a "frame" and using that as a top layer in Gimp or Photoshop will help you crop and size your image to get the best overall result given the odd shape of the banner space and the placement of the text.

Anyway, I hope this helps. Sgt. Chipmunk, thanks for being the example here.

Bruce

Re: Preparing Flickr banner images

Posted: Wed Jul 31, 2013 2:08 am
by Eklund
Interesting post, Bruce. I think that it is definitely hard to get a great banner photo on flickr using lego. Generally, mocs are not as long and skinny as the space allows for. I decided to make an attempt at a banner photo using my two most recent creations.

Image

Even after a lot of editing, it is a little to tall to work as a great banner photo. I would really have to scale the creations down for them to be totally visible in the banner. I may still play around and experiment a bit with the picture.

Another problem I found is that for pictures with a width larger than 2048 pixels, flickr will automatically center the banner image so that its width is 2048 pixels. This cuts off the edges of the picture, which I find to be annoying. To combat this, I think it is best to re-size banners to 2048 pixels wide before uploading.

Re: Preparing Flickr banner images

Posted: Wed Jul 31, 2013 2:47 am
by Bruce N H
That's a great banner image, but I agree that it should be re-edited to make less of it get covered up by the text, particularly the top of the image getting covered up by that dark stripe across the top of the screen. Of course, that means that the MOC part would have to be about 25-30% smaller.

You're right about the fact that most MOCs are not long and narrow enough to really take advantage of the banner size and shape, at least for Castlers. I could see a side view of, say, a MOC of an F-16, or a car, or an X-wing or something. A long train MOC would be pretty good - an engine and several cars. Your example is kind of a castle/fantasy/steampunk version of the F-16 or spaceship.

Good point to bring up size, and I'll go back and edit this into my post above later. Flickr suggests that an image for the banner should be 2048x768. Because of dynamic sizing this will get stretched or shrunk a bit as people resize their browser window, but this will fit the default banner best. I think that Flickr automatically keeps the center (along the horizontal axis) of your image at the center of the browser window, so you shouldn't have too much 'action' near the left and right edges of the image.

--------------------------------------

Okay, I've done some further work on banner image size. As noted, Flickr suggests you use an image that is 2048x768, so that's where I started. First I made an 2048x768 image that was just plain white:

Image

And pasted that in as a banner, and got this:

Image

Notice that this highlights another important consideration: In addition to the text and your avatar image that get pasted over the banner image, there is also this gradient fading shadow along the bottom third of your banner.

Okay, so then I put images of five figs in the exact center and each corner of that 2048x768 image:

Image

When this was used as a banner image, notice that the figures in the corners are almost completely gone! Not just obscured by the text and other stuff, but almost entirely cropped:

Image

To help emphasize the usable area, I added more figs to the image:

Image

When the above is used as a banner, you see this:

Image

Okay, this 2048x768 is obviously very far off, as the top and bottom rows of figs are all cropped. I should note at this point that dynamic sizing is going to throw a wrench in the works here. Here is the exact same banner image, but I started with my browser filling the screen, and then resized the browser window to be more narrow.

Image

Notice that as the browser window size changes, the banner is stretched and squeezed and cropped differently. As the window is narrowed, more of the bottom is shown, and the center of the image is pushed upward until it start to interfere with that top bar. Also note that there is some minimum width, and if you squeeze your browser window in even more, it just crops more and more of the right edge of the image rather than squeezing the image in.

So my initial impulse to just make shrink the banner image in the vertical dimension could be problematic. If I just make a blue box that is 2048x500, it looks fine when my browser is sized to fill my window, but as I shrink down the window and the banner image gets squeezed, an annoying gap appears.

Image

It's behind the shaded part, so not a horrible result, but the whole point of this exercise is to optimize the banner image so it looks good, so let's minimize this. The next experiment is to make an image that is 2048x600, but importantly we will leave the top 2048x75 and the bottom 2048x125 as void space. Ultimately this will match whatever is the background of our main image. So if our main image is going to be an isolated MOC on a plain background, we should have this bottom stretch just be that background color. If, OTOH, our banner image is going to be some scene that is LEGO edge-to-edge, those portions should be, for instance, sky and ground. here I show an image with those void spaces emphasized in blue:

Image

And here just white:

Image

This gives us a result that is pretty good as far as it goes. We've dealt with the overall size, and the issues related to dynamic sizing, but we have not yet dealt with the annoying dark gray bars and the text that go over top of the image.

Image

What in the world??!??! I've been working on this for a long time, because i wanted to turn this into a 'how-to' article and I wanted to document everything. I just clicked to a different page on Flickr, and when I went back to my photostream, it expanded the banner image and changed the resolution. Grrrr!

Image

I swear to you guys, I did nothing to change the banner image between this image and the image above. I've actually now gone back and tried other images, and the same thing happens. You past in the image and get it looking good, and then you go away and come back and it looks different. I give up for now - I'll try to figure this out tomorrow.
-----
Good morning. I seem to have fixed it by using a much larger image. I created this 3000x2000 image in Gimp, where the light blue areas are going to be outside the visible space of the Flickr cover photo. Now I'm not getting the odd resizing. Of course, I'm also on a different computer right now, using Firefox rather than Chrome. We'll see how this looks when I'm at home tonight.

Image

I'll wait till then to play around further with this. My ultimate plan is to make a step-by-step guide to creating a template, which can then be used to manipulate images for these banner images on Flickr. Don't worry, my guide will be much shorter than this post; I'm just trying to document everything I'm doing.

Bruce

Re: Preparing Flickr banner images

Posted: Wed Jul 31, 2013 3:38 pm
by AK_Brickster
I applaud your efforts, thank your for your perserverance, and eagerly await the final conclusions of your study.

I ran into the "adjust to make it look good, then come back and it's all screwed up" problem when I tried to use our "Virtual Collaborative" Garheim parade as the cover for the Garheim group. It is long and thin, so looked great when centered, but when I leave the page and come back, it zooms way in to the center of the MOC.

Looking forward to the results and workarounds you come up with!

Keep up the good work! :mrgreen:

Re: Preparing Flickr banner images

Posted: Wed Jul 31, 2013 5:27 pm
by Eklund
Alright, so after a little more fiddling, this is what I came up with.

Image

Green = Original photo
Yellow = What flickr keeps for the banner.
Red = Total unobstructed area of what flickr kept for the banner.

As can be seen, you need a lot of extra space so that what you want to see in the banner isn't cut off. This picture had a 8:3 ratio, approximately a third gets taken off of the top and bottom.

Something I want to re-emphasize is that you shoud re-size banner pictures so that they are 2048 pixels wide before uploading. Unless this is done, flickr will automatically zoom into the center so that the banner is 2048 pixels wide.

With this picture, there were no weird re-sizing quirks. However, as expected, more of the image is displayed as the window size goes down.

Re: Preparing Flickr banner images

Posted: Wed Jul 31, 2013 6:31 pm
by Bruce N H
Very cool.

Eklund, do you have gifs with transparent backgrounds of the two elements of that image that you could e-mail me? I'm going to take this whole thread and turn it into a simpler tutorial on making that template, and then wanted to give a few examples of trying to put images in the template.

Bruce

Re: Preparing Flickr banner images

Posted: Sat Oct 12, 2013 9:04 pm
by Rifiröfi
Hi Bruce and Tommy,

based on your tutorial I managed to create my Flickr banner, it worked well! Thank you very much!

Cheers
Adam

Re: Preparing Flickr banner images

Posted: Mon Oct 14, 2013 12:00 pm
by Bruce N H
Hey your banner really looks good. Also this reminds me that I need to reedit this and put it on the how-to page.

Re: Preparing Flickr banner images

Posted: Mon Oct 14, 2013 8:55 pm
by Rifiröfi
Bruce N H wrote:Hey your banner really looks good. Also this reminds me that I need to reedit this and put it on the how-to page.
Thanks Bruce (if you meant my banner ;) )! Here are my thoughts:
- start with a 2048x768 image
- if you upload the banner Flickr allows you to slightly reposition the banner. Don't do that, it did not work well for me. You should rather try to edit the original image (move the visible part upwards/downwards) as long it is on the right position.

Cheers
Adam

Re: Preparing Flickr banner images

Posted: Thu Oct 24, 2013 9:50 am
by renagrade
Luckily for me, mine worked out almost perfectly the first try! :D I have experience with the painstaking old YouTube banners though, so that might be why :spin: