Menu
Forums
All threads
Latest threads
New posts
Trending threads
New posts
Search forums
Trending
What's new
New posts
New profile posts
Latest activity
Members
Current visitors
New profile posts
Search profile posts
Upgrades
Log in
Register
What's new
Search
Search
Search titles only
By:
All threads
Latest threads
New posts
Trending threads
New posts
Search forums
Menu
Log in
Register
Navigation
Install the app
Install
More options
Contact us
Close Menu
Forums
Server Development
Habbo Retros
Habbo Tutorials
How to make Toplist Retro Banners
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="Notorious" data-source="post: 266568" data-attributes="member: 13602"><p>Have you ever wanted to make your own toplist banner? Now's your chance, I'll be giving a basic tutorial on how you can achieve that. There's a few programmes you can use, I personally use Paint.Net & their custom plugins, they provide excellent tools for a free software. The plugins are an option, they provide the necessary tools to construct premium quality banners. Can't construct a background for your banner? There's tons of templates released by myself. Now let's get started with the downloads.</p><p></p><p style="text-align: center"><span style="color: red">---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span></p><p></p><ul> <li data-xf-list-type="ul">Software (Paint.Net): <a href="http://goo.gl/VynJ8i" target="_blank">http://goo.gl/VynJ8i</a></li> <li data-xf-list-type="ul">Software Plugins (First Pack): <a href="http://goo.gl/Pwc2d4" target="_blank">http://goo.gl/Pwc2d4</a></li> <li data-xf-list-type="ul">Banner Templates: <a href="http://goo.gl/p59elx" target="_blank">http://goo.gl/p59elx</a></li> <li data-xf-list-type="ul">Boarder Template: <a href="http://goo.gl/akZg3z" target="_blank">http://goo.gl/akZg3z</a></li> <li data-xf-list-type="ul">Volter Font: <a href="http://goo.gl/3YFhV3" target="_blank">http://goo.gl/3YFhV3</a></li> <li data-xf-list-type="ul">Logo Generator: <a href="http://goo.gl/XeFkHP" target="_blank">http://goo.gl/XeFkHP</a></li> </ul><p></p><p style="text-align: center"><span style="color: red">---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span></p><p></p><p>Install the software & plugin.</p><p>Download the Volter Font. You'll get a zip file, double click the file. You'll see one file, double click the file. Let your computer extract the TrueType font file. A page will flash up showing the font, at the top left, you'll find an install button, click the button and be patient. If you're having troubles, follow the images.</p><p></p><p><img src="http://i.imgur.com/oDnCQDV.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p><img src="http://i.imgur.com/QoqhuIG.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p><img src="http://img841.imageshack.us/img841/523/i315.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p style="text-align: center"><span style="color: red">---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span></p><p></p><p>Now that you've got the font installed, go ahead and open paint, Copy the banner from the page, click back on Paint.net and click the paste button or Ctrl+V. Now crop the image (red) & deselect the image (yellow). Sometimes cropping automatically deselects the image.</p><p></p><p><img src="http://i.imgur.com/Utp8FsN.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p><img src="http://img849.imageshack.us/img849/7105/g4i1.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p style="text-align: center"><span style="color: red">---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span></p><p></p><p>Now prepare yourself for hell, this is the slightly difficult part for people who has never used this software. Create a new layer (red) paste the boarder template over the banner background, even though there's already one attached.</p><p></p><p><img src="http://i.imgur.com/ZyzqtRV.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p><img src="http://i.imgur.com/35kx9VM.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p style="text-align: center"><span style="color: red">---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span></p><p></p><p>Rename Layer 2 by double clicking it. A small box will pop up, replace the name Layer 2 with Boarder, to keep things organized. Then click OK & deselect the image.</p><p></p><p><img src="http://img163.imageshack.us/img163/3076/gack.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p style="text-align: center"><span style="color: red">---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span></p><p></p><p>Click the background layer, add a new layer. And like before, rename the layer to Gradient, this is the part we start getting creative. Select two colours you want.</p><p></p><p><img src="http://img844.imageshack.us/img844/2205/3lrt.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p><img src="http://img198.imageshack.us/img198/2539/dg8y.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p style="text-align: center"><span style="color: red">---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span></p><p></p><p>Now click the gradient tool. Drag it across the the image till you find it perfect, there's other options with the gradient tool, so you decide how you want it done.</p><p></p><p><img src="http://i.imgur.com/P0JRoub.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p><img src="http://i.imgur.com/4VxnDvs.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p><img src="http://i.imgur.com/daAnZft.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p style="text-align: center"><span style="color: red">---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span></p><p></p><p>Now that you got the colours overlapping the background, double click the Gradient layer. At the bottom of the pop-up, you can find an opacity bar, drag it sidewards till you find the background visible & also effective. Then click OK, how does the banner look now? If you're unsatisfied, you can always undo.</p><p></p><p><img src="http://img571.imageshack.us/img571/8937/m7nc.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p><img src="http://i.imgur.com/UA5bp2a.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p><span style="color: red"><strong>Now here comes the weird part, so try and keep up. If you have the correct plugins, you'll follow through easily. This is just an addon, you don't really need to do this.</strong></span> Create a new layer, and rename it highlight. Click the effects bar at the top, hover over the render button. There's an arrow pointing down under GenTree. Find the Highlight tool.</p><p></p><p><img src="http://i.imgur.com/pq3EglR.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p><img src="http://img854.imageshack.us/img854/5928/8t0y.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p style="text-align: center"><span style="color: red">---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span></p><p></p><p>Create another layer and name it Box. Select the square tool, at the top left, you'll find the Tool button with the square to the right, further right there's usually a line shaped in circle & rectangle. the box and click draw filled shape. Drag the square into the box layer, using the boarder template as a guide. Double click the Box layer, change the opacity to 175, or drag the bar.</p><p></p><p><img src="http://i.imgur.com/l5KrFMn.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p><img src="http://i.imgur.com/lqmOWcJ.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p><img src="http://i.imgur.com/sFtSIAT.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p><img src="http://i.imgur.com/RTOiXZW.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p style="text-align: center"><span style="color: red">---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span></p><p></p><p>Select white as your primary colour, create a new layer, layer in between the text and boarder layers, and name it Text. Click the T on the tool bar, select the font Volter, size 7. Then Antialiasing disabled. Now you can write down anything related to your hotel. Then click effects, find the object button, then the drop shadow tool. Keep the widening radius 1, and the blur radius at 0.</p><p></p><p><img src="http://i.imgur.com/O2sn7Qd.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p><img src="http://i.imgur.com/Bt3Joxg.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p style="text-align: center"><span style="color: red">---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span></p><p></p><p>Create the last layer, and rename the layer to Logo, you can now paste in your logo. This is the final part for the basic tutorial. If you want your logo to be a certain colour, click Adjustments at the top, left to effects. Find the Hue/Saturation plugin, and slide the bar around till you find the colour you want. When you're finished, press Ctrl + Shift + F, to flatted the layers together. Save as .PNG and upload. You've made a simple banner! Fiddle around with the tools and eventually, you'll become used to the tools.</p><p></p><p><img src="http://i.imgur.com/ToF628j.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p><img src="http://i.imgur.com/mkscc13.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p><img src="http://i.imgur.com/jHNtMa5.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p style="text-align: center"><span style="color: red">---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</span></p></blockquote><p></p>
[QUOTE="Notorious, post: 266568, member: 13602"] Have you ever wanted to make your own toplist banner? Now's your chance, I'll be giving a basic tutorial on how you can achieve that. There's a few programmes you can use, I personally use Paint.Net & their custom plugins, they provide excellent tools for a free software. The plugins are an option, they provide the necessary tools to construct premium quality banners. Can't construct a background for your banner? There's tons of templates released by myself. Now let's get started with the downloads. [center][color=red]---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------[/color][/center] [list][*]Software (Paint.Net): [url]http://goo.gl/VynJ8i[/url] [*]Software Plugins (First Pack): [url]http://goo.gl/Pwc2d4[/url] [*]Banner Templates: [url]http://goo.gl/p59elx[/url] [*]Boarder Template: [url]http://goo.gl/akZg3z[/url] [*]Volter Font: [url]http://goo.gl/3YFhV3[/url] [*]Logo Generator: [url]http://goo.gl/XeFkHP[/url][/list] [center][color=red]---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------[/color][/center] Install the software & plugin. Download the Volter Font. You'll get a zip file, double click the file. You'll see one file, double click the file. Let your computer extract the TrueType font file. A page will flash up showing the font, at the top left, you'll find an install button, click the button and be patient. If you're having troubles, follow the images. [IMG]http://i.imgur.com/oDnCQDV.png[/IMG] [img]http://i.imgur.com/QoqhuIG.png[/img] [img]http://img841.imageshack.us/img841/523/i315.png[/img] [center][color=red]---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------[/color][/center] Now that you've got the font installed, go ahead and open paint, Copy the banner from the page, click back on Paint.net and click the paste button or Ctrl+V. Now crop the image (red) & deselect the image (yellow). Sometimes cropping automatically deselects the image. [img]http://i.imgur.com/Utp8FsN.png[/img] [img]http://img849.imageshack.us/img849/7105/g4i1.png[/img] [center][color=red]---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------[/color][/center] Now prepare yourself for hell, this is the slightly difficult part for people who has never used this software. Create a new layer (red) paste the boarder template over the banner background, even though there's already one attached. [img]http://i.imgur.com/ZyzqtRV.png[/img] [img]http://i.imgur.com/35kx9VM.png[/img] [center][color=red]---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------[/color][/center] Rename Layer 2 by double clicking it. A small box will pop up, replace the name Layer 2 with Boarder, to keep things organized. Then click OK & deselect the image. [img]http://img163.imageshack.us/img163/3076/gack.png[/img] [center][color=red]---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------[/color][/center] Click the background layer, add a new layer. And like before, rename the layer to Gradient, this is the part we start getting creative. Select two colours you want. [img]http://img844.imageshack.us/img844/2205/3lrt.png[/img] [img]http://img198.imageshack.us/img198/2539/dg8y.png[/img] [center][color=red]---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------[/color][/center] Now click the gradient tool. Drag it across the the image till you find it perfect, there's other options with the gradient tool, so you decide how you want it done. [img]http://i.imgur.com/P0JRoub.png[/img] [img]http://i.imgur.com/4VxnDvs.png[/img] [img]http://i.imgur.com/daAnZft.png[/img] [center][color=red]---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------[/color][/center] Now that you got the colours overlapping the background, double click the Gradient layer. At the bottom of the pop-up, you can find an opacity bar, drag it sidewards till you find the background visible & also effective. Then click OK, how does the banner look now? If you're unsatisfied, you can always undo. [img]http://img571.imageshack.us/img571/8937/m7nc.png[/img] [img]http://i.imgur.com/UA5bp2a.png[/img] [color=red][b]Now here comes the weird part, so try and keep up. If you have the correct plugins, you'll follow through easily. This is just an addon, you don't really need to do this.[/b][/color] Create a new layer, and rename it highlight. Click the effects bar at the top, hover over the render button. There's an arrow pointing down under GenTree. Find the Highlight tool. [img]http://i.imgur.com/pq3EglR.png[/img] [img]http://img854.imageshack.us/img854/5928/8t0y.png[/img] [center][color=red]---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------[/color][/center] Create another layer and name it Box. Select the square tool, at the top left, you'll find the Tool button with the square to the right, further right there's usually a line shaped in circle & rectangle. the box and click draw filled shape. Drag the square into the box layer, using the boarder template as a guide. Double click the Box layer, change the opacity to 175, or drag the bar. [img]http://i.imgur.com/l5KrFMn.png[/img] [img]http://i.imgur.com/lqmOWcJ.png[/img] [img]http://i.imgur.com/sFtSIAT.png[/img] [img]http://i.imgur.com/RTOiXZW.png[/img] [center][color=red]---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------[/color][/center] Select white as your primary colour, create a new layer, layer in between the text and boarder layers, and name it Text. Click the T on the tool bar, select the font Volter, size 7. Then Antialiasing disabled. Now you can write down anything related to your hotel. Then click effects, find the object button, then the drop shadow tool. Keep the widening radius 1, and the blur radius at 0. [img]http://i.imgur.com/O2sn7Qd.png[/img] [img]http://i.imgur.com/Bt3Joxg.png[/img] [center][color=red]---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------[/color][/center] Create the last layer, and rename the layer to Logo, you can now paste in your logo. This is the final part for the basic tutorial. If you want your logo to be a certain colour, click Adjustments at the top, left to effects. Find the Hue/Saturation plugin, and slide the bar around till you find the colour you want. When you're finished, press Ctrl + Shift + F, to flatted the layers together. Save as .PNG and upload. You've made a simple banner! Fiddle around with the tools and eventually, you'll become used to the tools. [img]http://i.imgur.com/ToF628j.png[/img] [img]http://i.imgur.com/mkscc13.png[/img] [img]http://i.imgur.com/jHNtMa5.png[/img] [center][color=red]---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------[/color][/center] [/QUOTE]
Insert quotes…
Verification
Post reply
Forums
Server Development
Habbo Retros
Habbo Tutorials
How to make Toplist Retro Banners
Top