• New Horizons on Maelstrom
    Maelstrom New Horizons


    Visit our website www.piratehorizons.com to quickly find download links for the newest versions of our New Horizons mods Beyond New Horizons and Maelstrom New Horizons!

Promotional Materials

Definitely a nice idea! Only suggestion I would have is perhaps add a slight colour scale on them, so they aren't completely flat.
Just like the "PiratesAhoy!" text isn't completely flat either.
 
Good idea. See updated image in my previous post. The change is subtle, but I think it looks better already. :)
 
Yep, that'll do it! :onya

So are we all agreed then? Is it time to cut them into tiny little pieces and post them as usable banners? :cheers
 
So... as a proof-of-concept, I've been experimenting with getting this banner to work with links via HTML.
This is much better for sites that support it, instead of cutting the image up like we do on the forum.

You can see an example of this in action on the forum's sliding notice banner (which does support HTML). ;)
I made a shortened version of the banner background to match the 100px-tall notices we currently use, and added the link icons separately.
They're set to float to the right, so even if we remove links (e.g. the IndieDB link isn't needed when using the banner on that site), the remaining ones will still bunch-up in the bottom right corner.
In this case I left out the PA! link.

I've created a new folder on the FTP for promotional images and icons link these: http://piratesahoy.bowengames.com/HeartsOfOak/Promotion/Images/
And here's the HTML code for the banner used above:
HTML: 
<div
style="
width:550px; height:100px; margin-right:auto; margin-left:auto;
background-image: url(http://piratesahoy.bowengames.com/HeartsOfOak/Promotion/Images/HoOBanner550x100Plain.jpg); background-repeat:no-repeat;
">

<a href="http://www.youtube.com/user/PiratesAhoyCommunity"
title="Subscribe to our YouTube channel">
<img src="http://piratesahoy.bowengames.com/HeartsOfOak/Promotion/Images/YT_Icon34px.png"
style="float:right; margin:58px 8px 0px 0px; border:0;">
</a>

<a href="http://www.facebook.com/PiratesAhoyCommunity"
title="Like us on Facebook">
<img src="http://piratesahoy.bowengames.com/HeartsOfOak/Promotion/Images/FB_Icon34px.png"
style="float:right; margin:58px 8px 0px 0px; border:0;">
</a>

<a href="http://twitter.com/piratesahoy_"
title="Follow us on Twitter">
<img src="http://piratesahoy.bowengames.com/HeartsOfOak/Promotion/Images/Twitter_Icon34px.png"
style="float:right; margin:58px 8px 0px 0px; border:0;">
</a>

<a href="http://www.crydev.net/project_db.php?action=project_profile&team_id=6991&project_id=6788"
title="CryDev profile">
<img src="http://piratesahoy.bowengames.com/HeartsOfOak/Promotion/Images/Cry_Icon34px.png"
style="float:right; margin:58px 8px 0px 0px; border:0;">
</a>

<a href="http://www.indiedb.com/games/hearts-of-oak"
title="IndieDB profile">
<img src="http://piratesahoy.bowengames.com/HeartsOfOak/Promotion/Images/IDB_Icon34px.png"
style="float:right; margin:58px 8px 0px 0px; border:0;">
</a>

<a href="http://www.heartsofoakgame.com/"
title="Hearts of Oak official site">
<img src="http://piratesahoy.bowengames.com/HeartsOfOak/Promotion/Images/HoOLogo165x100white.png"
style="float:left; margin-left:24px; border:0;">
</a>

</div>
And the code for the original-size 150px-tall banner:
HTML: 
<div
style="
width:550px; height:150px; margin-right:auto; margin-left:auto;
background-image:
url(http://piratesahoy.bowengames.com/HeartsOfOak/Promotion/Images/HoOBanner550x150Logos.jpg);
background-repeat:no-repeat;
">

<a href="http://www.youtube.com/user/PiratesAhoyCommunity"
title="Subscribe to our YouTube channel">
<img src="http://piratesahoy.bowengames.com/HeartsOfOak/Promotion/Images/YT_Icon34px.png"
style="float:right; margin:108px 8px 0px 0px; border:0;">
</a>

<a href="http://www.facebook.com/PiratesAhoyCommunity"
title="Like us on Facebook">
<img src="http://piratesahoy.bowengames.com/HeartsOfOak/Promotion/Images/FB_Icon34px.png"
style="float:right; margin:108px 8px 0px 0px; border:0;">
</a>

<a href="http://twitter.com/piratesahoy_"
title="Follow us on Twitter">
<img src="http://piratesahoy.bowengames.com/HeartsOfOak/Promotion/Images/Twitter_Icon34px.png"
style="float:right; margin:108px 8px 0px 0px; border:0;">
</a>

<a href="http://www.crydev.net/project_db.php?action=project_profile&team_id=6991&project_id=6788"
title="CryDev profile">
<img src="http://piratesahoy.bowengames.com/HeartsOfOak/Promotion/Images/Cry_Icon34px.png"
style="float:right; margin:108px 8px 0px 0px; border:0;">
</a>

<a href="http://www.indiedb.com/games/hearts-of-oak"
title="IndieDB profile">
<img src="http://piratesahoy.bowengames.com/HeartsOfOak/Promotion/Images/IDB_Icon34px.png"
style="float:right; margin:108px 8px 0px 0px; border:0;">
</a>

<a href="http://www.heartsofoakgame.com/"
title="Hearts of Oak official site">
<img src="http://piratesahoy.bowengames.com/HeartsOfOak/Promotion/Images/HoO_Icon34px.png"
style="float:right; margin:108px 8px 0px 0px; border:0;">
</a>

<a href="http://www.piratesahoy.net/"
title="PiratesAhoy! forums">
<img src="http://piratesahoy.bowengames.com/HeartsOfOak/Promotion/Images/PA_Icon34px.png"
style="float:right; margin:108px 8px 0px 0px; border:0;">
</a>

</div>

Any thoughts on this?

As for non-HTML banners, I was thinking of just having the HoO/PA! banner followed by the icons shown separately below.
I'll work on a concept for that later.

EDIT: If anyone wants to improve the code I posted, please do. I'm still learning HTML, so my methods are probably not the most efficient. :oops:

EDIT2: Code updated to reflect changes.
 
Last edited:
Oh! I think we can replace all the old stuff in my opening post now too. :doff
 
Yes, I think the crydec project page should be on the banner as well buti think it needs an update, doesn't it?
 
OK, I've added a CryDev icon link to the banner and removed the text links. :onya
Not sure how recognisable the CryDev logo is, but at least the mouse-over text explains it.

ODemuth said:
Yes, I think the crydec project page should be on the banner as well buti think it needs an update, doesn't it?
Click to expand...
What do you think needs to be updated on that page?
 
Nice! Banner is getting a bit full though; now the icons pass over the ship hull. Perhaps we should slide that to the left a bit into the "gap" area.
 
Armada said:
What do you think needs to be updated on that page?
Click to expand...
Banner, images and videos. Everything there should be up to date.

Probably we should make a new post in the Hearts of Oak thread as well? To show everyone what we're doing right now and again tell them that we need more people.
 
Pieter Boelen said:
Nice! Banner is getting a bit full though; now the icons pass over the ship hull. Perhaps we should slide that to the left a bit into the "gap" area.
Click to expand...
Perhaps we could remove the wheel icon link and instead use the HoO logo on the left as the link to the official site.
I'll look into this tomorrow, and try to sort out the non-HTML banners too.

ODemuth said:
Banner, images and videos. Everything there should be up to date.

Probably we should make a new post in the Hearts of Oak thread as well? To show everyone what we're doing right now and again tell them that we need more people.
Click to expand...
We'll have a progress article to post everywhere soon, so that's no problem.
 
I've now edited the banner as planned, making the HoO logo a link to the official site and removing the smaller icon. How does it look?
 
Here's an idea for the standard banner with icon links displayed beneath it:

HoOBanner550x100Logos.jpg


Basically the same idea as the HTML version, as it's flexible enough to add/remove icons without editing any images.
All I've done is edited the icon files to include 8px margins (hence "8m" appended to the file names), so they appear spaced apart when placed next to each other in forum posts and such.

The whole thing may look better centred on the page, though when it does, I can't help but wonder if it would look good with some 'bookend' icons either side of the link icons.
Not sure what would work, but it's a thought.

So how does it look?​
 
My initial reaction is that looks exactly like what it is: A selection of components. But not a general whole.

Your own suggestions do sound like they would address that problem though.
What if, rather than having a white outline around the items, you would use a tiled wood* type look?
That would make them look interconnected and also allows those 'bookends' as you suggest.

* = I know that doesn't work well with the "flat" look. But perhaps something else? Gold? Anything?
 
Last edited:
Ooh, like a plank of wood maybe? With bookends looking like broken ends of the plank? That already sounds quite cool to me... :checklist
 
As the shittiest Paint-based quick-y example:

upload_2014-5-6_17-50-43.png


Red crap to be replaced with something infinitely more stylish, of course! :razz
 
OK, let's see how this looks:

PlankLeftEnd42px.png
PlankRightEnd42px.png


Any good?
 
Cool! Only comments:
- It wouldn't be attached to the main banner, so it would still look like two components.
- Should the icons themselves be made to fit in better with their background? Or not....

Definitely better though. :onya
 
You must log in or register to reply here.
Back
Top