FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
ScoreHero Banner Tutorial (for Photoshop)

 
Post new topic   Reply to topic    ScoreHero Forum Index -> Website Discussion
View previous topic :: View next topic  
Author Message
uSound  





Joined: 24 May 2009
Posts: 1180
Location: Virginia

PostPosted: Wed Feb 09, 2011 5:22 pm    Post subject: ScoreHero Banner Tutorial (for Photoshop) Reply with quote

This is just a general guideline for how I make banners. There are many other way of doing this, and I hope this guide helps you out or at least gives you some ideas!


Banner sizes are usually 300px x 40px.
A few bannermakers have dabbled in a 100px x 40px design (for XXX -specific instrument- FCs) and 600px x 80px (for larger, greater accomplishments).

Pick a program that you're used to using. I use Photoshop and the rest of the guide will be geared towards Photoshop. GIMP is an alternative free program that some people like.


Start with a 300px by 40px file, any background color/type is fine.

Border:

1. I like to make the border first, since that rests on top of all of the other layers. Make a new layer, rename it "border".

2. Grab the Rectangular Marquee Tool ( ) and create a marquee across the entire banner.



3. Go to Edit > Stroke. You want to make a 1px border, make it black, then check the button for "Inside". You can obviously customize this as you see fit.



Text:

4. Using the Text Tool ( ), you'll be adding text (omg) to the banner. Most people place it snugly in the bottom left of the banner, although people do experiment otherwise. The size will vary depending upon how much text the banner requires. The font can be whatever you see fit although the "standard" is Century Gothic, which was what inv4der used to use. Most people find sans serif fonts to be better across the board. In addition to all of this a stroke and coloring is common as well. To do this, I use Blending Options which is found by right clicking (or double clicking) the layer you want to edit. Check the Stroke box along the side and follow the settings below.

Size: 2px
Position: Outside
Color: Black


Now to add color. If you want the text to be a solid color, check Color Overlay. If you want two or more colors faded check Gradient Overlay. You can mess around with these settings as much as you want. (If there's a need for a gradient tutorial to be added, let me know.)

Background:

5. Find whatever image you want for your background and copy/paste it in. I would advise on using images that are hi-res to allow for quality when re-sizing. (Google search for specifically large images.) Make sure your background layer is below your border and text layers.

Instrument Icons:

6. Grab the Rock Band instrument icons here. I organized and zipped the files created by other ScoreHero members so you don't have to go running around trying to find them. (Credit to SaikoSakura, One3Se7en & Prong)

7. Open an icon and re-size it with the Move Tool ( ) (Ctrl/Command + T enables Free Transform, this is a default key shortcut), then drag it over to your banner file, and make more re-sizes if necessary (make sure you're holding Shift to ensure proportional re-sizing). My icons are at 34px by 34 px, but that could vary between people slightly. You should probably add all of the icons into the same file for continuity between your banners, and rename them all accordingly for easy access. Make sure that all of these icons are under the border and text layers but above the background layer.



As you can see above, I have a layer set for when I'm working with OMB/FBFC banners. To do this, click the New Group icon at the bottom of the layer palette, then drag in some duplicate layers of the icons. To duplicate layers, drag a layer toward the New Layer icon. If you select each layer in your OMB/FBFC set you can link them by clicking the Link Layers button.


Link Layers = the chain links
New Group = the folder
New Layer = the piece of paper


8. Now to add color. Use Blending Options with Color Overlay or Gradient Overlay again. Make sure that your Blending Mode is set to Multiply for these.





9. You're going to want to save it as a .PSD file to use as a template, and a .PNG file when you want to share it.




If I've forgotten anything (which I'm sure I probably have) or if something isn't clear to you, don't hesitate to let me know!


Last edited by uSound on Tue May 12, 2015 11:40 am; edited 2 times in total
Back to top
View user's profile Send private message Visit poster's website XBL Gamertag: uSound PSN Name: uSoundSH
TQSG  





Joined: 30 Jul 2008
Posts: 1054
Location: Las Vegas, Nevada

PostPosted: Wed Feb 09, 2011 9:07 pm    Post subject: Reply with quote

Very good tutorial uSound. Perfect for anyone getting into banner-making. Though, I don't think you specified the usual icon size, did you? Or are they resized in the zip-file?

Also, would it be okay to edit in my own tutorial for GIMP in my post instead of making another thread?
_________________


Back to top
View user's profile Wiki User Page Send private message Visit poster's website MSN Messenger PSN Name: TQSG
uSound  





Joined: 24 May 2009
Posts: 1180
Location: Virginia

PostPosted: Wed Feb 09, 2011 9:15 pm    Post subject: Reply with quote

No, I didn't give anything about that to give some people more room to make more styles or something. All of the icons are in their un-edited forms. I could give the usual size, I just never measured it out. A GIMP tutorial would be awesome, I'll link to your post in the OP!
Back to top
View user's profile Send private message Visit poster's website XBL Gamertag: uSound PSN Name: uSoundSH
11yearoldkid  





Joined: 01 Aug 2007
Posts: 1068
Location: Austin, TX

PostPosted: Wed Feb 09, 2011 10:49 pm    Post subject: Reply with quote

Amazing guide, Usound. Hopefully this will attract more people and more creativity to the banner making community, then we'll have some truly epic banners.
_________________
JCirri wrote:
Matt wrote:
No, its only 10000. I am going to ban the next person who types THOUSANNNNNNND

TEN THOUSANNNNNNND!
My life.
Back to top
View user's profile Send private message XBL Gamertag: gxw009
Shredin0id  





Joined: 03 Jan 2011
Posts: 154

PostPosted: Thu Feb 10, 2011 12:34 am    Post subject: Reply with quote

Thanks just what I was looking for! It's also a really nice tutorial! Now I have to find a way to get photoshop. Just out of curiosity... did you see my post asking for this? Also I'll definitely have to try usound!
_________________
Back to top
View user's profile Send private message Visit poster's website PSN Name: Shredin0id
iHomer  





Joined: 10 Feb 2008
Posts: 935
Location: Vaughan, Ontario, Canada

PostPosted: Tue Apr 12, 2011 4:41 am    Post subject: Reply with quote

Thanks a lot for this, I`m starting to make banners now through this!
_________________
Back to top
View user's profile Send private message XBL Gamertag: iHomer x360a
2003041  





Joined: 30 Jan 2008
Posts: 1384
Location: MA

PostPosted: Tue Apr 12, 2011 7:35 am    Post subject: Reply with quote

I apologize for nagging, but if anyone can tell me the approximate size for the icons, that would be extremely helpful. I'm just guessing that they'd be near the 30-35 pixel mark, but I'd like to know for sure. Thanks again for the icons.
_________________




thewinnerisgeeg: like feed the dogs and eat minipockets and ice cream
Back to top
View user's profile Wiki User Page Send private message Send e-mail Visit poster's website Yahoo Messenger XBL Gamertag: a2003041 PSN Name: a2003041
inv4der  





Joined: 16 Sep 2007
Posts: 9655
Location: Meridian, ID

PostPosted: Tue Apr 12, 2011 7:40 am    Post subject: Reply with quote

2003041 wrote:
I apologize for nagging, but if anyone can tell me the approximate size for the icons, that would be extremely helpful. I'm just guessing that they'd be near the 30-35 pixel mark, but I'd like to know for sure. Thanks again for the icons.


I personally have mine at 34x34, but you don't need to copy that exactly.
_________________
Back to top
View user's profile Wiki User Page Send private message Send e-mail Visit poster's website XBL Gamertag: INV4DER
uSound  





Joined: 24 May 2009
Posts: 1180
Location: Virginia

PostPosted: Tue Apr 12, 2011 7:41 am    Post subject: Reply with quote

2003041 wrote:
I apologize for nagging, but if anyone can tell me the approximate size for the icons, that would be extremely helpful. I'm just guessing that they'd be near the 30-35 pixel mark, but I'd like to know for sure. Thanks again for the icons.


Mine are 34px.

Thanks for asking, I had meant to go back and add that to the tutorial and never got around to it, so I'll do it now!
Back to top
View user's profile Send private message Visit poster's website XBL Gamertag: uSound PSN Name: uSoundSH
2003041  





Joined: 30 Jan 2008
Posts: 1384
Location: MA

PostPosted: Sun Apr 17, 2011 2:02 am    Post subject: Reply with quote

Well, I have one problem with the pro keys icon: There is a green background that I cant get rid of. If anyone has a new link for one or just something where I can save it directly to my computer through a link, that'd be great. Thanks in advance.
_________________




thewinnerisgeeg: like feed the dogs and eat minipockets and ice cream
Back to top
View user's profile Wiki User Page Send private message Send e-mail Visit poster's website Yahoo Messenger XBL Gamertag: a2003041 PSN Name: a2003041
ricaluanna  





Joined: 17 Jun 2011
Posts: 1

PostPosted: Fri Jun 17, 2011 1:47 am    Post subject: Reply with quote

Thanks!!! This tutorial really helped me in so many ways.
Back to top
View user's profile Send private message
Steadysphere  





Joined: 27 Mar 2010
Posts: 2064
Location: United Kingdom

PostPosted: Tue Feb 21, 2012 9:37 pm    Post subject: Reply with quote

Hey Kevin, I've been using this and your templates to get into banner making recently

However, something weird is happening. When I resize the icons, it cuts it off slightly.



If you look very closely at the far right (and at the bottom, but you cant see because of the RB3 lettering) it looks cut off. It seems to be happening to the guitar/drum icons specifically, because I have made solo bass/vocals/keys banners and they seem fine. Is it something I'm doing?
_________________
Back to top
View user's profile Wiki User Page Send private message XBL Gamertag: Steadysphere
FUGGNUTZ  





Joined: 09 Jun 2010
Posts: 63
Location: Illinois

PostPosted: Sat Mar 17, 2012 4:12 am    Post subject: Reply with quote

Banner Making Tutorial for Scorehero

Just a video I made to go along with this thread. Sorry for the video lag, I forgot to close some stuff while recording.
Back to top
View user's profile Send private message XBL Gamertag: FUGGNUTZ PSN Name: FUGGNUTZ
Display posts from previous:   
Post new topic   Reply to topic    ScoreHero Forum Index -> Website Discussion All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum





Copyright © 2006-2024 ScoreHero, LLC
Terms of Use | Privacy Policy


Powered by phpBB