HI, am designing a banner for my site...
or http://www.homeofsolarenergy.com/image-files/solarcustomersbanner.png
this right now is to the best of my ability...

any ideas how I can make it look much more "sexy", more professional?

like this one??


with some professional look, some glamour?

I have no idea

Thanks a lot

Daniel

[moderator edit -- fixed image url]

Can you update your image link so we can see what you mean?

The other banner doesn't seem too complex, two rectangles with gradients in fill and some text formatting over it.

oh...

sorry
next try

Try adding vertical gradients to the rectangle fills, like in the example you showed, it will add depth. Play with colors of the gradient stops until you get the nice light effect. You can use the darker text color with the lighter gradient stop behind it like in the example, this is the part you want to be most prominent.

If you haven't used gradients before try reading about them in the guide

You could also use some easy shadows and highlights to make it pop a little. In the quick mockup I did below I used a rectangle with rounded corners to clip the whole background. I used a duplicates of the rounded rectangle to make the highlight and shadow. Then I used a final duplicate of the rounded rectangle to clip the whole thing to keep the blur from the highlight/shadow clean. I'm not the biggest fan of the color combination, though I tried to keep it as close to your original as I could by eyeballing it.

I would work on the copy a little. You have odd sentence structures and random capitalization.

I think llogg's version is already more "sexy" than the example you were comparing yours to. I would also use: a button for the "click here", some more variety in your fonts, and DEFINITELY change your copy!!!

For example, "Need customers for your renewable energy business? Want to make your company the leader in your market?"
Then change the font for "SolarCustomers" to a high impact display font - or give it a font effect like a drop shadow or a curve ... "The proven marketing method" should really follow the company name right here, and "Build your customer base!" should be moved up to before the company name ...
The bottom could be condensed into, "Get a free introductory 30 min consultation" and then a "click here" button, or just a, "click here for a free 30 minute introductory consultation" which is really long, so you could even leave the 'introductory' out..

I fixed the image url in original message

wow, what a great forum!!!

gals (?) and guys (?), I am humbled by the helpfulness here! Thanks a million!

@prkos: since I not even had an idea what to look for in the manuals, I will now start to read the right chapters Thank you
@llog: tank you so much for your time and work! This definitely looks much more sexy, though I could not redo it right now...more reading to do and yes, I agree absolutely on copy, color etc. ... hmmm ... will work on it
@druban: thank you so much for even giving me wording help! ...honestly I have no idea how to add a button right now, though
and since the server I use does not support svg I think I cannot make something like a clicking button or mouseover etc work...
hmmm, more reading to do
@brynn: I tried my best to include that image but couldn't manage...thanks!! what is still wierd for me is that I cannot open this thread after posting (not even find it) until my post has been approved ??

Thanks again...
"I'll be back!"

Daniel

You couldn't find your post because the first 2 posts that a new user makes aren't published immediately to stop spam from being visible, so we approve them manually. After you've had two posts published there are no more delays.

You can create a button very quickly using the filters, try creating a rounded rectangle, duplicate it a number of times and apply any of the filters under Filters > Bevel, try each on the copied object and see which one you like best. Here you can see a similar experiment with all the filters tested: http://c-quel.deviantart.com/art/Inksca ... -143226196

Here's a quick step by step to achieve the simple effect I used:

1. Using the rectangle tool draw your two colored rectangles and align them top to bottom using Object>Align&Distribute or ctrl+shift+A. With both rectangles selected group them (Object>Group or Ctrl+G).

2. Again using the draw the rectangle with rounded corners. The rounded corners are achieved by dragging the circular "node" when using the . You should copy the dimensions of your Group from step 1.

3. Duplicate the rectangle from step 2 and select it and the group from step 1. Align the centers of the two objects.

4. Do Object>Clip>Set.

5. Make another duplicate of the rounded corner rectangle and do Path>Object to Path (Ctrl+Shift+C). Duplicate this path. I have changed the color of the duplicate path to make it more obvious what I am doing, but this is not necessary.

6. With both paths selected do Path>Difference (Ctrl+-). This is the basic shape of your highlight and shadow. You can change the fill color, blur, and transparency in the fill and stroke dialogue as suits you to achieve your desired look.

7. For the highlight I have a white fill with blur set to 6 and transparency 85%. I duplicated this object and rotated it and changed the fill to black with the same blur and transparency for the shadow.

8. Here I've just added a darker background so you can see that the blur of the highlight and shadow spill outside the edges of our basic rounded rectangle shape.

9. We correct that by grouping the highlight and shadow with the basic two-tone shape. Then select that group and the rounded rectangle shape, align center and middle.

10. Object>Clip>Set trims the highlight/shadow to the basic shape.

11. You can add your text on top of this, though adding it before the highlight/shadow may give a better result (since the highlight/shadow will appear to affect the text as well as the underlying box. I did it this way for the tutorial to avoid cluttering the basic process.

That's it. There are lots of "shiny button" and "crystal button" tutorials out there if you google them for other ideas on how o make this pop out a little more from the background. Good luck.



For practice you can add a step after 10 that is not illustrated:
10.5. Take a duplicate of your curved rectangle, align it with the finished shape and put it in a layer above the current layer. Change the fill to gradient and use the gradient tool to make a diagonal gradient with a light colored stop in the top left and a dark stop in the bottom right. Set the layer mode to screen.

Although the tutorial was made with version 0.46 of inkscape, take a moment to look at HeathenX's video tutorial on how to make a Case Badge (http://screencasters.heathenx.org/tag/case-badge/). I think it will show you some techniques that will help you get the look you are after.

Darth_Gimp

You've already gotten great advice on here, so will just add a couple thoughts. I would definitely have you check out and use different fonts, you can download from many free sources (just make sure they are also for use commercially). One place to check is here: http://www.dafont.com/ You can google to see more sites too.
Also, I would make the bottom portion (FREE 30 min consultation) a separate item, and maybe clickable.
Even though browsers don't support SVG's yet, what we do is make the graphics in Inkscape (or a combo of programs), then convert the file to a PNG, EPS, JPG, GIF, etc for use on a website.
good luck. be sure to show us what you end up with.
dee

Hi all,

sorry for coming back so late... I used your input here to come up with a new version (see my first post, it automatically updates)...

this is for me lightyears better than the first version..

illog, wow, thank you so much for all the work you put into this, I learn a lot from it, though since no mail came informing me about new posts I did my above version mostly with a youtube video... I will now do a even better version with your great input!! Again Thanks!

Also to you, dark_gimp for your tip, will go there and watch it...

flamingolady, thanks for your ideas...why would you use different fonts?
concerning being clickable, I made the whole banner being clickable...would you only make the red button itself clickable?? and how? I already save my work then as a png for putting it up on my website...

Again to all, thank you so much

Daniel

oh, by the way, how can I make the "corners" invisible, when I use the rounded corners...I mean how can I make the gap between rounded corner and image border invisible (opaque?)...

thanks again

Daniel

File>Document Properties>Page make sure background is transparent. I think that's what you want (invisible is actually the opposite of opaque). Looking at what you've done at the top of the thread, I think you need to use some gradients. Select the path at the top (the lighter yellow) and use to add a gradient that goes from 100% opacity to 0% opacity with the 0% at the top. You may have already done that at the bottom, it's hard to tell on my screen. You may want to try using blur on these highlight paths.

make sure background is transparent

thanks, but what if it not transparent...can I make it transparent (=0% opaque??) somehow later?

Thanks a lot

Daniel

I'm not sure if llogg might have misunderstood your question??

I don't understand what you mean by

oh, by the way, how can I make the "corners" invisible, when I use the rounded corners...I mean how can I make the gap between rounded corner and image border invisible (opaque?)...

or else I would offer a comment. Probably better I don't since I haven't followed this topic in detail. But maybe clarification would help, in any case.

Hi brynn,

thanks!

I am having still problems with the rounded corners (and others graphics) not being invisible (0% opaque??), so that on backgrounds other than white I (+you) can see the corners still. So it is not transparent automatically when rounding the corners.

In gimp I found the rubber, which makes areas really transparent.

So how can I do this in Inkscape, and how can I make a background transparent later or in the first place??

Thank you

Daniel

Oh ok, I think I understand what you're asking. And llogg is right. It sounds like you just need to make the background transparent. Although it depends on how you made the corners round. First try this -- go to Document Properties > Page tab > General. Where it says "Background" and there's a white bar, click on the white bar. If there is no white bar, but instead it is checkerboard, then the background already is transparent, and you don't need to do anything. But if it's white, click on it. This will bring up a small dialog (called Background Color) where you can adjust color and transparency. Next to the "A" is a slider, which needs to be all the way to the left, so that there is a 0 (zero) shown on the right side of the A row. After you close the little Background Color dialog, you'll see that the white bar is now a checkerboard pattern (the only place in Inkscape where the checkerboard pattern is used to show transparency, because even though Inkscape canvas backgrounds are transparent by default, the canvas still looks white).

If the bar in Document Properties already was checkerboard before you changed it, then we need to know how you created the rounded corners, to try and figure out why the squared off corners are still showing.

Also, you said other graphics are visible that you don't want to see? What are they, or can you post your image to show us?

Aww, what the heck.

Here's my tinkering with the banner.

My thought was: There are so many banners on the web, gotta try to make it stand out.

While this probably won't be used as a functional banner, the ideas were:

1. make it stand out
2. give the name some kind of thought-out logo
3. reduce the text, right down to removing Click Here. I mean!! It's the Internet!! We click too many things as it is!!

HI all,

@brynn: Thank you so much... haven't really tried it yet, but will after I come back...
@BobSongs: wow, thanks a million... the colors are unused to, but would love to give it a try after I am back from my voyage... but I am honored you took your time...!!
May I use it and report back then?

Daniel

Feel free to suggest different colours for the background.

I'll gladly supply the ad with the new colours.

=)

HI Bob,

so sorry, was off for a seminar (well, and had some vacation)...so took me longer than planned!! but now I am rested!

Again, thank you soo much...

right now, all I "refrain from" liking is the piggie pink...do you think a more aggressive, "renewable" color could work even better? like orange or green...

or shall we test this one first for CTR?

Again, I really appreciate your support!!

This is a great forum!!

Daniel

Might have a look here:
http://www.quixo.com/graphic_design_tips.html

Here are a few relativities to consider.
Why should they read it: Many people look at an ad first and read the words maybe if ever - what does the ad tell you/them if no one reads the words at all?
Consider adding some photo images along with the vector or give them some reason to actually read the ad.

Symbolic relationship: is there something that your audience will immediately recognize to tell them this is an ad for them?
Most people do not read all the ads, only the ones they sense are pertinent.

Colors: There are symbolic colors that indicate a GREEN ad like sky blue or a green field/plants green or the sun yellow.

No more no less: Does the ad tell them what they need to know, no more or less? What, where, when and how are the classic starting points.
Be careful to not use ad space on anything that will have no meaning to them like names/words/brands they could have no previous exposure to if they would have no meaning to them.
Example: "Ysedes 34ew3 You know you want it" - This is unlikely to pull anyone in if they have never heard of it and even more so if it gives no indication of what it is or even for.

Here is a banner I created not to long ago for a friend - I did not create the logo:



For this ad I wanted to appeal to the niche audience that would normally like the product but perhaps not know where where to buy it on-line.
I tried to use colors that would match what they would expect to see. The logo is perfect for the symbolic relationship that tells them "yes, this ad is for you".
This images show them WHAT the web address shows them where and in effect how.