Silent Storms

In this small series, I will explain how to make a blend. A blend gen­er­ally is sized 800x600 pix­els, but tech­niques I use and will explain can be used the same for site head­ers and other such graph­ics. I will go through all the steps I take when I make a blend (or some­thing sim­i­lar), from choos­ing pic­tures that fit together to the end result. In this first part, I explain what to pay atten­tion to when choos­ing images, how to blend images together with the hard blend­ing and soft blend­ing tech­niques and how to blend strands of hair. In part two, I will be explain­ing focus, adding back­ground images (stock) and tex­tures. In part three, I will be explain­ing text and colouring.

Choos­ing your images
Apart from choos­ing high qual­ity pic­tures, you want to pay atten­tion to hav­ing images that will work together well.

When using images of the same per­son, you should use images from the same pho­to­shoot because such images go best together. Even if images are of the same per­son but dif­fer­ent pho­to­shoots, the dif­fer­ence between the images used will make the graphic just look weird.
It usu­ally looks best if you’re using images of peo­ple that are NOT all fac­ing the same way. If one is fac­ing front, use another pic­ture where the per­son is look­ing a lit­tle to the side, for exam­ple. Using two pic­tures fac­ing front can really make a graphic look off. There’s always excep­tions, but I find it really only works if you have a clear idea in mind. Using images of the same per­son, it barely ever looks good to have them fac­ing in sim­i­lar direc­tions. Using images of dif­fer­ent peo­ple fac­ing the same direc­tion can cre­ate a nice effect, though.
Another thing to note is that it usu­ally looks best if the size of the face isn’t the same in all the pic­tures you use. Of course, even if it’s the same in the orig­i­nal pic­tures, you just need to play around with resiz­ing the pic­tures (i.e. keep one fairly big, make one smaller).
These are just gen­eral guide­lines, and a lot of excep­tion can be made on them. It’s really all a mat­ter of exper­i­ment­ing with your graph­ics to learn which pic­ture com­bi­na­tions work and which don’t.

Some exam­ples:
These are bad com­bi­na­tions.
But these com­bi­na­tions would work well.

Blend­ing Images
Once you have cho­sen your images, you can blend them together in one of two ways: hard blend­ing or soft blend­ing. Using either, I rec­om­mend using layer masks because it makes cor­rect­ing mis­takes much eas­ier. With layer masks, you can switch between black and white brush to remove or re-add parts of the image. Doing so you can fix mis­takes much eas­ier, with­out hav­ing to go sev­eral steps back in the his­tory, which you might have to do with using the eraser, which would also cause los­ing every­thing you might’ve done after that par­tic­u­lar step in the his­tory. The tools I’ve described below are how they are named and how they look in Pho­to­shop. Other graphic pro­grams such as Paint Shop Pro and GIMP should have sim­i­lar tools, but might be named or look a lit­tle dif­fer­ent. If you don’t know where to find cer­tain tools in your pro­gram, I’d rec­om­mend googling for a guide on the tools and set­tings of your program.

Soft Blend­ing
For soft blend­ing, I use layer masks and a large, soft brush.
In Pho­to­shop, to add a layer mask to a layer, sim­ply select the layer you want to add the layer mask to, and click the layer mask but­ton on the bot­tom of the lay­ers win­dow.

In the lay­ers win­dow, you will see the layer mask added to the layer.

Make sure your fore­ground colour is black. Select a large soft brush and sim­ply go over the areas you want to remove and blend into the back­ground. You can play around with the opac­ity (of both the brush and the image itself) to make it blend into the back­ground a bit more softly, but I’d rec­om­mend doing so only after you’ve added a back­ground. Which is where the layer masks come in, because you can eas­ily change the blend­ing once you’re almost done, not hav­ing to go back in the his­tory and lose a lot of the work you’ve done.

This is an exam­ple of soft blend­ing.

Hard Blend­ing
You can do hard blend­ing sim­i­lar to soft blend­ing, just using a hard brush and zoom­ing in a lot more to remove the entire back­ground. I per­son­ally pre­fer using the pen tool. With it, I cre­ate a path around the per­son by click­ing along the edges. When you’re done going around the per­son, close the path by click­ing the first point again. You can see my path’s not per­fect, but it really doesn’t need to be. You shouldn’t cut out all strands of hair, but you don’t need to worry about every sin­gle strand too much either.
Then, you con­vert the path to a selec­tion. In Pho­to­shop, still hav­ing selected the pen tool, right-click any­where in your image and “Make Selec­tion…” > Feather Radius: 0 and Anti-aliased checked. Then you click the add layer mask but­ton (up until here there’s not sup­posed to be a layer mask on the image) and the per­son is cut out.

Again, this is just my pre­ferred way of hard cut­ting, oth­ers pre­fer using a hard brush on a layer mask or the eraser tool, so try them all and work with what­ever you feel most com­fort­able with.

Strands of hair
In a soft cut, the strands should still be there, prob­a­bly blended into the back­ground a bit. With hard cut­ting, strands of hair usu­ally need some work. As said before, you shouldn’t cut out all strands of hair, but you needn’t worry about every sin­gle strand either.
If you’ve done a hard cut, sim­ply zoom in fur­ther and use a brush to work on the strands of hair, or, if you want to keep it sim­ple, use a sim­i­lar back­ground color to the orig­i­nal image.

Another way that works well is, when your blend is nearly done and you have a com­plete back­ground, to dupli­cate the per­son layer, set the layer under­neath to Mul­ti­ply, then have the layer on top set at Nor­mal blend mode, and, using a soft brush, remove the strands of hair from that layer. These two lay­ers should now look like one, with the strands of hair blended into the back­ground per­fectly, and the skin color still look­ing normal.

Will be con­tin­ued
This was part one of my tuto­r­ial series on how to make a blend. In part two, I will be explain­ing focus, adding back­ground images (stock) and tex­tures. In part three, I will be explain­ing text and colouring.

I stopped blog­ging for a long, long time, mainly because it just wasn’t fun any­more. Yet, dur­ing my hia­tus, I missed blog­ging, so I knew I would come back to it. I’ve taken the time to think about what I want to blog about, and what caused my lack of inter­est before. I’ve come to the con­clu­sion I was try­ing too hard. I wasn’t even mak­ing money off this blog, nor did I plan too, yet I focused too much on my traf­fic sta­tis­tics and how I could gain more read­ers, cre­at­ing sched­ules for myself, push­ing myself to come up with blog posts more reg­u­larly, even if I wasn’t par­tic­u­larly inspired to write about any­thing. I’ve now decided I’m not going to write about things I’m barely inter­ested in or have lit­tle knowl­edge of just because it might gain me more read­ers. While I’m still focus­ing this blog around arts & design, I’ve now decided this really is a place for me, to keep track of what I learn, and for those already inter­ested in the things I have to share.

My blog posts will mainly include web design, web devel­op­ment and graphic design, and are all focused on hob­by­ists. Pro­fes­sion­als are unlikely to find much here that’s of inter­est to them.

While I’m very pas­sion­ate about arts and design, and have actu­ally very seri­ously thought about mak­ing a career out of it, I have found I’m not too fond of design­ing for oth­ers on a reg­u­lar basis and very much pre­fer keep­ing it as a hobby and a per­sonal cre­ative out­let. I have no degree in any form of design (or arts), but love mak­ing graph­ics, run­ning web­sites, tak­ing pho­tos and draw­ing in my spare time. It’s purely a hobby, and Silent Storms is the place I show­case my works and keep track of the things I learn. When­ever I blog or write arti­cles about some­thing arts and design related, it’s geared towards fel­low hob­by­ists. I’m not a pro­fes­sional, nor will I ever imply that I am. The blog posts and arti­cles will be writ­ten to the best of my abil­i­ties and knowl­edge, but please do feel free to cor­rect me when­ever you feel I’ve made a mistake.

I’ve been build­ing web­sites and mak­ing graph­ics as a hobby since 2002. I started out with those small “pixel” images, quickly moved on to pixel dolls, found fan­list­ings and started my first fan­list­ing at the end of 2004. Espe­cially as a fan­list­ing owner have I been work­ing on improv­ing my web­site graph­ics as well as my cod­ing (HTML, XHTML, CSS, PHP and MySQL). Around the same time, I moved on from pixel dolls to blends, icons and web­site graph­ics. Real­is­ing the amount of time I have been mak­ing graph­ics, my graph­ics are nowhere near as amaz­ing as I’d hope them to be. Even though over the years I’ve been a part of sev­eral won­der­ful com­mu­ni­ties and they’ve all played a part in teach­ing me about all these things, it was only when I joined graphic forums that I really started improv­ing my graph­ics by learn­ing from fel­low hob­by­ists. Every­thing I learned in those com­mu­ni­ties, I had to reg­is­ter for. Openly acces­si­ble design-related web­sites are mainly focus­ing on the pro­fes­sion­als. I don’t care about mak­ing money from my graph­ics or web­sites, I don’t care about start­ing a free­lance career, nor do I care for any­thing else that might be of inter­est to pro­fes­sion­als. For me, this is all just a hobby, and I just want to improve my graph­ics and my cod­ing as well as help other hob­by­ists with theirs when I can.

Basi­cally, I plan to share the things I’ve learned over the years with fel­low hob­by­ists, whether they’re just start­ing out and look­ing to learn the basics, or have been in this hobby for a while and are look­ing for ways to improve their cre­ative works or expand their knowledge.

Apart from the image qual­ity of the pic­tures you use in your graph­ics, sav­ing your graph­ics in the wrong file for­mat can also be dis­as­trous for your image qual­ity. If you’re sav­ing and plan to edit your graphic again at some later time, it’s best to save in the file for­mat that saves the layer infor­ma­tion for your graph­ics edi­tor (such as PSD for Pho­to­shop). When sav­ing for the web, the three most com­mon graphic file types are JPG, GIF and PNG. They all have dif­fer­ent prop­er­ties and their own ideal use for which they were created.

JPG/JPEG
This is the for­mat you will find most pho­tos in. It’s a “lossy” for­mat, which means it loses “unnec­es­sary” infor­ma­tion from graph­ics to com­press the file size. Graphic pro­grams usu­ally allow you to select the qual­ity when sav­ing to jpg. How­ever, when select­ing the high­est qual­ity, it’ll usu­ally lead to very big file sizes. Select­ing a lower qual­ity can result in blurry images. Repeated open­ing, edit­ing and sav­ing of a JPEG causes grad­ual qual­ity loss on each save, even if the same qual­ity is selected in your graph­ics editor.

GIF
In my opin­ion, GIF should not be used except for ani­ma­tions. GIFs can only save up to 256 colours, lead­ing to a huge loss of colour infor­ma­tion and thus qual­ity of your graph­ics. How­ever, it’s ideal for small images with few colours, such as logos and charts. It’s also the for­mat to use for animations.

PNG
In my opin­ion, PNG is usu­ally best for graph­ics such as blends and web­site head­ers. How­ever, you should always opti­mise PNGs when sav­ing, or it could lead to HUGE file sizes. PNG sup­ports vary­ing degrees of trans­parency, allow­ing for opac­ity effects, but that might not be dis­played cor­rectly across all web browsers.

Con­clu­sion
When sav­ing your graph­ics for the web, pay atten­tion to the file types and choose the right one for that par­tic­u­lar graphic. If you’re not sure which one you should use, you can save copies of your graphic in each file type and choose which one to upload based on image qual­ity and file size.

I’ve only shortly explained what the prop­er­ties of each file type are and what they are best used for. If you have any­thing to add, please do feel free to leave a comment!