I saw that you had a tutorial on how to make or apply a custom background to a container theme, but could you maybe do a tutorial for the photoshop graphic part? I'd love to be able to create a pretty background/border to apply, but I'm not quite sure how to do it in a way I'm happy with.
okay nonny, get comfy…
now bear in mind, that this tutorial will show you how to make a container theme background, and the techniques i use to make mine - however it may not be to your aesthetic taste, but all you have to do is to replace the images i use with things you prefer…
this tutorial will help you with -
checking the position and size of your container, checking the position/alignment of your background.
making a template.
using guides in ps.
designing a background - source images, brushes, stock resources etc.
using clipping masks.
using semi-transparent background on posts ( for readability ).
we’ll be going from this -
to this -
using less than 10 layers in ps! (if you want to see the full preview of the finished background on a static theme, click here.)
Good artists are bad artists that never gave up and always strived for improvement
Never stop learning. Keep looking for resources to help you improve your art.
Keep identifying your weaknesses and improve them until they aren’t your weakness anymore.
Always practice by sketching. Don’t have time? Make time. There will always be a pen or pencil and some kind of paper for you to use to practice.
While a Wacom Tablet and Photoshop and Paint Tool SAI and COPiC markers are good things to have at your disposal, they don’t make a great artist. Your resources aren’t what make you a good artist- your resourcefulness is.
Some good places to visit on your journey of constant improvement:
Hey, still love your themes! XD May I ask how you made these uh, separators? Like the moth with lines attached and the ones on the family page on your new theme. They're kinda awesome and I'd like to try make my own. Thanks for all your codes!
- —reposting the answer to this on anon in case it can help out anyone else…
first - thank you for the kind words :3
second - certainly; here’s a little tutorial for borders…
there’s a growing trend on tumblr to make either signature lines or borders to use both on themes and in posts — this tutorial uses PS5 — but any image editor where you have the capacity to use layers should work too…
…the trick is to make a border which will be visible on any blog background, without sitting in a big chunk of white, or disappearing completely — - this is how i make mine…
start off with a standard canvas - i usually go for 500px wide by about 100px high, you can always resize if you need to as you go…
then you need your image - most of the time i will look for stock images on deviantart - type your search into the box - then make sure to click on the ‘resources and stock images’ link.
so now i have my stock image, i save it, open it and drag it onto my blank document — a little bit of resizing, and voila…
before i add any other effects i need to make sure that i have only the snake and no white in the background, so — turn off your background layer, and then remove the rest of the background around your image. there are a couple of ways to do this…
Method 1. - use the quick selection tool -
make sure not to lose any parts of your image, you may need to use a layer mask and zoom to remove the fine details. i also tend to use the ‘refine edge’ option when i’ve made my selection so the ‘cut’ image doesn’t look pixelated around the edges - just play with the radius and feather options ( on something this small, a radius and feather setting of 0.2 was fine )
then remove any parts you’ve missed - just add a layer mask to your image layer ( click on the little square with a round circle in it to add one ) then make sure you use have the layer mask highlighted and use a small black brush to remove any areas your quick selection missed - sometimes it helps to add a temporary background so you can see more easily ( — layer > new fill layer > solid colour — and make sure it sits below your image so you can see! )
paint over the extra areas to remove any excess background.
however, if your image is detailed, this might be difficult to do - or there might be areas within the images where you can see through to the background, so try…
Method 2. - use colour range
click on select > colour range
then use the ‘eyedropper tool’ to click on the colour you would like to remove from your image ( in this case white ) - play with the ‘fuzziness slider’ until you have the areas you would like to remove selected - remember, the lower the fuzziness, the less colour will be removed - the higher it is, the more will be removed ( including all areas colours from within your image that match ). you can also click ‘shift’ while making your selections if the background isn’t one solid colour.
then just click ‘delete’ to remove the selection
it really depends on what your image is, as to which method you use…
if you turn off your background and any assistance layers, you should have a nice image on a transparent background…
now it’s time to add in anything else you would like, lines, effects, colours, etc. i tend to make sure any lines or text are in a medium grey colour, just so it’s more likely to look nice and be visible on black, white, or coloured backgrounds on peoples blogs ( remember, people might be reblogging your post if it’s a signature and if it’s for a theme, then you don’t want to have to change your border colours every time you fancy a change in background! )
once you have your border as you like it with any other edits - make sure that you have all background layers off and the ‘checkerboard’ ( as seen in the below image ) is the background - it’s time to save, and this is the important bit!
make sure to save your image as a PNG file. if you save as a JPEG or a GIF your editing program will usually substitute transparency with white!
here’s the finished border with a gradient map applied and a little bit of text… in this post on the dash you can see it on a white background - if you look at the post on my blog, it will be against my blog’s black background, but because the background of the border is transparent, it won’t matter!
2. once i have a texture i like i open it up in photoshop along with the photo i want to add it to
3. i always resize my screenshot first, i resize mine to 950px in width. you can easily bring up the image size window by clicking ctrl + alt + i (i resize my texture to the same width or maybe a little bigger sometimes, depends on the texture) and then drag (or copy paste) the light texture on top of my screenshot
4. the light texture i used had a black background and bright color lights so i set the blend mode to screen which basically overlays only the light parts of the texture onto the photo (you can bring up the blend mode by clicking the fx icon on the bottom of your layers window or right clicking the layer you want to edit, in this case the texture layer, and then selecting blending options from the drop down)
5. for this light texture i also desaturated it (ctrl + shift+ u) and then faded the effect by 50% (ctrl + shift + f) to make a lighter pink since the original was a hot pink.
6. with my eraser tool (e) set to 50% opacity and 0% hardness i deleted bits of the light texture that went over toby’s face and body.
7. and finally, over all of the layers i added some selective color layers that brought out the pinks of the photo :3