Devlounge

Design, Develop, and Grow

Save Your Website Using A Data Center Service

By

Have you ever worried about your precious web site data, images, and database files not surviving a hacker attack, a power failure, a computer virus, or even a hardware failure? I certainly have been there. I recently lost some important files and digital images when a power outage occurred, and basically ‘fried’ an external hard drive I was uploading images to at the time. This was a rather disturbing ‘moment of truth’ for me, so I embarked upon a mission to find an alternative to my own backup systems, and in the process, found some interesting sites that offer different backup service plans to suit your data storage and recovery needs. I have looked into three different backup services, and discuss my findings in this article.

iBackup

http://www.ibackup.com/

At iBackup.com, I found their site easy to navigate and browse through, and their list of products was fairly extensive and impressive. Geared slightly more toward the business computer user than the individual, they have versions of their backup program for PCs and MACs, and also allow you to map your online account with them as a local drive. Nice. You can also backup your running MS SQL Server Databases by taking advantage of the embedded capabilities in Microsoft SQL Server’s backup and restore functions to provide fast and reliable backup and restore. Sweet. This same company also gives you the capability for accessing your PC from other locations, similar to the “Go To My PC” software that has been available for some time. There appears to be good support for their product right on the site in the way of toll-free numbers, live chat, and report forms. The interface for each of their products looks very familiar and simple for PC/Internet Explorer users, and they have software compatible with several versions of MAC OS. As far as cost is concerned, iBackup offers 10 Gig of space for $9.95 per month, and charges an extra $4.95 per month for the remote PC access feature. I could not find a free trial or demo version of this program, so I cannot comment as to its pros and cons. However, the description that I read about this company and their services online was quite complete and informative.

Evault

http://www.evault.com/

At evault.com, I found a form you can fill in, which gives you access to a Flash presentation which shows you an online demonstration of their product. This particular product seems mostly geared to small businesses and larger corporate businesses and industry. The product demo really went into excruciating detail about how businesses can lose up to 18 billion dollars per year in lost data. Their website notes that their backup system is automatic, easy to use, fast, and secure. They claim that their disk-to-disk backup solution performs fast backups, and is available on broad range of platforms. Evault also has managed service where they handle all the backup operations for you. This backup service seemed to have it all, and even more. However, a drawback to this company that is owned by Seagate, is that nowhere does it mention how much all their services cost! I hunted around and did a heck of a lot of clicking until I figured out that they actually want you to call them and ask! Sorry folks, but if they can’t even publish their pricing, that sends up some red flags! As impressive as their backup system seems to be, if they are reluctant to make their costs apparent, I think I have to give this one a thumbs down!

Carbonite

http://www.carbonite.com

Carbonite.com is perhaps one of the better-known online backup systems, partially because they have radio ads galore, and they are endorsed by notable radio talk show hosts Rush Limbaugh, Kim Komando, and Dr. Laura. This product is geared toward the individual rather than businesses, although I think many businesses could benefit from this service. This company also offers a 15 day “risk free trial” which is an attractive thought for most of us that would like to try out the service before purchasing it. Carbonite is the least expensive of the two services that actually talked about pricing, costing about 50 bucks per year for unlimited storage. This makes it a pretty attractive deal. This service is easy to obtain, and just simply backs up your entire computer’s Documents and Settings folder automatically in the background as you are using your computer. You can add extra files such as program files, system files, temporary files, videos, or individual files greater than 4GB manually. They tout double encryption security for your files as well. Unfortunately, at the moment, Carbonite only is compatible with PCs using Windows XP or Vista. However, they do plan to soon release their MAC version of the program. Carbonite sounds like the most cost-effective and easy-to-use system so far. I am planning to take advantage of their 15 day free trial, and will report my findings in a future review of this and other online data backup services.

Wrapping Up

There are quite a number of electronic data backup services popping up on the Net these days, and with the constant threat of computer viruses, hackers, power surges or outages, and other possible causes of computer data loss, it makes total sense to look into some of these services in order to protect your data, or your company’s data.

Of the bigger, global data service centers, NTT is the safest bet. There just is absolutely nothing worse than losing your hard work, and with the availability of these types of services, you can buy some peace of mind that your data is safe and easily retrievable regardless of what ‘disaster’ might strike your computer!

Text Treatments: Fire and Type

By

There are lots of tutorials floating around that show you how to “set your typefaces on fire”, but this quick little tip using Adobe Photoshop is one that is really fast and effective for you to experiment with, and make your blazing impression on any text that suits your fancy. Try this quick text treatment next time you are looking for a speedy, easy way to have your website banner burst into flames…

Steps

Open up a new document in Photoshop. I made mine 8 inches wide by 6 inches high, 72 ppi, Grayscale, and the Background should be White. Make sure your default colors are Black foreground color, white background color (press D on your keyboard to reset this default color scheme). Fill the transparent document you just opened by clicking ALT>Backspace (PC). Next, click on the Text tool in your toolbar, and set the default colors to the opposite scheme, white over black, by pressing the X key on your keyboard. You are going to type something in white now on your black background. Choose a nice, bold, blocky typeface, and set the size to about 100 point. See the example shown:

The next step is to rasterize the type by clicking Layer>Rasterize>Type. After that, rotate the canvas counter clockwise using: Image>Rotate Canvas>90 degrees counter clockwise, then apply the first effect filter for this lesson which is as follows: Filter>Stylize>Wind>Blast from Left. Repeat this step one more time to lengthen the blast a little. See example:

Now you will need to rotate the image 180 degrees: Image>Rotate>180 degrees, so you can blow the wind effect on the other side as well by using: Filter>Stylize>Wind>Blast from Left. When finished, rotate the canvas back to normal by: Image>Rotate>90 degrees counter clockwise. It is time to add some more effects to your type. First, use this: Filter>Stylize>Diffuse>Normal. See example:

Then, apply the next effect as follows: Filter>Blur>Gaussian>Adjust slider to 3. Example:

One more effect and we are nearly finished: Filter>Distort>Ripple>100 percent>Medium. See example:

Now that we are done with the effects, let us type the word over again in black (switch default colors back to black). Position this type layer over the original one that is now distorted and rasterize the type: Layer>Rasterize>Type. After you rasterize this layer, it’s time to click Layer>Flatten Image.

So, you are probably thinking “what happened to flaming type?” Well, here are the final steps to a really hot effect: Click Image>Mode>Indexed Color. Nothing much will happen in that step, however, the next one: Image>Mode>Color Table, and choose Black Body from the drop down menu. Now you should see the colors of fire all around your type, concentrated at the top and bottom. See example:

For your final step in this process, you probably should crop this and convert this file to RGB ready for web use. Again, click Image>Mode>RGB, and save your file, and you’ll have a super fun little text effect to heat up your site! Here’s the cropped final:

Wrapping Up

Obviously there are many techniques for making this type of flaming text treatment; I just thought this was a good “quick and dirty” version for you to try out in a jiffy. You can also do a lot more experimenting with this, such as make the text a different color all together, such as blue or yellow, and add some effects to that like a drop shadow or outer/inner glow. You can experiment with many, many different base fonts as well; I just used a very plain, bold font here called Impact (you should have it). There are many other choices. Photoshop is very flexible, so you have a lot of options open to you!

Make A Unique, Multi-Layered Web Banner Using Photoshop

By

There are many ways to create effective web graphics, so I thought it would be fun this week to create a colorful, unique web site banner using multiple layers in Photoshop. Contrary to popular belief, manipulating layers in Photoshop is fast and easy, and can allow you to be ultra creative in the designs for web banners either for your own site or for a client project. I will create the banner step-by-step using several different photo elements of mine and show you the basics to help you get started experimenting with the power of multiple layers in Photoshop.

Procedure

First, open your ‘base image.’ In the example below, I used a scenery shot of a field with a hill and lots of green grass and trees, and also a foreground tree overhang for depth. When working with your base image, remember that you are going to be cropping the final image to fit into the constraints of a banner, which will vary depending upon the site you are designing for. In the example I will show you, the final finished banner size will be (in pixels) 600 wide, by 300 high, at 72 ppi. So, with this in mind, mentally select a focal point area in your base image, and after a few adjustments of this base image, and the addition of several graphic elements, we will crop it to the correct size.

For the next step you will simply go to the Layers Palette and drag this background layer down over the New Layer icon (at the bottom of the Layers Palette next to the Trash Can icon), which will duplicate your base image. At the top of the Layers Palette choose Multiply from the little pull down menu bar. This will darken your base image markedly, so be sure you started with an image that wasn’t dark to begin with, something that is a lighter or medium range in darkness and contrast should do fine. Example of the results of this step below:

Next, we want to start adding some graphic elements, so I opened up a photo of the Moon that I captured, and selected it with the circle marquee tool up at the very top left side of the vertical toolbar, and copied and pasted it onto my background image using CTRL+C followed by CTRL+V. At the top of the Layers Palette you will now see the Moon layer. I also clicked the pull down menu at the top of the Layers Palette, and selected Screen, which eliminates any of the black background my moon was sitting upon. It also helps it blend into the cloudy background a little, and remains a bit transparent so the tree branches show through it, giving a bit of ‘false depth’ to the image. Here is an example of this part of the procedure:

For the next step of our image creation here, we need to click on Layer>Merge Visible (this command is close to the bottom of the Layer drop down menu) so that we basically merge all three of the layers you have so far, in order to be able to apply a special effect from our Plug-ins. Once you have performed the Merge Visible command, you will see that there is now just one layer called Background. At this point, call up your Flood plug-in Filter>Flaming Pear>Flood, or anything else you may have available to make the effect of a glassy lake on your base image. Click OK once the settings of Flood are where you like them, and you should have an image that is like the one below:

Okay, we are getting very close to the end of this exercise, but I felt like this picture was still a bit plain, although it is coming along. I decided that it might look nice to plonk another graphic element in the mix, so I opened up a photo of a boat that I took some time ago, and just simply dragged that onto my nice background image. I made a few minor adjustments of the boat, such as Edit>Transform>Scale, to make it smaller, and I also moved it around until it was in a place that looked good to me. Here is a view of this step:

This looks all right, but the boat seems to be floating in space rather than on the lake I just created, so that must be remedied! What is nice about Photoshop, is that it lets you apply effects to each individual layer. In other words, I can add the Flood effect to the boat individually, and make it look like it ‘belongs’ on the water there, blending in. Making sure the boat layer is active or highlighted in the Layers Palette, click on Filter>Flaming Pear>Flood, and try to match up the reflection with the bottom of the boat, so that no space is between the reflection and the bottom of the boat. See the example below:

Once you click OK, the effect will apply to the boat, and will make it look like it belongs in the picture as the example:

We are nearly finished, we just need to crop the image to a more ‘banner-appropriate’ size, and then add some text. So, let us begin by cropping this large image to something more manageable for our project banner. First, click Layer>Merge Visible again, so we get all the layers merged together. Now, grab the Rectangular Marquee tool, the top left tool in your vertical toolbar, and drag it inside your picture taking a chunk of your image that includes the main elements like the Moon and the rowboat, plus some of the water. You will want to then click Image>Crop, and take a look at what your markedly more banner-sized image looks like now. See the image example:

My image turned out to be about 600 pixels wide by 315 pixels high. This size is fine for my Blogger format sites. You may need to experiment with the size for your particular application. Next we will add some text, and then you will be finished with a very nice, creative, and unique banner for your blog or for a web site.

To complete this process, Click on your Text Tool in your vertical Toolbar. I chose a font called Poplar Std. which is a tall, blocky typeface. Type your title in the color you desire, and then apply a drop shadow effect to that type using the effects button located at the bottom of your Layers Palette, second from the left (looks like a black circle with a scripted “f” in it), and choose Drop Shadow. Click OK. The example turned out like this:

Now it is time to click Layer>Flatten Image to merge this new type layer with the rest of your design. Once you flatten the image, be sure to save it as a .jpg, and you are ready to upload it to your site. Here is the example of my final flattened image:

Wrapping Up

This might seem like a rather involved process just to design a web banner, but if you are interested in experimenting and working with layers in Photoshop, and creating something that is unique to your design elements and creativity, this is a very quick, fun little exercise to try out. This tutorial required the use of the Flaming Pear plug-in for Photoshop called Flood. However, you can do just as well without that step, and create any kind of composite layer image you like. The creativity part is literally at your fingertips!

Beautify Your Images with Affordable Photoshop Plug-in Filters

By

A while back, I discovered some fantastic plug-in filters you can buy to spiff up your web images that work wonderfully with Photoshop and Paint Shop Pro. I thought it would be fun to give a quick blow-by-blow on some of these filters just to give you an idea of what to expect from some of these great little additions to your graphic design software. Priced from as low as $15 per individual filter, or $49 for certain bundles containing four or so different filters, you simply can’t go wrong with these creative accessories.

Testing Plugins from Flaming Pear Software

This amazing software company has a fantastic group of plug-in filters available for purchase on their site, and each one is available to you for a 30 day free trial download! I highly recommend all the plug-ins this company offers. I have chosen five of their different effect filters to discuss in this article, and I hope you will go and check them out and grab your trial downloads…you won’t regret it!

Super Blade Pro – $30

This plug-in filter is an absolute “must” for web designers who are looking for some fresh ideas to create unique, attractive web buttons. Once you install Super Blade Pro, it is a breeze to create a basic web button, then apply the filters by clicking Filter>Flaming Pear>Super Blade Pro. Once the filter quickly launches, you are shown hundreds of different variations, colors, textures and styles that you can apply to your plain ole button. I was floored by the beauty and uniqueness of each of the random styles you can sift through and choose from just by clicking a pair of dice. If you don’t happen to find anything that suits your fancy from their myriad of preset designs, you can tweak and torque the many settings and create your own variations from there. The simplicity of this plug-in will amaze you, and the results speak for themselves. Here is an example of what Super Blade Pro looks like once you choose it from your Filter menu in Photoshop:

I was extremely impressed with Super Blade Pro for its fantastic design choices and also for its ease of use. This effect filter gets a rousing standing ovation from me.

Flood – $20 (or $50 when purchased in the Photography Pack, bundled with Aetherize, Melancholytron, and Mr. Contrast)

I have to say this effect is probably the most fun to use of all the Flaming Pear filters. It is exciting to see the results when you open a photo of say, a sunset, for instance, then apply the Flood filter to create your own beautiful “digital water scene” that suddenly appears before your eyes. Add a few of your other extracted elements and you end up with a stunning, creative digital illustration that will amaze you and everyone who sees it. The settings for the Flood waters you immerse your image in vary from waviness to complexity; and wave height to brilliance. It is just a stupendous effect that I personally never tire of. Take a look at the example below to see what I mean:

Once you adjust the settings to get the effect level you desire, and save your base image you’ve just ‘flooded,’ add some of your other graphic elements, such as I have done in the next example below, and enjoy the tranquility of your beautiful creation.

Whatever your desire in a water scene, whether you want to create a glassy pond or a raging hurricane, you can create all things watery with this versatile filter. Flood gets a very lengthy standing ovation from me.

Aetherize – $20 (or $50 when purchased in the Photography Pack, bundled with Aetherize, Melancholytron, and Mr. Contrast)

Aetherize is as its name suggests, an ethereal treatment for any image you choose. This filter is pretty versatile, and allows you to take mundane snow scene and turn it into a wintery wonderland, or a fairytale setting that looks amazing. A snow scene is what I used to illustrate Aetherize, but you can use anything at all. There are tons of well thought-out presets in this filter set for you to try, or you can make your own variation by tweaking to your heart’s content. For an example, I opened an image I captured of some trees with snow falling on them. You can see my results below:

After I opened my snow scene image, I clicked Filter>Flaming Pear>Aetherize, and started experimenting with the different presets. I settled upon the one above that has some interesting and ‘dreamy’ looking colorizations to it. I then did a little tweaking and adding of other elements, and ended up with the dreamy scene below:

I also performed another little trick with this image; I combined filtration by applying the Flood filter to this after the Aetherize filter, to make an even more fantasy-looking composite image. This filter is really spectacular for sending any of your photos into an ethereal or dreamy direction, and gets a very enthusiastic round of applause from me!

Melancholytron – $20 (or $50 when purchased in the Photography Pack, bundled with Aetherize, Flood, and Mr. Contrast)

For my last filter review today, I’ve decided to talk about Melancholytron. This filter isn’t a really heavy-duty effect module like some of the others mentioned above, but it is a lovely addition for those who want to give a bit of an ‘old timesy’ look to a photo by blurring out photo edges and adding a sepia vignette to it. This effect works just splendidly on images that are already heading toward sepia tone, or even on b/w images as well. For this example I am using a photo that I ‘borrowed’ with permission from a friend of mine, Aussi photographer Michael Rowley, who captured a wonderful photo of a pair of glasses on an open book. I felt that this image would really be terrific with the addition of the Melancholoytron filter. See the example:

Melancholytron has many different presets you can choose from, and similarly to the other filters discussed here, also allows you to tweak as much or as little as you like using the settings sliders. For Michael’s lovely photo, I decided on a round vignette with a dark sepia tone to it, which enhances the tinting in the lenses, while gently blurring out the edges of the picture. Below is the finished photo after I also adjusted the levels slightly using Image>Adjustment>Levels. I felt this image just ‘come alive’ after applying the filter. Melancholytron gets an extremely heartfelt round of applause from me.


Photo: Michael Rowley, http://www.keepsakesphotography.com.au

Wrapping Up

With so many plug-in effect filters out there, it was really difficult to pick out just a few to review and discuss, and I barely just scratched the surface here by covering only one of the many plug-in software developers. However, I do plan to acquire more effect filter plug-ins in the near future, and I will certainly share some input with you on those as I work my way through them! It is absolutely amazing how many terrific creative tools are available, and just a few clicks and a free trial download away from you at anytime.

How to Use Adobe Illustrator to Create a Unique Distressed Text Effect

By

I was just surfing around the net the other day, and I started thinking about the myriad of varied text treatments I was seeing on different banner graphics. I decided that it is more interesting to design your own textured background for text rather than try to find an actual typeface on one of those free font download sites such as Fontgarden.com or Stomp.com, etc. I bring up these “free” font download sites because if you are going to use such a typeface from one of these sites, you usually have to pay for it in the long run if you want to use it on anything that is of a commercial nature, such as your website! It is always a good idea to check into the ramifications of downloading anything that is deemed as “free” anyway, regarding the legal copyright and usage of such elements. So, to get around any usage issues that could arise from finding a distressed typeface on the Net, and incorporating it into your web design, I decided to share this quick and easy Adobe Illustrator tutorial with you.

Step one of this process was to find a typeface on the Net that sported a similar treatment to the “distressed” look I wanted. Although I wanted something a bit more radical as far as the “distressing” part was concerned, I did come across this text treatment on the website of boxer Joe Calzaghe:

You get the idea of “distressed” or “beat up” text from Joe’s name on this banner graphic. While I liked this, and found it unique, I thought it might be interesting to push the envelope a bit, and come up with a considerably more distressed or “textured” look than this, while still making the text legible and eye-catching.

Taking the Steps

Open Adobe Illustrator (I used CS2), and then File>Open an image that has a lot of contrast and would make a good textured background to use as a base for your distressed text. For this, I cropped a section out of a larger photo of ocean and beach to the dimensions of approximately 8 inches wide and 2.5 inches high, and resolution of 150 ppi:

I felt that this photo had a lot of gritty little details that will translate to an interesting, highly textured base for my text treatment.

In Illustrator, select the image with the Selection tool (V) and then Object>Live Trace>Tracing Options. You want to see Tracing Options so you can modify some of the settings, and preview the results before you convert the image. In the dialog, enable the Preview option. The other Presets should be left at their default. This trace you are about to do, will output in black and white, which will be best to work with for this particular effect we want. You will also want to change the Threshold value, which controls the amount of black or white that appears in the image. We want as much detail as we can get, so I suggest using a value of around 75 or 80. But, don’t take my word for it, mess about with this yourself, the values can be adjusted right there in front of your eyes since you have the Preview button checked. Adjust the black and white image to have plenty of small details, and when you are happy with the Threshold value, go ahead and click the Trace button.

Next, in order to use this tracing, we need to convert it to paths. So, while the tracing is still selected, pick Object>Expand. In the dialog that comes up, click OK. For this project we want to work with the black areas only. Choose the Magic Wand tool (Y), select the white areas, and then press the Delete key (Mac) or the Backspace key (PC).

Now we will be placing some text over a portion of your new texture background and thus be able to get an idea of what the distressed text will look like. To accomplish this, click down below your texture somewhere else on the artboard, and choose the Type tool (T) and type something. I used “DIGITAL” for my example. I used a large font size, something like 60 or 72 pt, and chose the plain Arial Black, a font that’s free to use. I also switched my type color to blue in order to view this part of the operation more easily. Once you’ve typed your text, move this text onto the texture background and move it around until it is in a place where you feel the most texture will be applied.

Let’s have a look at what the text will look like once applied to our text by creating a clipping mask that uses the letters as a mask. Click Command+A (Mac) or Ctrl+A (PC) to select both the text and the texture, and choose Object>Clipping Mask>Make. Once you click again outside of your texture area, you’ll see the text revealed on its own, with the texture showing through it. In case you may not like how it looks at first, undo the clipping mask and move the text around to another area of the texture background and repeat this procedure again. Another option is to scale the texture background up or down or rotate it, distort it anyway you want that will help you achieve the texture on the text that looks how you want it. Here is what my text looked like:

For my purposes, this turned out exactly how I wanted it, a little distressed, but still clear and easy to distinguish the letters.

At this point, we want to delete some of the excess texture background, which we don’t need to keep, as it just is not needed, and makes the file size larger. First, we undo the clipping mask by clicking Edit>Undo Make Clipping Mask. Open the Layers palette and expand the layer by clicking on the arrow next to the Layer 1 thumbnail. Click on the texture Group layer to highlight it in the palette. Option+click (Mac) or Alt+click (PC) the Create New Layer icon, and name this layer “Square” in the Layer Option dialog, then click OK. This positions the new layer between the text and the texture.

Make sure the new layer called “Square” is highlighted or activated, and select the Rectangle tool (M) and draw a rectangle over the text and texture you want to keep. I suggest keeping the rectangle as close to the text as possible without clipping any of it. Click Command+A (Mac) or Control+A (PC) to select all. Open the Pathfinder palette (Window>Pathfinder) and click the Crop icon. See example:

What happens next, is a Live Paint Group, which is indicated by a grey rectangle around the artwork might appear after you click crop. If this occurs, just use your Selection tool and double click in an empty area of the artboard to disable it. Now you can safely reapply the clipping mask on your newly cropped artwork. Click Command+A (Mac) or Control+A (PC) to select your text and the texture, and then click Object>Clipping Mask>Make. Now you have a very unique piece of text that has a sort of ‘worn out’ or distressed appearance in your arsenal of special effect elements!

At this point you should File>Export and Save As a .jpg or other format file for use in your web designs. This can be opened in Photoshop now, and subjected to some more special effects if you so desire.

Wrapping Up

Although this is a simple enough procedure, it has a few specific steps, and may not be suitable for everyone wanting a text effect solution. This is offered as just one of the many options available to designers in search of interesting text treatments, and it also provides a nice opportunity for those not as comfortable using Adobe Illustrator to advance their creative skills in that program a bit!

About Devlounge

Want to read more about Devlounge, or maybe you want to contact us, or even advertise? Oh, and don't forget to subscribe to updates!

The Best of Devlounge