Wanting To Create A Banner For Upcoming Website

Have art related questions? Want feedback? This is the place for you!
User avatar
vulpix
Posts: 34
Joined: Sat Sep 30, 2023 2:08 am
Location: United States
Contact:

Wanting To Create A Banner For Upcoming Website

Post by vulpix »

For about six months, I have really wanted to create a Vulpix-themed Pokemon fansite. I could talk about my long history with the franchise, my love for Vulpix, favorite human characters, other favorite Pokemon, write my opinions, etc. It would basically be like my current site, but about Pokemon.

I really want to draw (or maybe commission) a banner to place at the top of my site. Similar to these:

Image

Image

Image

I've never really drawn one before and I don't know where to start or what to put on it. As I said, I want my site to be themed around Vulpix (but general Pokemon stuff will be included too ofc). I was thinking putting the typical tall grass on it or maybe kind of making it look like Floaroma Town. I also want to challenge myself to make my own pixel tile backgrounds for this site.

Does anybody have any tips or advice for what I could put on mine/how to make one? I feel kind of lost. Thank you in advance.
Image Image Image
User avatar
pom
administrator
Posts: 82
Joined: Tue Sep 19, 2023 12:14 am
Location: a cloud
Contact:

Re: Wanting To Create A Banner For Upcoming Website

Post by pom »

With layouts like this want to use a program like Photoshop. Since they've moved to a stupid subscription model and are insanely harder to pirate now, some good alternatives are GIMP and Photopea (but to be honest I'm not sure if Photopea will allow you to import custom brushes and textures. More on that later.) Deviantart is a GREAT resource for these.

Step 1.
You're gonna want to make a new canvas the size of your layout. 1000px x 500px or something as an example. Whatever you want.

Step 2.
In the first layer you're gonna wanna add some stamps and textures . (like in example 1, the background snowflakes and lines, example 2, the white paint looking streaks, and the spirals in example 3.)

stamps work like brushes in the program, you "draw" with them to place them. Here is a tutorial on how to install the in GIMP. Any brush or texture that has "photoshop" in the name will also work in GIMP.

textures are like "overlays" that give the graphic effects.

Image
On Deviantart, the download button is this arrow under the image.

Step 3.
Now you're gonna need is a transparent PNG. While its possible to cut these out yourself , you can also look for them on Google and even Tumblr. There was an era when people were making and posting transparent PNGS.

Some sites to find PNGS are:
favpng
pngmart
pngitem
cleanpng

Step 4.
After you have arranged the image how you want it to look in terms of placement and design. Merge all the layers in your photo editing program and it's time to mess with the colors. (This step is optional) There are a lot of tutorials and it takes a little bit of understanding color theory and what words like saturation, value, alpha mean BUT!!!!! do not be afraid to experiment.

Image
my favorite of the color options is "curves". it's under the colors option but be sure to mess with ALL of these just to see what they do.

ImageImage
you know Final Fantasy X-2 is my favorite game (the only one thats all girls ;_;) BUT!!! Here is the before and after messing with the black, red and blue alpha channels under the "curves" option. Here is a tutorial on how curves work.

Like I said, messing with the colors is optional and you can do it as much or as little as you like but sometimes, it can make a graphic more of one cohesive color scheme.

Let me know if you have any questions!!
Last edited by pom on Tue Aug 13, 2024 4:15 pm, edited 4 times in total.
Image Image Image
User avatar
pom
administrator
Posts: 82
Joined: Tue Sep 19, 2023 12:14 am
Location: a cloud
Contact:

Re: Wanting To Create A Banner For Upcoming Website

Post by pom »

I just wanna add too. Making graphics was SUCH a thing in the "oldweb" days and not a lot of people do it or talk about it. BRING BACK MAKING CUTE GRAPHICS!!!!!!!!!!!!!!!
Image Image Image
User avatar
vulpix
Posts: 34
Joined: Sat Sep 30, 2023 2:08 am
Location: United States
Contact:

Re: Wanting To Create A Banner For Upcoming Website

Post by vulpix »

pom wrote: Sun Oct 01, 2023 5:26 pm With layouts like this want to use a program like Photoshop. Since they've moved to a stupid subscription model and are insanely hard to pirate now, some good alternatives are GIMP and Photopea (but to be honest I'm not sure if Photopea will allow you to import custom brushes and textures. More on that later.) Deviantart is a GREAT resource for these.

Step 1.
You're gonna want to make a new canvas the size of your layout. 1000px x 500px or something as an example. Whatever you want.

Step 2.
In the first layer you're gonna wanna add some stamps and textures . (like in example 1, the background snowflakes and lines, example 2, the white paint looking streaks, and the spirals in example 3.)

stamps work like brushes in the program, you "draw" with them to place them. Here is a tutorial on how to install the in GIMP. Any brush or texture that has "photoshop" in the name will also work in GIMP.

textures are like "overlays" that give the graphic effects.

Image
On Deviantart, the download button is this arrow under the image.

Step 3.
Now you're gonna need is a transparent PNG. While its possible to cut these out yourself , you can also look for them on Google and even Tumblr. There was an era when people were making and posting transparent PNGS.

Some sites to find PNGS are:
favpng
pngmart
pngitem
cleanpng

Step 4.
After you have arranged the image how you want it to look in terms of placement and design. Merge all the layers in your photo editing program and it's time to mess with the colors. (This step is optional) There are a lot of tutorials and it takes a little bit of understanding color theory and what words like saturation, value, alpha mean BUT!!!!! do not be afraid to experiment.

Image
my favorite of the color options is "curves". it's under the colors option but be sure to mess with ALL of these just to see what they do.

ImageImage
you know Final Fantasy X-2 is my favorite game (the only one thats all girls ;_;) BUT!!! Here is the before and after messing with the black, red and blue alpha channels under the "curves" option. Here is a tutorial on how curves work.

Like I said, messing with the colors is optional and you can do it as much or as little as you like but sometimes, it can make a graphic more of one cohesive color scheme.

Let me know if you have any questions!!
Yes, thank you very much for this advice! I will definitely refer to this in the future. I do have a question, actually:

How exactly would I use a PNG in a potential banner I create? Like, in the background? Or part of the foreground. I definitely would like to know this.

Messing with overlays/textures also sounds very fun! I have seen a lot of archived fansites mentioning them so that is likely where it comes from.
Image Image Image
User avatar
pom
administrator
Posts: 82
Joined: Tue Sep 19, 2023 12:14 am
Location: a cloud
Contact:

Re: Wanting To Create A Banner For Upcoming Website

Post by pom »

vulpix wrote: Tue Oct 03, 2023 6:35 am
Yes, thank you very much for this advice! I will definitely refer to this in the future. I do have a question, actually:

How exactly would I use a PNG in a potential banner I create? Like, in the background? Or part of the foreground. I definitely would like to know this.

Messing with overlays/textures also sounds very fun! I have seen a lot of archived fansites mentioning them so that is likely where it comes from.
The png is the main image! Like the characters in your example are the pngs. They are transparent meaning there is no background around them You can mess around with it. Usually they are put in the foreground and you can add textures and on top and even layer pngs. Just put your png in a new layer and move it to where you want it.

here are some tutorials for the entire process
Image Image Image
Post Reply