Welcome to another Media Monday and Techno Trauma edition. I currently run two websites, this one–which is my personal author site, and The Purple Rose Tea House–which is for promoting m/m romance authors. Both have different themes and color schemes. For my sites, I try to create all my own graphics, not just so they match my sites’ themes, but for copyright issues. To make my graphics, I use Photoshop. But what if you don’t have Photoshop? It’s a crazy expensive program. I have an older version that I’m perfectly happy with and have no intention of offering my first born for a new version anytime soon. It does what I need it to do.
Well, fear not. You don’t need Photoshop to create your own web graphics because there are plenty of free programs out there you can use that will get the job done. The first thing I have to insist is that you play around with your program–whatever it may be, and get to know it a little before you start creating and putting graphics all over your website. If you’re an author, your website/blog is your online home. It represents you. It’s what readers, agents, reviewers, fellow authors, and everyone sees when they look you up. Dress to impress they say. Your website says more about you than you know. It’s not about paying ridiculous amounts of money for a site, especially if you’re just starting out. It’s about putting in the effort to put your best foot forward. Your website can be clean and simple, but it should look professional.
If you’re putting a site together and don’t know how to go about it, just ask. There are always folks happy to help. I’m always happy to offer a hand where I can. I didn’t pay for my website, nor did I take any courses. I learned how to put it together the best way I could from the ground up. What I didn’t know, I Googled. This site was a white blank slate when I started, with the coding there as a start off point because lord knows I hate coding. Anyway, onto the graphics. The interwebs is full of tutorials for how to make this or that graphic for the multitude of programs out there. One of the those awesome programs is Pixlr.
Pixlr is laid out nearly the same as Photoshop with almost all the exact tools. It’s easy to use once you get the hang of it and the best part? It’s free! The editor opens up right online and you’re ready to go. I’ve put together a super easy tiny tutorial for creating a badge on Pixlr, using the Advanced editor. (Just click on the images for full screen view).
Step 1: Go to www.pixlr.com and choose Open Pixlr editor (Advanced) option.
Step 2: Click on Create a new image.
Step 3: Give your new file a name and choose your size. The Presets drop down box is pretty awesome, because it has some industry banner sizes already set up for you. I’m choosing 180 x 150 for a button badge. If you don’t want any of those sizes, just choose a random one and you’ll see the height and width boxes under it. Just change it to whatever size you prefer. Under it will also be a little box with the word Transparent next to it. That’s especially handy if you want a transparent background for making a .png file.
Step 4: So there you see our 180×150 box with transparent background. Now I’m choosing my background color. Let’s say it’s for the tea house. You see the set of numbers and letters next to the red check mark? That’s the color code. When I’m designing a theme for a site, I make sure I jot down the codes for all the colors I use. This will allow me to have consistency with all my graphics because I’ll stick to those exact colors. So I’ve chosen my color. Now I click OK. Then I go to my little bucket tool over there on the left and click on that. I hover my bucket over my blank background and click. Voila, your background is filled in. *** Very important. Make sure to save your file. Since you’ll be working with layers, save as a PXD. Go to File > Save > PXD (Layered Pixlr image).
Step 5: As you can see, my background has been filled in. Now I want to give it a little border. I love borders. It neatens things up. With my trusty color codes at hand, I go over to the right hand side. The box in the middle is your Layers box. At the moment, we only have the one layer which is out background. The great thing about working with layers is that whatever you do to one, won’t affect the others. I use a lot of layers when I work on something. Now on the layers box at the bottom there’s a bunch of little symbols, the third one in is the Layer Styles (properties) button. This lets you add a drop shadow, bevel, or glow to your layer. Now Photoshop has a Stroke option for creating borders, Pixlr doesn’t, but if you select Inner Glow, set the hardness and opacity all the way up, you get solid lines. Boom, instant border! When you click on Color, the color chooser will pop up. Click OK and as you can see, my button now has a nice border.
Step 6: Let’s add some text. Let’s say this badge is for my post headings for when I have a guest post from a fellow author. In my tools, I select the button with the A which is my text button. Click anywhere inside your graphic and the Text box will pop up. Type whatever you fancy in the box. Choose your font, the size you need, the style, and the color. Again, this is where your color codes come in handy. I used the same purple as my border. Click OK. Don’t worry if it’s not lined up, we’ll be moving it next.
Step 7: In your toolbar, the black arrow with the little cross is your Move tool. When you click on that, whatever layer you’re working on, you can move things around. Now if you click on that, you can move your text. If you want to be precise, click on your arrow tool and then use your keyboard arrows to nudge the text in whatever direction you need to get it aligned.
Step 8: Next, let’s say you want to add some kind of image related to your badge. I went to Stock.xchng and found me this nice little open book. I saved it to my PC and now I want to open it. So I go to File > Open image… I find my open book which I saved and open.
Step 9: There’s my book image. Now I want to select my book. Here’s where we separate the boys from the men. You can either use the wand to select the background (not the book) and then invert the selection (which is what we’re going to do) or you can use the Lasso tool to select just the book. The Lasso tool means you’re handdrawing the selection. Yes, it’s more difficult, but also more accurate. Now what I’ve done is select the wand, clicked on a white section of the book’s background and then use the Lasso tool to fine tune my selection. Pressing down Alt (PC) while using the Lasso will take away from my selection, while pressing Shift and using my lasso tool will add to my selection. Okay, so I selected the background of the book. What’s next? Go to Edit > Invert Selection. Now my book is selected instead of my background. Copy and paste that that sucker onto your badge.
Step 10: Okay, that bad boy is huge! Let’s fix that. Click Edit > Free transform. A little box with dots will appear around your image. What you need to do is hold down the Shift key while you drag the upper left corner dot inward. What that will do is make certain your ratio stays the same, so the image will get smaller on all sides, not just your height or width, giving you a wonky image.
Step 11: Here’s a closer look at the Layers box. As you can see, there they all are. I’ve got each layer, there’s the Layer Styles (properties) button where I added my border to my background, there’s the Add Layer button and the Delete Layer button. You can click on any layer and then click the Layer styles and add a drop shadow or glow.
Step 12: Okay, so let’s say you got your badge how you want it. I shifted the text a little further down, my book is centered. I want to play with some filters but at the moment, my background, book, and text are all on different layers. If I were to try and add a filter now, it would only add it to the layer currently selected. Because I won’t be coming back to this image, I’m going to flatten all my layers so it’s just one layer. I go to Edit > Flatten Layer. *** Let’s say you want your background to be transparent and you didn’t add any color or border to your image. To keep the transparency, instead of clicking on Flatten Image, you click on Merge Visible just above it instead. If not, your transparent background will become a solid color, usually white.
Step 13: Soon as that’s done, my image is now one flat image. Now I can play with Filters! If you click on Filter at the top there, you’ll see all kinds of fun options. Each one will bring up it’s own dialogue box where you can make adjustments. I chose Vignette, picked another one of my color codes and played with the size, giving my image a little glow around the edges. If you don’t like the filter you just applied, click Edit > Undo, or Cntrl + Z (PC). Make sure to save your file. Go to File >Save> Choose either PNG (If you have a transparent background) or JPG format and that’s it. You’re all ready to go!
Well, I hope this little tutorial was helpful. Pixlr is an awesome image editor. When creating graphics for your site, be aware of the edges around your images. Too many white pixels around a pasted image will make it stand out as a pasted image and looks unprofessional. There are plenty of ways around it. By lowering opacity on drop shadows you get a softer, more natural looking shadow.
If anyone has any questions on creating graphics, feel free to leave a comment and I’ll do my best to help, maybe even do another tutorial. If anyone wants to know how I did something specific on any of my sites, feel free to ask that as well. Happy imaging!