CUSTOM BANNERS FOR CUBITS - DETAILS! forum: Cubit Banners 101 - How to Make Your Own

Views: 90, Replies: 18 » Jump to the end
ImageBlissfulGarden
Feb 17, 2010 10:59 PM CST
Name: Evey Blalock
South Louisiana / Zone 8b

Thought I'd post a little bit here about how to make your own custom banner. Here is the roses graphic. It was my absolute FAVORITE for editing so far, and the beginning photo made a big difference in the end result. Zuzu took the photo, Sue chose the photo, I edited the photo and then Sue loaded it up. A community effort! But, what I think made the biggest difference was Sue's selection... it was really easy to work with to make it blend into the black background. Here's what I started with for editing:

Thumbnail by BlissfulGarden

ImageBlissfulGarden
Feb 17, 2010 11:00 PM CST
Name: Evey Blalock
South Louisiana / Zone 8b

See how it has dark on the edges? Well, that makes it easier to blend into black. I chose the area I wanted to highlight by making a transparent outline box that was 125 high and then moved it around on the photo to see what "view" looked the best for the header, then cropped to that size. Then, I removed the outermost partial leaves in the photo and replaced with black. See the areas in the photo with the red boxes? Those were blended to a solid black.

Thumbnail by BlissfulGarden

ImageBlissfulGarden
Feb 17, 2010 11:00 PM CST
Name: Evey Blalock
South Louisiana / Zone 8b

Then, after the black was created, I had to add some to the far right flower so that it looked like a complete flower. I just looked around the photo for another flower with a right edge and cut and pasted it in.

So, the photo edge on the left of the pic below became the edge on the right after edits:

Thumbnail by BlissfulGarden

ImageBlissfulGarden
Feb 17, 2010 11:00 PM CST
Name: Evey Blalock
South Louisiana / Zone 8b

And on the left side, this is what the changes looked like. The photo on the left below is the original left edge, and the photo on the right is the edited version.

Thumbnail by BlissfulGarden

ImageBlissfulGarden
Feb 17, 2010 11:01 PM CST
Name: Evey Blalock
South Louisiana / Zone 8b

So the end result, once I added in the area for the menu buttons to cover, looks like this:

Thumbnail by BlissfulGarden

ImageBlissfulGarden
Feb 17, 2010 11:01 PM CST
Name: Evey Blalock
South Louisiana / Zone 8b

Here's another example... In this example, threegardeners chose a fantastic photo for the start. It had a very dark background, so it was easy to blend the far left (outlined on this example with a red box) into solid black and then add a left border.

Thumbnail by BlissfulGarden

ImageBlissfulGarden
Feb 17, 2010 11:02 PM CST
Name: Evey Blalock
South Louisiana / Zone 8b

You could do the same thing with a white background, or any other color that dominates the background of your photo.

Here's another example. I was considering for my own cubit, but then I settled on something else. In this example, I deleted the extraneous leaves on left and right and then added a cartoon in the center. You could add words or whatever you want. Just make sure that whatever you add to your banner is YOUR OWN WORK. We don't want to create a website of copyright enfringements, right?!?!

Thumbnail by BlissfulGarden

ImageBlissfulGarden
Feb 17, 2010 11:05 PM CST
Name: Evey Blalock
South Louisiana / Zone 8b

Okay, one more example since I've gotten a lot of email on this: Using just one photo in a banner.

As some of you might have noticed, I tried to do this with a graphic for Ella (Starlight... Ella's Garden). She wanted it on the far right of the banner, so that's where I put it. It looked fine in my browser, but on her browser it didn't display well. That's because the banner will load from left to right to the width set in each person's browser. (I should have thought of that from the beginning!) So, you really can't right-justify a graphic for your header because many of your viewers won't see what you think they will.

So how do you put a photo on the left with the Cubit.org showing up there? Well, that will take a little trial and error with each photo. Make your banner with a solid left margin, and a wider solid right margin. The total header size is 125 x 1200 pixels. Then play around with photo placement, load it up and see if it looks nice to you. Here's the photo I started with for Ella, which was taken by Seedsower:

Thumbnail by BlissfulGarden

[Last edited Feb 26, 2010 3:44 PM CST]
Quote | Post #50035 (8)
ImageBlissfulGarden
Feb 17, 2010 11:05 PM CST
Name: Evey Blalock
South Louisiana / Zone 8b

I edited the photo some to make the seat wider and a bit more horizontal, and then cropped to a 150 pixel height. After the photo was what I wanted, I placed it on a green background header and added words. The placement on the header can make a big difference when uploaded. For a left-anchored photo, I think it looks best if you can position the right edge of the photo so that it lines up with the end of the menu buttons on top. Visually, it's less clutter. The area I'm talking about has a red box around it in this photo:

Thumbnail by BlissfulGarden

ImageBlissfulGarden
Feb 17, 2010 11:06 PM CST
Name: Evey Blalock
South Louisiana / Zone 8b

So, here is the finished image:

Thumbnail by BlissfulGarden

ImageBoopaints
Feb 22, 2010 2:46 PM CST
Name: Becky Capps
Phoenix, AZ 85022
finding joy one day at a time!
WOW! You are so good at this. Beautiful rose and cat and chair...all wonderful!
ImageBlissfulGarden
Feb 22, 2010 3:04 PM CST
Name: Evey Blalock
South Louisiana / Zone 8b

Thanks! I'm hopeful that some of the example in this cubit will generate ideas for others! =)
Imagehaighr
Feb 24, 2010 8:31 PM CST
Name: Candee Gaye
Western Maryland
Been there, Done that!
Fabulous work there! What sizes are suggested for the top box (the one below the header) - I think Dave said he recommended no photo there but I see a lot of folks have one. I did 2 but in different screens it was sometimes too large so I need to go back and work on another one. Would you think about 125 x 600 pixels for the screen box?
Put your hands to work in these cubits: Arrangements 101 and/or Hands at Work
Share your travels with us at: Travel Junction - Contest
ImageBlissfulGarden
Feb 24, 2010 9:51 PM CST
Name: Evey Blalock
South Louisiana / Zone 8b

Candee, the reason Dave recommended no photo there is because the banner will display full width on any browser, but the Top Info Box resizes itself depending on the browser width set by each viewer. So, what may look perfect on your browser will look odd on the next person's browser. And, if your graphic is wider than the width set by someone, then the graphic pushes the side of the box out and displaces the next column!

If you still want to put a graphic there, you can determine the size to fill the box in your own browser by taking a screen shot. Just take a screen shot with the window set to the size you desire. Paste that shot into your graphics program and then crop the picture to be JUST the box or area you want to fill with your graphic. Then, check the canvas size of that remaining image and that is the size of the graphic you will create.

HTH! Evey =)
lakesidecallas
Mar 13, 2010 11:59 AM CST
Name: Susan B
East TN
Thanks Evey, this really helps! I have two questions...

Do you have a graphics editor you can recommend? I've never used one, and there are so many, with so many different prices, I'm just lost!


My second question is about uploading the photos. I think you have to put them "somewhere"?? first, and then link the URL? Any suggestions for that?
ImageBlissfulGarden
Mar 13, 2010 12:56 PM CST
Name: Evey Blalock
South Louisiana / Zone 8b

There's an image control panel right there among the tools Dave has set up for each of us. You can upload your images there.

As for a graphics editor, I really am not up on current programs that are available. I use an ancient version of Paint Shop Pro.. I haven't even bothered getting the updates for the last seven or eight years. So, what I'm using is far cry from whatever you could purchase today. Sorry I couldn't be more help!
lakesidecallas
Mar 13, 2010 1:46 PM CST
Name: Susan B
East TN
Yes, I didn't know where to find those tools, though.

I found a tutorial in Cubit Themes and Header Pictures that showed me it was in the files upload.
I guess I'm thinking in terms of yahoo groups, where files upload usually means excel or word documents, so I never even looked at that section.

Thanks for trying to help!
ImageBlissfulGarden
Mar 13, 2010 1:53 PM CST
Name: Evey Blalock
South Louisiana / Zone 8b

Just click on your control panel on the top of the right side panel in your Cubit. Then scroll down to the Files Control Panel and click it. You upload there.
ImageDesertPirate
Jun 16, 2010 2:27 PM CST
Name: Rand Lowe
Vista, CA
Philosophy:common sense w/big words
I don't think I'll ever be that good. Great examples Evey! I wish I understood how to cut out part of a photo and put it somewhere else in the banner. I think I need a classroom Rolling on the floor laughing

« Back to the top
« Cubits.org homepage
« Evey's Blissful Banners! cubit homepage
« CUSTOM BANNERS FOR CUBITS - DETAILS! forum

Only this cubit's owners, admins and moderators may reply to this thread.

Evey's Blissful Banners!

CUBIT BANNER DESIGN - Examples and how-to Information for custom banners. Do it yourself... it's easy!

Cubit owner: BlissfulGarden