Welcome

Welcome to Solaris, a resources and graphics request site run by me, Nina, since February 25th, 2013. At Solaris, I aim to provide quality banners and icons with bright, vibrant colorings, along with plenty of resources and several tutorials to help you make your own lovely graphics!

If you ever have any questions, don't hesitate to mail me, and I will try my best to get back to you as soon as possible. Thank you for visiting Solaris, and I hope to see you again soon!

March 18th, 2014 // NEW TUTORIAL + so much work i'm crying

THERE'S A NEW TUTORIAL AFTER 94503498540 YEARS! It's a tutorial on how to do the cut-out banners that I've done for a couple of requesters. Hannah requested it on deviantART so I just decided to write one. I finished it relatively quickly. I hope you guys find it helpful and if there are any questions just let me know!

Also there is a new link back button from the amazing Cynthia at Inspire Lite! It's the first button of the second row with the purple Ixi. I hope you guys love it as much as I do!

March 13th, 2014 // it feels like my brain is in slow motion

I've added/replaced 5 site status banners! I just seem to dislike certain ones in old batches and just want to replace them. At least it keeps things fresh? Hope you guys like them!

Spring break is pretty boring, but I like it. I'm not looking forward to going back to classes again because there's going to be so much work in the remainder of March. In April everything should mellow out a bit, but the rest of March is going to be a little hectic.

February 19th, 2014 // oops?

Sorry for the gap in updates, but to be honest there really wasn't much to update on! I didn't win the SOTM at Demure but thanks to those who did vote for me.

As you can see from the sign above, I am indeed taking a semi-hiatus. What this means for Solaris is that I won't be updating unless there's something going on, and requests will be closed in the meantime. If I make any new resources or graphics I'll post those up, but it's mostly just going to be going at my own pace.

The reason for this is that I've found this semester to be significantly more stressful and I have a greater workload. On another hand, I've been getting quite bored with neopets. I hardly come on that much anymore and some days I don't even do my dailies. I just want to take a break to get my stuff in order so I can really put more effort into Solaris. I didn't just want to let it sit here and rot.

I can't say for sure when I'll come back, but I hope this hiatus won't be for too long. When I come back, I'll be more energetic and focused and there will definitely be more activity. Thank you for your support!

February 4th, 2014 // vote for me at demure's sotm!

Ummm Solaris reached over 4k views?? Wow I really don't know what to say, I'm absolutely speechless. I never ever expected this to happen, and I want to thank you for your continuing support!

I've got two requests over the past two/three weeks and I've completed them! Sorry that it took longer than usual, my mouse broke last week and I ordered a replacement right away but it just only came on Monday.

The SOTM competition seems to still be going on at Demure so if you could vote for me I would really really appreciate it!

January 18, 2014 // vote for me at demure's sotm!

I finally got around to making those open/closed request signs that I've been promising for 2389573 years! I have a set of 5 signs up and I'm really pleased with how all of them look. They are definitely a lot better than my old signs. Any feedback you guys have would be greatly appreciated!

Banner bases

800 x 300

700 x 250

600 x 250

Requests: The Rules

  • Fill out the form to the best of your ability. I will not accept requests without a form that does not have the basic parts completed.
  • If the picture you want for your graphic is not a neo-related image, post the picture on a petpage and include the link in your form in the image blank.
  • Your image must be the same size or larger than the size that you want for your icon/banner. I will not use low-quality images.
  • I accept requests for any sites or pages except for graphic sites as well as offsite pages.
  • I will not accept your request if your site has stolen content or if you have stolen content from other sites previously.
  • Request only when requests are open. Forms sent in while requests are closed will be rejected.
  • Only ONE request is allowed at one time. You are free to request another graphic once I finish your most recent request. If you have read the rules put 'rivaille' in your form. If you send in multiple request forms at the same time, I will reject all of your forms.
  • Let me know if you want your graphic to be redone. I will be MORE than happy to make any changes you want in your request.
  • I will not make award graphics for personal use.
  • Only requests graphics for yourself. Do not request for other people. I would prefer if I were making graphics for people who actually wanted them.
  • Credit me clearly on whichever page you're using the graphic for so that it's obvious that I was the one who made the graphic. You must link back to Solaris.

Banner requests

Examples:

How it works

For banner requests, you have two choices for forms: Custom or Nina's Pick.
The Custom form is for people who know exactly what they want. You get to pick almost everything for your banner. The Nina's Pick option requires less things to fill out, and I get to choose much more of how the banner will look. For either form, if you'd like me to pick something for you, just put that in there instead! If you want some ideas, feel free to look at my portfolio to see past requests that I have completed.

If you are not sure which font you want, I have posted below a collection of some of my favorite fonts. Obviously, you don't have to use these fonts, but they are just suggestions if you can't make up your mind.

Also, if you have a specific font in mind, just add it in to the additional comments section of the request form and I'll try my best to find it.

Request!

Custom

Nina's Pick

Icon requests

Examples:

How it works

For icon requests, you have two choices for forms: Custom or Nina's Pick.
The Custom form is for people who know exactly what they want. You get to pick almost everything for your icon. The Nina's Pick option requires less things to fill out, and I get to choose much more of how the icon will look. For either form, if you'd like me to pick something for you, just put that in there instead! If you want some ideas, feel free to look at my portfolio to see past requests that I have completed.

If you are not sure which font you want, I have posted below a collection of some of my favorite fonts. Obviously, you don't have to use these fonts, but they are just suggestions if you can't make up your mind.

Also, if you have a specific font in mind, just add it in to the additional comments section of the request form and I'll try my best to find it.

Request!

Custom

Nina's Pick

Pick-up

Finished requests will generally remain on this page for one week before being moved to the portfolio. To see the image in full size, click and drag to an open tab. Do not take a graphic if you are not the person who requested it.

Icons

For Rose

Banners

For Hannah

Resources

Rules

Before using any of the resources, please read these rules:

  • Do not redistribute these resources or claim them as your own.
  • If you use any of these resources, please credit clearly and properly, either with a link back button or a detailed text credit. If you fail to do so, you will be reported without warning.
  • You are free to edit these resources to your heart's content.

Example of good text crediting:
Requests open and closed signs made by Solaris.

Example of bad text crediting:
Sign by Solaris.

The resources

Site status banners

closed







hiatus







moved







revamp







under construction






Open / Closed signs

Many of these have been resized. To view them in full size, either drag and drop into a new tab, or right click and select "open image in new tab". The signs with an evident glow are much more suited for white or lighter backgrounds.












placeholders

Button placeholders









Icon placeholders










Text-based signs

closed









hiatus









Tutorials

While I know I am not the only Photoshop user around these parts, sometimes it feels like I am with the incredible lack of Photoshop tutorials. In this tutorials section, I'll teach you how to work with graphics on Photoshop and different tricks I use to make my graphics. Personally, I use Photoshop CS6 Extended, but many of the same functions are still available on previous versions of Photoshop CS.

How to edit an image
Knowing how to color and edit images is basically the core to making graphics. A graphic without colorings and textures look bland. In this tutorial, I'm going to show you some basic things you can do to really liven up a picture. The steps in this tutorial can be applied to almost any picture you choose.
Read more?

How to texturize
Using the right textures in the right way is a difficult art to learn. It took me many tries to learn how to play around with textures, and I'm still learning to this day. In this tutorial, I'll be showing you different images and how to apply textures to them to add depth and color to your image.
Read more?

Recoloring Images
In this tutorial, I'll be showing you how to recolor images so that the colors turn out vibrant and beautiful while also enhancing the colors that are already in the image. If you have a favorite image but don't like the current color scheme, this tutorial will also show you how to alter the current colors to an entirely new color scheme.
Read more?

Cut-Out Banners
This tutorial is going to be showing you guys how to do the cut-out style banners where there is an image inside a text. It's a very simple style of banner but looks really great and can be used on all images and fonts!
Read more?



How to Edit images

Knowing how to color and edit images is basically the core to making graphics. A graphic without colorings and textures look bland. In this tutorial, I'm going to show you some basic things you can do to really liven up a picture. The steps in this tutorial can be applied to almost any picture you choose.

First, pick out an image. I'm just going to use this picture of a Peophin that I found on the Backgrounds page. You can find it yourself by just typing in "peophin" into the search bar.

If you download just the small image preview that I have posted above, make sure to change the mode of the picture from Indexed to RBG Color or else you will not be able to edit it. You can do so by clicking IMAGE / MODE / RBG COLOR.

To start off, I like to sharpen a picture to make sure the image is crisp and clear. On the top, go to FILTER, then go down to SHARPEN, and then click SMART SHARPEN. A window should pop up that looks like this:

From here, you adjust the radius and how sharp you want your image to be. Usually for neopet images, a radius of 0.3 and about 90-100 percent works just fine. This is just to add more clarity to the picture. I highly recommend you always use a radius of 0.3. The percentage can be changed based on the clarity of the image from the start, but the radius should not be changed from 0.3.

After you've adjusted the settings, click OK. Now your picture is sharpened! It probably doesn't look like there was a big change, but it does make a difference later on, especially if the image you start with is not extremely high-quality.

Now we shall start with colorings. The picture of the menu above will basically be your savior in terms of editing a photo (among other options in the Layers menu).

First, I want to do a color fill. Color fills can be quite tricky, so play around with various colors until you're satisfied. To add a color fill, go to LAYER / NEW FILL LAYER / SOLID COLOR and a menu will pop up.

It literally doesn't matter what color you pick in the little dropdown menu, because you can adjust it no matter what. I just go with "color (none)". However, you should change your mode to "Soft Light" when editing images. Very rarely will you use "Normal" unless you are recoloring.

When you click "ok", the color gradient window should pop up and now you just pick what color you want to use. I'm going to go with a brown color fill just to see what happens.

So when you click okay and all that, you will see the coloring of your image change. I want something very blue to emphasize the ocean in the picture, so I'm going with a navy-ish blue color fill.

My image now looks like this:

The image is now mainly blue and emphasizes the peophin much more now. If you feel like your image contains way too much of one color and you don't like it, then you can apply a color balance. This will help you select which colors you want to show more. Go to LAYER / NEW ADJUSTMENT LAYER / COLOR BALANCE. Click okay when the pop up window shows up and then you should see this.

Again, this is another experiment. Play around with the color ranges until you're satisfied.

Even though my image is now very blue, it's not as bright and vibrant as I want it to be. So I will now be using curve layers to help me brighten and adjust my image.

Once again, it's LAYERS / NEW ADJUSTMENT LAYER / CURVES. Click "OK" and something will popup like the color balance menu, but instead it will look like something out of a mathematics textbook.

What RBG curve layers basically do is brighten up your picture without adding a bunch of unnecessary white light that you get from simply amping up the brightness. If you can't seem to get the curve to work for you, then you can choose from their list of preset curve layers (it is in the dropdown menu that will read "Default"). If you want to change the color, you can click the dropdown menu that says "RBG" and instead pick one of the three color groups and adjust your image that way.

After adjusting the RBG curves, this is now what my picture looks like.

Because there are simply so many more ways we could adjust this image, I must stop the tutorial here. But I hope at least now you have learned something new about how to edit images on Photoshop! Remember to keep experimenting with all the different types of layers, including levels, hue/saturation, and exposure! You'll be surprised at how quickly you'll soon be able to turn out beautifully edited pictures.

My finished product, after some more adjustment layers and two textures:

If you would like some good textures to use, I would head on over to Details for some really great, versatile textures.

How to texturize

Using the right textures in the right way is a difficult skill to learn, and often takes a ton of trial and error to get right. In this tutorial, I'll be showing you different images and how to apply textures to them to add depth and color to your image.

The first thing to remember about textures is that you should not use more than necessary. It is so easy to overtexturize and a good image can be ruined by adding too many textures. Also, even one texture that doesn't fit in can completely ruin the image. Finding the right texture is really just a bunch of trial and error, and once you start to realize which textures go with what kind of picture, you'll be really quick at texturizing.

Also, if you're serious about getting into graphic making, have a good number of textures that you can use for any kind of images. Personally, I have over 500 textures that I've downloaded from all parts of the internet (mostly texture packs that are reblogged on yeahps on fumblr. Get used to your own set of textures. Know which textures go with what image. It's better to have a good group of around 40 to 50 textures that you're super familiar with than to have 1000 textures that you barely know how to use.

I'm going to take this picture of a Starry Gnorbu and use this for our tutorial example. You can find this image for yourself in Pet Central, in the Full Screen backgrounds section by searching up "star" or "gnorbu".

After some sharpening, coloring, etc., this is my edited image:

It's nicely brightened and the colors are rich and vibrant, but what makes an image really stand out and pop is the texture that we apply to it.

First, let's look at the color of the image. The predominant color scheme is this nice, navy/cobalt kind of blue. So what we don't want to use is some really pink, orange, or yellow texture. Try to use textures that are either black or white, or textures that are close to or match the color scheme of the image.

Also, the image is set during the night time. It would be slightly off-place to use a bokeh texture for this image because the bokeh effect is something that occurs during the day when the sun is out. So remember to look at the texture you're using to make sure it's appropriate for the setting of the image.

Now, to texturize. I'm going to be using this lovely texture from FrostBo on deviantART. This texture has small little white dots that could easily look like stars, something that matches perfectly with our image setting.

To add a texture onto an image, the way I learned it was to click and drag the original image out so that it's its own window (to do so, click on the tab that the image is open on and drag it out so that when you release the tab, a new Photoshop window is open). Then, you click on the texture's tab(no need to minimize the image layer, just click behind it to get to the texture), click and drag the TEXTURE'S LAYER, and drag it on over to your image. You'll see if it's copying onto the image or the original window by a small white border. If there's a border around the image's tab, then just release the layer onto the image. If the white border is around the texture, then you haven't dragged it to the proper place.

In case you're confused, here's an step-by-step process with images.

Now, this texture I'm using is huge. I believe the original image size was 3000 by 3000 pixels before I sized it down. When you come across huge textures like these, always make them just a tad bigger than your original image so you get the full texture. To size an image down in its original proportions, click on the texture's layer (found in the little menu box on the bottom right side of your Photoshop window), and the layer should now be highlighted. Now, you press the keys CNTRL + T. On the very top of your window, a small bar should appear that looks like this:

This menu is what you'll use to adjust your texture's size because it's simply too big right now. To the left side of the bar, you'll see this option that's labeled "W: 100.00% H: 100.00%" with this image that looks like a link in between. Click on the link image, and what that does is that when you size down your image, the image will stay proportional so that the image isn't overstretched in either direction.

After you click on the image, you can now choose how far you want to size down your texture. For smaller images, you can click and drag the outside lines of the image, but because the texture is so big, you'll have to do with this bar for now.

If you hover your mouse over on the "W" or "H" option, you'll see that the double lines image pops up. You can use either "W" or "H", because the image is kept proportional so it honestly doesn't matter, but I'm used to using "W". For "W", if you drag your mouse over to the right side, the image becomes smaller. To make the image bigger, drag your mouse over to the left side.

Occasionally, depending on where you placed your texture when you dragged it over, it will begin to cover only a portion of your image as you size it down. To remedy this, just simply drag your texture a lot over to the left or right side, and continue resizing if you wish. If you feel like your texture is at a good enough size, then just leave it. I sized it even smaller from 42% down to 32%.

Now we have a picture that looks like this, with the texture covering the entire image. This is good. Always make sure your texture is at the forefront of all your other layers.

This is where the tricky part comes in: figuring out which blending option is the best for the image. To adjust blending options, you can right click on the texture's layer, and select "Blending Options" on the pop up menu. A pop up window should appear with a drop down menu full of blending options to choose from. I would highly recommend that you drag this pop up window to the corner so you can see what different blending options look like on your image.

Right now, my window looks like this:

This next part honestly just comes with experience. Sometimes darker textures only work with Overlay, Soft Light, etc., and light textures only work with Darken, Linear Burn, etc. It also depends on what you want your end result to look like. Do you want a bright image, or are you doing with a darker color scheme? It all varies, so the way you blend your image will also differ from mine, because I most likely have a different vision in my head of what I want this image to look like when I'm done with everything.

Because this texture is light, and also has a lot of the white dots, I don't want it to overpower the image. So I still do trial and error, where I click on a blending option to see how it looks.

When I use "Screen", the texture completely washes out my image, so now I know not to use that blending option again.

I tried "Color Burn", and the image turned out quite nice. It darkened the sky part of the image without darkening the gnorbu, making that the focus of the image by darkening the rest. What I also like about this blending option is that it still kept the little white dots of the texture intact, adding a bit of other-worldliness to the image.

Now, say that you think the part of the texture you're using has too many sparkles, or there's a part of the texture that's too dark and you don't like it. What you can do is you can just move the texture around until the image and the texture are at a nice place that you think looks best.

To do this, simply click the image on your toolbar (for me it's on the left side) that has a picture of a mouse with the four directional lines on the corner of it. When you click this, and have your texture layer highlighted, you can drag your texture around. Just make sure that your texture is still covering your entire image so one part of your image isn't lighter than the rest.

You can add even more textures to this if you think it's too plain. A good texture type that almost always works on any type of image is the scratchy/dust kind of texture. It doesn't overpower the image and gives it a very old, vintage-y feel that I love. But make sure that if you're using more than one texture that the textures work well together, or else you'll have a nice image with clashing textures.

Because I feel like this image is still too plain, I want to use this light leaks texture from yeahps.

Because this is another large texture, you should definitely resize this image. Now simply repeat all the steps we used before with the previous texture to get to a nice end result.

After a lot of experimenting, the blending option that I liked the most was "Color Dodge". It significantly brightened up the image and made the sky look like a nebula, and just really added a lot of color to the image. With this texture, the image isn't overpowered with a lot of extra stuff because it's only a color texture, but it does a lot.

This is my final image:

We are all done! Our image now looks bright and vibrant, and the textures add some depth to the image. The night sky in this picture looks heavenly and ethereal.

Hopefully, you now know a little more about textures and how to use them. There are a ton of great textures all over Neopets and even more around the Internet! DeviantART is a great place with a ton of beautiful textures that you can use. I encourage you to go and find your own set of textures that you can practice and get comfortable with.

Don't hesitate to let me know your thoughts on this tutorial! If there's anything that you feel should be added, or a part that was confusing, simply mail me and I'll get back to you as soon as possible.

Recoloring Images

In this tutorial I'll be showing you how to recolor images so that they turned out more vibrant and beautiful than the original image!

I'll be using this Yurble picture I found in the backgrounds page:

To use the bigger version of this image, just type in "yurble" into the search bar and download the 1024 x 768 size (the 800 x 600 link isn't working).

First thing I do crop out that ugly-looking Neopets copyright thing on the left side of the image. If you're using this to make any graphic, I would highly recommend that you do this first because it is likely you will forget about it and then later on you'll notice that your graphic has text on the side. I just crop out the text and now my image is 1000 x 768. Next, I like to size down the image because the original size is way too big for me. In this tutorial I used a 600 x 461 size!

What I like to do to almost all of my images is to duplicate the layer and set the top layer to "Soft Light". This won't work with all images (ex: very bright or very dark pictures) but it almost always does the trick. When I set the duplicated layer's blending mode to "Soft Light", the image's colors become darker and more vibrant.

Next, I like to blur the duplicated layer (the one set to Soft Light) a little bit to give the image a soft, glowy effect. You can do this by going to Filters / Blur / Gaussian Blur. I've tended to see that the bigger the image, the more blur is needed. It also depends on whether or not to plan to sharpen the original bottom layer. For this image, if I didn't want to sharpen it, I would set my Gaussian Blur to around 2.0. If I did want to sharpen it (which I do), I set my blur to around 2.5 or 2.6. Not everyone likes this blur effect, so you are perfectly welcome to not use this method! For sharpening this particular image, I go to Filters / Sharpen / Smart Sharpen and set my sharpening mode to a radius of 0.3, with the "more accurate" box checked, and a percentage of 120. Our image now looks like this:

Now we will start to recolor! The original image has a lot of earth tones such as yellow, orange, and red. You can choose to either enhance the colors that are already there, or recolor the image so that the colors are different from what you had originally! I will show both methods in this tutorial, but I will start with keeping the original color scheme first.

Part One: Enhancing the Current Colors

I usually like to start with a Brighten/Contrast layer or a curves layer. For this image, I'll use a Brighten/Contrast layer and set the Brightness to 35 and the Contract to 17. The image is now nicely brightened with a light contrast. Looking at the image now, I feel like it's a bit too yellow and I want to lower the yellowness of the image because I don't want the image to be overpowered by one color. Now I'll use a Color Balance layer. I dragged the Magenta/Green bar to the left at -38, and the Yellow/Blue bar to the right at +22. There's still enough yellow in the image but not so much as before, making it a nice even balance between the original colors.

Now here is where I pull out my favorite recoloring tool of all time: blending light textures. They are the best thing I've ever used and I'm totally addicted to them. They are amazing because you can use them in so many modes and each texture has three or four different colors to work with. I'm going to be using this blending light texture that I got from fumblr.

As you can see, there are three colors in this texture: red, plum purple, and a magenta kind of pink. I chose this texture because it includes colors that are already in the image and therefore will blend in better and create a smooth light effect. I want the texture to be placed where all three colors are displayed. So far, my picture looks like this:

After going through a few blending modes, I found that I personally liked the way the texture looked while set to Linear Dodge. There's a rich magenta shade and the original orange, yellow, and red are kept in the image. It looks so much more vibrant and colorful, and the color makes the image stand out. Here is my finished image:

I always like to look at the before and after image just to see how far a few layers can go.

Part Two: Tweaking the Color Scheme

Now, if you like this image, but don't like the colors that the image currently has, you can definitely play around with adjustment layers and blending textures to get the desired color scheme! I'll still be using the same image, but we'll be starting over right after I've duplicated and blurred the top layer and sharpened the bottom layer.

Let's say you don't like red at all, but you love Yurbles. And arrows. I'll be tweaking this image until the main color scheme is blue/purple. What always, always, helps is color fill layers. You can set the blending mode to Overlay or Soft Light depending on what shade you've chosen. I'll be starting with a purple color layer because that color is already in the image. I've set my layer to Overlay and I'm using the hex code #720ea1.

If you've done the same as me (which you really don't have to) you'll notice that the image has turned very, very dark red. That is not what we want. So I create a new Color Balance layer and I set the Magenta/Green layer AND the Yellow/Blue layer to +100. Then I make a Selective Color layer, set the "Colors" option to Reds, and set Cyan to +60 and Yellow to -18. The image is still looking a bit dark for my liking so I'll be adding a Brightness/Contrast layer, and I set the Brightness to +40.

It's time for blending light textures!! I'll be using this purple light texture also from fumblr. It's one of my favorites because my current obsession for graphic-making is purple shades.

After dragging my texture onto my image, I placed my texture so that it looks like this with no blending mode:

I personally liked light textures on either Screen or Lighten the best, and for this texture I used Screen. Now the image looks like this:

It's very, very purple but we can easily modify that with another light texture and a color fill! For now, I'll be using this blending texture:

I dragged it so that the purple color is just kind of peeking out from the right bottom corner of the image. I set this texture to Linear Dodge. It now looks quite purple and not as blue as I would like it to be, so color fill time! I set this color fill layer to Soft Light and used the hex code #5563c6. The end result looks quite vibrant and frankly, much too bright for my taste.

The way I would fix is is making a new adjustment layer, Hue/Saturation. Adjust the Saturation bar to -30. The purple is no longer so overwhelming and there is much less magenta in the picture than before. The blues are also more prominent and the image isn't as blindingly bright. This is our end result!

Look at the before and after comparison!

Hopefully you now know a little more about how to recolor images than you did before you read this tutorial. As always, if you have any questions, feel free to mail me and I'll try my best to help you! If you're wondering how to get these wonderful blending light textures, you can easily type that into Poogle and I'm sure you'll find some. If not, fumblr and dA are always my go-to place for textures.

Cut-Out Banners

This tutorial is going to be showing you guys how to do the cut-out style banners like the ones I've done for a few requesters. It's actually really easy to do. Thanks to Hannah for requesting this tutorial.

The first thing you want to do is to pick an image to use (as well as a size). Keep in mind that unlike normal banners, only a small portion of the image will be seen. So if you want your banner to look more fancy, I suppose, then pick an image with more detail in it. Something really plain won't look as good as something with a lot going on in the image. I'll be using this background because there's a lot of things in the image that will make it good for a cut-out banner, and I'm going to make my banner 500 x 220 pixels.

The next step is to just edit the image. Do it however you want to, whatever methods and styles you like. If you want to read a tutorial on how I personally color my images, click here. Also, when resizing the image, keep in mind that the smaller it is, the more detail you'll get.

This is my image after editing. I decided to focus on the houses and the little bridge because there were more details in the bridge (plus I like the little stream, it's so cute)

So now that you have your image, you're going to smush all the layers together into one layer. To do this, right click any one of the layers on the right side of the screen, and select "Merge Visible" or "Merge Layers".

After you've merged all of your layers, your side layer screen area should look like this, with only one layer!

Now it's time to decide on your font. This is especially important for this style of banner, because you want a font that will be thick enough to display enough detail of the image. If you use a really thin font, no one is going to be able to tell what image you're using, and the magic of the cut-out banner is significantly lessened. If your text only has one word, then you might want to pick a font that's a bit longer so it can show more of the image. You can still use cursive fonts, however I would suggest that you use cursive fonts for text that has fewer letters so you can make the cursive font larger, and choose a cursive font that has thickness to it.

I'll be using two words for this banner, "Nina's Banner". When I do cut-out banners with two words, I like to stack them on top of each other because it looks a lot more dynamic and using two fonts will look a lot nicer with stacked text. Since I want to make the word "Nina's" bigger than the word "banner" because it's the more important word and it also has fewer letters, I have to pick a font that I know will look nice and thick and show enough detail.

I picked the font Sail for the word "Nina's" because it's nice and thick and I think it looks really cute yet structured. This style of font isn't everyone's cup of tea but there are so many fonts out there to choose from, so I encourage you guys to pick whatever font you like best! It also doesn't matter what color you use for the font since you're just going to be using that font as an guide.

For the word "banner" I picked the font Bree Serif because it's looks nice small and has a good thickness to it. When I do a stacked banner, I like my text to sort of be the same width. I don't measure it, but I just use my eye to kind of adjust the font sizes so that they look somewhat aligned. This is what my banner looks like with the fonts picked up and the text.

I know the font looks huge but it's for a good reason. Remember, you want as much detail to show up as possible, so you want to try to take up as much of the image as you can. When you have everything, now it's time to duplicate the image layer. This is very important and I would actually duplicate it multiple times in case you mess up. If you've got this, then just duplicate it once so you have two identical image layers. NOTE: you only have to duplicate if you have more than one word. You need as many image layers as you have words, so if you have three words, then make three image layers.

Now, I would just make invisible all the layers you don't need. I'm going to be focusing on the word "nina's" first, so I'm going to make one of the image layers invisible and the text layer for "banner" invisible. (To do this, just click on the little box next to your layer. If it's visible, there will be an image of an eye there. If it's invisible, there will just be a box.) That way, you don't have any extra distractions and you don't mess up. What you do now is go to "Select" and click "Load Selection". When you do this, make sure you're clicked on the text layer that you want to focus on first. For me, I've clicked on the text layer for "Nina's". There's going to be a screen that pops up, and just click "OK".

What you should see now are white dashes inching around your text. Now, click on your rectangular marquee tool, which looks like a white dashed square icon for me and is right underneath the Move Tool (which looks like an arrow). Hover over your selected text, and you should see an arrow with a small marquee tool sign underneath it. Right click and select "Select Inverse".

Now, not only should the text have white dashes moving around it, but the outline of the banner should also have white dashes. This next step will have you cutting out the image. Click on the visible banner image layer. Don't worry, this won't change or affect your selection. After you've clicked on the image layer, simply press your Backspace key to delete! You should see nothing now but your text layer. To see your cut-out text, simply make the text layer invisible. Also, to get rid of the white moving dashes, simply click anywhere else on the screen with your marquee tool. This is what your banner should look like right now:

Now, it's time to make the other two layers visible again and make your first cut-out text invisible to prevent any errors. Do the same thing with this second text layer. Click on the text layer, go to "Select", "Load Selection", and then click "OK" when the screen pops up. Then, choose the rectangular marquee tool, right click on the selected text, and click on "Select Inverse". Then click on the image layer, and press the Backspace key. Now all you should see is your second text layer. Make the text layer invisible and make your first cut-out text visible again. This is what my banner looks like now.

YOU ARE FINISHED WITH YOUR CUT-OUT BANNER! This can be used with any image, all fonts, any text. As long as you're careful while cutting out the font, you shouldn't have any problems. It's all just making sure you have the proper layers selected. When trying this out for the first time, I would definitely have duplicate image layers handy in case a mistake happens.

From here, you can either just save it as is, or add a drop shadow! I like to add drop shadows when making text-based banners like these, because it can look very plain without a shadow. Adding a shadow will give the banner more dynamic and look more interesting. Make sure to keep your shadow soft and not too strong or else it will look too overpowering. Especially if you used a banner image with light colors, a shadow that's too dark and strong can take away focus from the banner and draw attention to the shadow instead. Darker or more vibrant images can use a little bit more of a stronger shadow. To make sure your drop shadow isn't too dark, make sure to create a white fill layer behind all of your other layers to test how the shadow looks. When you're saving a cut-out banner, REMEMBER to save it as a png file so that the background will remain transparent.

This is what my banner looks like against a white fill layer with drop shadow.

And that's the end of this tutorial! I hope you guys found this helpful, and as always if you have any questions just mail me and I'll get back to you as soon as I can! Thank you for reading this tutorial.

Extras

Frequently asked questions

or rather, answers to questions that I feel like people might want to know but don't ask

1. You've made layout images before. Will you make a layout design for me?
Solaris does not, and will never, offer layouts, even if it's just the layout image. I'm honestly not that great with making layouts so I am really the wrong person to ask.

2. What program do you use to make your graphics?
I use only Photoshop CS6 Extended.

3. Someone is using your banner/icon without proper credit! Oh noes!
Send me a neomail immediately if you see this happen and I'll sort things out as soon as possible.

4. Where do you get the images for your non-NR icons?
Online HQ galleries are you best bet, along with just searching things up on the Internet. If you want to find me off-neo, I am nscangel on deviantART. Contact me there and I'll be able to send you links to some of the galleries I use most often.

5. Where did you get the name for your site?
I wanted my site to do something with astronomy/outer space because it was just my obsession at the time. I took my site name from the novel Solaris by Stanisław Lem. It is one of the most beautiful and compelling novels I've ever read.

Coming soon!

If anyone ever has a suggestion for a new banner or icon section they'd like to see at Solaris, feel free to mail me! I can't guarentee I'll actually make graphics from your suggestion because it all depends on whether or not I can find high-quality images but I will definitely take your suggestions into consideration! Also if you'd like to see more of a certain character/episode of a show or movie that I've already made graphics for, you can suggest that too!

banners

  • currently making: none

icons

  • currently making: "Various" section
  • up next: Neopet Backgrounds
  • contemplation stage: rest of the Harry Potter movies
  • in the back room: Lion King, Princess and the Frog, Game of Thrones
Future sections:
  • 10 Things I Hate About You
  • (500) Days of Summer
  • The Lord of the Rings trilogy
  • Titanic
  • Silver Linings Playbook

resources

  • currently making: open/closed signs
  • contemplation stage: text-based banners

reviews and awards

reviews

awards

  • ranked 2nd in graphics at Beyond
  • ranked in banner requests at Line Up

past layouts

v.4 surrealist


layout image by Nina, coding by Maddie

v.3 a hobbit hole


layout image by Nina, coding by Turnip

v.2 re-hash


layout image by Nina, coding by Turnip

v.1 altador shores


layout image and coding by Turnip at TLB


back to extras

Sitely

Link back

Buttons are all linked back to their creators.












sister site

My sister site is none other than the amazing Scheme run by the even more amazing Cam. I don't really think I have to exalt on Cam's talent and skill level; if you go to his portfolio you can clearly see for yourself the amount of work and thought he puts into every single one of his layouts. His style is unique and no one else makes layouts the way he does. Visit his page right now, if you're lucky, to request a layout from him; if not, you can just stare in awe at his wonderful site.

Affiliates

18/20 / Requests are CLOSED / Apply?

Listers

If you have listed Solaris, please mail me so I can link back.

Credits

  • Layout designed and coded by Nienke
  • Image container coding & clean up help by Cam at Scheme
  • Textures on layout from Shizoo, brushes from Pstutorialsws at DA
  • Counter base and credit sign © TLB
  • Web counter © BoingDragon
  • All resources (textures, colorings, brushes, etc.) used on this site © photoshop blogs on fumblr and deviantART.
  • Huge thanks to Cam, Rico, Anh, Rika, and Kate for giving me endless laughs and support.
  • Copyright 2000-2013 Neopets, Inc. All Rights Reserved. Used With Permission. NEOPETS, characters, logos, names and all related indicia are trademarks of Neopets, Inc., © 1999-2013. ® denotes Reg. US Pat. & TM Office. All rights reserved.

Counter started on February 25th, 2013




Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions