How to make a banner

kriyababaji

I am really new to this whole website development thing, please have patience.

To start with I would like to design a nice text only banner for my home page.


Do I ....

1. Design this in photoshop?

2. Save it as a jpeg?


How do I...

1. import, paste, drag? this banner once completed onto my home page?

2. Have it appear as text only with no background layer, I just want some lighter colored text to be placed upon the dark color background of the "Earth Theme", how?

3. Size it. Do I use font sizes to determine this or is it determined by the jpeg file size.

Thanks so much for your help.

KB

Andy

kriyababaji wrote:

Do I ....

1. Design this in photoshop?

yes.

2. Save it as a jpeg?

yes. or no. You can also make it a transparent png, so it sits over top of everything. Once you have some design to show us, we can further advise on that.

How do I...

1. import, paste, drag? this banner once completed onto my home page?

follow the simple instructions in my FAQ
http://www.dgrin.com/showthread.php?t=26043
http://www.smugmug.com/help/create-photo-album

2. Have it appear as text only with no background layer, I just want some lighter colored text to be placed upon the dark color background of the "Earth Theme", how?

That's the transparent png thing. OK - so work using a transparent bg in photoshop (new doc, 800px by say, 100px, transparent background).


also, a little bit of googling finds this:

(site:www.dgrin.com make banner photoshop)

http://www.dgrin.com/showthread.php?t=2435
http://www.dgrin.com/showthread.php?t=20106
http://www.dgrin.com/showthread.php?t=31800

and more.... just hoping to help you here

Holler back here with your questions!

kriyababaji

No luck Andy
Nothing I am doing is working with this banner. I created a simple two layer PNG in PS, saved it to my desk top and tried to drag it in to my gallery. The text totally disorted and a white BG appeared behind the mangled text. 8hrs. and nothing! Can I pay you to walk me through this over the phone?

KB

Andy

kriyababaji wrote:

Nothing I am doing is working with this banner. I created a simple two layer PNG in PS, saved it to my desk top and tried to drag it in to my gallery. The text totally disorted and a white BG appeared behind the mangled text. 8hrs. and nothing! Can I pay you to walk me through this over the phone?

KB

I merged your post, let's keep it all to one thread please. Please give us a link to the file you created, let me see it.

Always, always, give us links

kriyababaji

Sorry Andy I don't have a clue what you are talking about. How would a PS file I created have a link? Are you taking about my website address where I tried to place the banner that I created in PS? That link is kriyababaji.smugmug.com, I don't know if this is what you want.

KB

Andy

kriyababaji wrote:

Sorry Andy I don't have a clue what you are talking about. How would a PS file I created have a link? Are you taking about my website address where I tried to place the banner that I created in PS?

OK let's step back.

You cannot have a banner on your smugmug site unless it's stored online. So, where have you uploaded your banner? Give us the link.

Like my banner on http://davidrosenthal.smugmug.com/ is like this:

http://davidrosenthal.smugmug.com/photos/73405193-L.jpg

kriyababaji

My smug mug site is..

http://kriyababaji.smugmug.com

Andy

kriyababaji wrote:

My smug mug site is..

http://kriyababaji.smugmug.com

And THIS is a link:

http://kriyababaji.smugmug.com/photos/82014400-O.jpg



OK?

Andy

Andy wrote:

And THIS is a link:

http://kriyababaji.smugmug.com/photos/82014400-O.jpg



OK?

OK see what it looks like now?

http://kriyababaji.smugmug.com/

With a png, you must deal with the ORIGINAL as SmugMug will turn the png to a jpg for -L, -M, -S, etc.

kriyababaji

Wow! Thats exactly what I was looking for. I am sure it was easy, but I didn't follow your explanation, I thought I was dealing with the original, how do I prevent Smug mug for turning it into a jpeg.


Thank you so much for your patience.

Andy

kriyababaji wrote:

Wow! Thats exactly what I was looking for. I am sure it was easy, but I didn't follow your explanation, I thought I was dealing with the original, how do I prevent Smug mug for turning it into a jpeg.


Thank you so much for your patience.

you can't prevent it we always make additional display copies of your originals. But we don't change the original. In the links screen, you get the -L link, and if you want the original, you simply change -L to -O

kriyababaji

More banner concerns
Hi Again Andy

I have snooped aroung alot and can't find the -L link that you speak of. So although I totally appreciate you doing for my, I am no further ahead in being able to do it myself. I also noticed several lines of text in the "css" window, I read the instuctions for designing a custom banner, and it mentions nothing aboutt "css". Sorry to bother you, but the further I get into this the more confused I become.

Is there a way of obtaining phone support, or do you suggest I just bail on this idea of a website?

Andy

kriyababaji wrote:

Hi Again Andy

I have snooped aroung alot and can't find the -L link that you speak of. So although I totally appreciate you doing for my, I am no further ahead in being able to do it myself. I also noticed several lines of text in the "css" window, I read the instuctions for designing a custom banner, and it mentions nothing aboutt "css". Sorry to bother you, but the further I get into this the more confused I become.

Is there a way of obtaining phone support, or do you suggest I just bail on this idea of a website?

We do not do phone support, sorry. We do, however, provide 365 days per year support via Dgrin, and our help desk help@smugmug.com

Why give up? Links are easy:

http://www.smugmug.com/help/photo-community

Go here http://kriyababaji.smugmug.com/gallery/1669635 and view in SmugMug style, then click onthe link that says "share photo: links, forums, blogs" you'll see it instantly.

Aside from Links, what else can we help you with? Be very specific, very detailed, and we'll ALL help you!

kriyababaji

Active menu bar
OK, I found it, maybe in time I will figure out what to do with it.

Next item...

I would like an active menu under my banner, like I see on your website, or I really like the active menu bar of brandolinos website, He also uses the Earth template.

Try to explain as simple as possible and I will try to do it myself. I would ideally like a thin line box around each menu item, Like Brandolino has.
Once these items are on my site can I reposition them.

Thanks so much for your help.

shane

troglodite

kriyababaji wrote:

Nothing I am doing is working with this banner. I created a simple two layer PNG in PS, saved it to my desk top and tried to drag it in to my gallery. The text totally disorted and a white BG appeared behind the mangled text. 8hrs. and nothing! Can I pay you to walk me through this over the phone?

KB

Transparency in PNG's don't work in IE. There is a javascript fix though I would just suggest adding a background layer the same color as the page and saving as jpg. (oops i read on )

You can accoplish the thin line around menu items with a bit of CSS. I'm not sure how that would work in the smugmug templates though (i'm going to switch over to smugmug asap!)

Andy

troglodite wrote:

Transparency in PNG's don't work in IE. There is a javascript fix

That is incorrect :nono

The header in this site is a transparent png:
http://kriyababaji.smugmug.com

and here's the CSS code (no javascript) that does it:

#myheader {
margin-top: 5px;
margin-left: auto;
margin-right; auto;
    width: 800px;
    height: 100px;
    background: url(http://kriyababaji.smugmug.com/photos/82014400-O.jpg) no-repeat;
    _background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingmethod=image,src='http://kriyababaji.smugmug.com/photos/82014400-O.jpg');
}

Andy

kriyababaji wrote:

OK, I found it, maybe in time I will figure out what to do with it.

Next item...

I would like an active menu under my banner, like I see on your website, or I really like the active menu bar of brandolinos website, He also uses the Earth template.

Try to explain as simple as possible and I will try to do it myself. I would ideally like a thin line box around each menu item, Like Brandolino has.
Once these items are on my site can I reposition them.

OK so, please go to the sticky thread in this forum, "So, you're a n00b, eh?" and follow the links to the navbar there. When you do the navbar tutorial, COPY and PASTE the results here and I'll get it on your site for you.

Andy

troglodite wrote:

I don't mean to be argumentative and I only post this with the upmost respect as I could be (and usually am) completely wrong. Please fogive me. :

the image on that site is a jpg (i right clicked and got this here: http://kriyababaji.smugmug.com/photos/82014400-O.jpg)

I've run into this problem designing sites myself, and I personally use the javascript here: http://homepage.ntlworld.com/bobosola/pngtest.htm to fix it. (such as the top navigational images like at http://thinktidal.com/ and http://www.mtharris.com/jsg/ )

If I've interpeted this correctly, It looks like smugmug cleverly transforms the png into jpg which is wonderful. I think it's that kind of clever programming that says a lot about the application and the skill of the developer, another reason to go smugmug!

Open the file in photoshop please, it's a .png

troglodite

Andy wrote:

Open the file in photoshop please, it's a .png

:tiptoe:tiptoe:tiptoe:tiptoe:tiptoe time for me to stop creating useless and incorrect posts....

so... by renaming the image to .jpg are you fooling the browser? I'm thoroughly confused now!

Andy

troglodite wrote:

:tiptoe:tiptoe:tiptoe:tiptoe:tiptoe time for me to stop creating useless and incorrect posts....

so... by renaming the image to .jpg are you fooling the browser? I'm thoroughly confused now!

No, the O is always a png. In the css, i'd mistakenly called it a jpg, and so you saw that when you viewed the header image. Check that again, it's now .png

We use the alpha png fix to display pngs in IE. Standard stuff....

kriyababaji

Navbar help
Hi Andy

I found the tutorial, where do I do it? Do I do it in the....Control panel>customize and organize>CSS window? There is already stuff in the CSS window that you have created, that needs to stay, correct? Do I put the navbar stuff under that?

Hopefully you can follow my dribble

thanks shane

Andy

kriyababaji wrote:

Hi Andy

I found the tutorial, where do I do it? Do I do it in the....Control panel>customize and organize>CSS window? There is already stuff in the CSS window that you have created, that needs to stay, correct? Do I put the navbar stuff under that?

Hopefully you can follow my dribble

thanks shane

Shane, please re-read my post above, #17: http://www.dgrin.com/showpost.php?p=345842&postcount=17

Do the tute. Copy and paste the results here, I'll put them in for you and then we can style things.

kriyababaji

Still not sure
I understood what you said. I still don't know where to do the tute? In a word processor program?

thick as cement, shane

Stustaff

You can write it initially in anything that does plain text! Wordpad or notepad ideally, word is not worth it.

Then when you have it just paste your text in here.

Andy

kriyababaji wrote:

I understood what you said. I still don't know where to do the tute? In a word processor program?

thick as cement, shane

Shane, the tutorial will give you output, on your monitor, on the website - you COPY it and PASTE it here.

kriyababaji

Navbar info ready
Good Day Andy

Well I followed it as closely as I could, and embedded the links I found important for my site, I hope it is correct Text color and background, I don't have a clue how to do. I would like a lighter text the same or similar to the color in "wild earth" used in my banner, as well as the outlined box for the navbar. The background could be the same as the earth template color.

If this is not too difficult I would like to have a go at it. Write the instructions as "lay" as possible please, I will stumble on the simplist assumption on your part.

Thank you heaps for all your help.

shane

Here it is..

CSS CODE
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;

}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}

HTML CODE
<div id="navcontainer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Image Galleries</a></li>
<li><a href="#">Purchase Prints</a></li>
<li><a href="#">The Photographer</a></li>
<li><a href="#">Published Works</a></li>
<li><a href="#">Workshops/Courses</a></li>
<li><a href="#">Photography Tech Tips</a></li>
<li><a href="#">Wildlife Photography</a></li>
<li><a href="#">Landscape Photography</a></li>
<li><a href="#">My Gear</a></li>
<li><a href="#">Most Popular</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Links/News</a></li>
</ul>
</div>

I think because I have so many navbar topics the nave bar should maybe be split into two rows?

I think I was supposed to include this http://www.kriyababaji.smugmug.com/