Visual Downloader Documentation

Visual Downloader is a download tool that allows Joomla! administrators to associate an image with a downloadable file so that users can preview what they are downloading.

Visual Downloader is packaged as a .zip file, which can be installed using the standard Joomla! installation tool.

Once you have installed Visual Downloader, you can create categories and sub-categories for your downloadable files.  When you create downloadable files through the Visual Downloader downloadable file manager, you assign each of them to one of the categories you have created.  If you upload an image preview file for a particular download, that image preview will be associated with your download file to give users a preview of the file(s) they are downloading.

Visual Downloader exists as a Joomla! component.  It can be linked to as a Joomla! Menu Item Type.  When this method is used, the menu item links to a page that includes all of the downloadable files you have created.  If you want to create a link to a Visual Downloader category instead, you would need to change the Menu Item Type from Internal Link->Visual Downloader to External Link and insert the URL of the Visual Downloader category you want to link to, for example:  index.php?option=com_download&view=download&cid=[categoryId], where categoryId is the id of the category you want to link to.

Illustrator Tutorial: Arching Text and other Warping Options

I worked with Photoshop for years before I did anything with Illustrator.  In fact, for a long time I avoided Adobe Illustrator.  It wasn’t that I didn’t want to learn how to use it.  Illustrator was just so different from Photoshop it seemed.  But once I was finally forced to start using Illustrator I learned that it is actually quite similar to Photoshop.  Many of the tools are similar, and most of the tool bars are the same.  There are definitely advantages of each.

There are some things that are way different however.  Sometimes it is frustrating trying to figure out the “new way” of accomplishing a task that seems so simple in Photoshop.  One of these cases is with arching text.  In Photoshop it is easy to arch text using the Text Tool, so that is naturally how I tried to arch text in Illustrator.  It is very different however.  This is how to arch text in Adobe Illustrator.Select the Text Tool from the Tools Menu. 

Text Tool

Write the text you want to arch.  You will need to adjust the font and size of your text now before you arch it, so make the necessary changes now using the Type Menu.  For this example I am going to use Garamond font at 72 pt.  I am also going to stretch the font 140% tall.  You can do this by clicking on Character in the Type Menu.  The Character Panel becomes available with more options for adjusting text.  Generally I have found that arched text looks better when it is stretched taller.

Character Panel

Once the text looks how you want it, choose the Selection Tool which is the black arrow on the Tools Menu. 

Selection Tool

Click on the text to select it.  A blue box with appear around the text.

Selected Text

In the File Menu select Effect>Warp>Arch. 

 Effect, Warp, Arch

The Warp Options Window will pop up.  I am going to Arch my text 20%.

Warp Options

As you can see, there are several other options here for warping your text.  You can Arc, Bulge, Shell, Flag, Wave, Fish, Rise, Fisheye, Inflate, Squeeze, or Twist your text.  If you insert a negative number for the Bend in the Warp Options Window the text will arch downward instead of upward.  You can also distort the arch effect by changing the percentages in the Distortion section.  Again a negative value will distort the text in the opposite direction a positive value will.

If you select Preview in the Warp Options Window, you will be able to see how your warping selection will affect your text before you apply it.  If your text did not turn out how you want it, don’t worry, you can still make changes.  To change the effect simply go to Effect>Warp>Arch again.  You can also select the Text Tool and make changes to your text.

Arched Text

 

Photoshop Tutorial: Separating Colors for Screen Printing

 


About the author:  Lisa is a part-time graphic (etc.) designer when she’s not being a mommy and helping her husband sell ultrasound therapy machines in their online store.


 

If you are new to screen printing, you may not know where to begin when it comes to getting artwork ready for printing.  Separating images into colors is an important step.  Luckily Photoshop makes this pretty easy.  I am going to show you how in just a few easy steps.

Separate Color Original Image

Open your picture in Photoshop.  Now select the magic wand tool in the tools panel.  Use this tool to select all of one color in the image.  If you need to select more than one area, hold the shift key down as you click on the picture.  You will see “dancing ants” around the selected areas.  If you click on the wrong area, simply press Ctrl+Z to undo the last move, or right click and select Subtract From Selection. 

Magic Wand Tool

I am going to select the red color first.  Then I am going to right click and select Layer via Copy.  This will create a new layer with just the red color in it.

Layer via Copy

If you look at the layers panel now you will see two layers.  Unclick the eye icon next to Layer 1 to hide the layer.  You should be able to see just the red layer left in the image.  I am going to change the name of this layer to Red by double clicking on the name and replacing the text.

Hide Background

Red Layer

If everything looks right, click the space where the eye icon was before to make Layer 1 reappear.  Follow the steps of selecting a color and Layering via Copy again until all colors are represented in their own layers.  Each time you select a new color for layering, you will need to make sure Layer 1 is active.  You can tell because that layer will be highlighted in blue in the layers panel. Layer 1 needs to be active because this is where all the colors reside originally.  If a different layer is active then when you try to use the magic wand tool to select a color, it will not work correctly because the color you are selecting is not present in the active layer.

Separated Colors

The blue layer is a little more complicated than the other layers.  First of all, I need to make sure I don’t forget the areas inside the letters of STONY BROOK.  I will zoom in when I select these areas to make sure I don’t miss anything.  Also, if I use the magic wand to select TM it will probably not look crisp when screen printed.  So I am not going to select this when I layer the rest of the blue.  Instead I am going to create a new layer and use the text tool to rewrite TM.  I am going to select Arial font and sent the type at 10pt.  Write TM in black and move the TM to the correct location on this image.  I am using a different color than the TM was originally written in so it is easy to see if the font is the right size, etc.  It looks like this font is a perfect match.

I am now going to hide all the layers in the layers panel except the blue layer and the TM layer.  Right click in the layers panel and select Merge Visible.  TM and the blue color are now together in one layer.

Merge Visible

I need to create registration marks now so the layers are easy to line up when screen printing.  Use a thin font like Arial and write the + sign in black in three corners of the image.  Use a font size that is easy to see but not too thick or it will be hard to line up.  The registration marks need to be far enough away from the image that they do not interfere with printing, but still close to the picture.  Once you print a few logos you will get a feel for how to create and place these marks.  In this example I used a 48pt font.

Registration Marks

Now select the blue layer.  In the file menu go to Image>Adjustments>Levels.  The levels options window will pop up.  Under Output Levels: there is a black and white bar with two arrows underneath.  Click on the white arrow and drag it all the way to the left end of the bar.  This will turn the blue layer black.

Adjustments

Adjust Output Levels

Do this with each layer until each layer is black.  Now you are ready to print.  You will want to print each color layer separately in black with the registration marks on each print.  Below are picture of how each printout should look.  Good luck printing!

Separated Colors

Final Tip: In this example it would actually be a good idea to use the entire logo to print the dark blue layer.  This is the layer I would print first when screen printing.  If you choose to do this, it will prevent the shirt you are printing on from showing through even if the screens are registered slightly off.

 

Finding the Right Host for Your Web Site

With the proliferation of the Internet, there are so many web hosts to choose from that it would be impossible to shop even a significant percentage of them.  However, finding the right web host can be critical to the success of your business, especially if your business is predominantly online.   Hosting packages can start as low as $4.95 per month for shared environments (I’ll explain later).  On the other end of the spectrum, established companies often budget thousands of dollars each month to web servers and related costs.  The type of hosting your business needs and the corresponding amount you’ll pay for that level of service depend upon what you are hoping to accomplish with your web site(s).  Here are a few tips and scenarios that will help you choose the web hosting platform that suits your needs.

“Free” Hosting
Visit any of the thousands of the Blogspot.com blogs that post Google AdSense or other affiliate ads, and you can see that there are many people who make at least some portion of their income by taking advantage of the free hosting accounts offered by blog hosts.  Setting up a blog-formatted website is simple and straight-forward.  All you need is an email address and an idea.  Because most of these free hosting accounts run on high performance web servers, it’s a rare case that your blog account and blog site would be down.  However, if you are trying to present yourself as a legitimate company, a serious web site with your own domain name and custom web site are essential.

Shared Hosting
If your web site is on a shared hosting plan, it sits on a web server that likely services anywhere from a few web sites to hundreds of them.  The biggest advantage of a shared web hosting plan is obviously the low cost.  Shared hosting plans are good for entrepreneurs who are prototyping their ideas to see if they can get them off the ground.  When my first internet business was young, I wanted to keep my costs down so that the significant investment was my time.  I chose a shared hosting plan that cost me less than $10.00 per month.  As the business grew and it became more critical to keep the site up constantly, we outgrew the shared hosting environment, and our host allowed us (as most gracious web hosts do) to transition to one of their Virtual Private Server accounts. 

Because most users of shared hosting accounts aren’t a skilled at administrating web hosting environments, most of the technical details (configuring the web server, etc.) are handled by the web host’s employees.  This simpler arrangement can be beneficial to people who don’t want to get bogged down in the details of configuring email accounts and databases and Apache web server files.

The main drawback for shared hosting plans is that they are typically not as reliable as other plans.  There is no way to tell (in most cases) what other web sites are sharing your server.  If you have the misfortune of being neighbors with an image download site that has tons of visitors, your web site is very likely to experience slow load times and periods where it’s inaccessible.  It can be frustrating to operate an online store and consistently know that your customers cannot even find you.  The downtime can even affect your search engine rankings.  If the Googlebot comes to crawl your site only to find that it’s unresponsive, you’re likely to get dropped in the search rankings.  In my experience, the technical support available to shared hosting plans drops a few levels from the attention given to plans that cost more.   If your web site is relatively new and doesn’t get a ton of traffic, this scenario may be okay for you.  However, if you cannot afford to have downtime, be prepared to pay more for hosting.

Virtual Private Server
A Virtual Private Server (VPS) is an upgrade to shared hosting.  It typically costs about $40-$60 per month.  VPS accounts give users greater access to the nuts and bolts web server account.  Often VPS accounts allow lower-level functionality such as the ability to use an ssh program to connect to a Linux VPS.  VPS accounts typically have quicker and better response from the web host’s technical support than shared plans.  The selling point of VPS accounts is that they don’t openly share all the resources (memory, CPU, bandwidth, etc.) that shared accounts do.  However, with a VPS setup, your web site is still sitting on the same computer as other web sites over which you have no control, so there can still be periods of slow response times and downtime.

Dedicated Server
Getting a dedicated server is like buying your own home and setting it up the way you want it.  At the low end, the price tag for owning a dedicated server is about $200.00 per month.  When you purchase a dedicated server plan, you are essentially renting a computer in your web hosts data center.  Dedicated servers give you a lot more control of your web site’s resources.  You can set up Apache the way you prefer it, and you can install extensions per your requirements.  With the low-level access comes responsibility, though.  Letting a novice mosey around on your dedicated server account could result in the destruction of one or more web sites being hosted there just by running a simple command from the black box.  If you think your web site(s) merits a dedicated server, make sure you’ve got someone capable of managing the setup.

Which host?
The types of web hosting accounts mentioned above are pretty standard in the web hosting world.  Despite the similarities between the types of accounts, there are often significant differences among hosting providers.  Before I settled on the host I use now (HostGator.com), I had to date and dump at least three other hosting companies.   Here are some things to look out for when considering who you should choose to host your site.

Reputation
It’s worth spending time checking the ratings on the host you are considering.  Nowadays it’s very easy to get the dirt on most companies.  There are several web host review sites online.  Reading the experiences of those who have used the host’s service can serve to settle your mind about committing or provide helpful warnings about the company you are considering.  One thing to remember when reading reviews is that the source of a review can often be a competitor trying to sabotage a host’s reputation, or on the other hand, nothing keeps a web hosting company from funneling employees to review sites to pat their backs in public.  Try to find objective reviews that list facts and details when checking out a potential host.

Technical Support
Before choosing a host, it’s probably a good idea to speak with their technical support to find out if they know what they’re doing.  Even though I have a pretty extensive background in web hosting related technologies, I still find myself needing to lean on technical support from time to time.  I’ve used many hosting companies whose technical support seem to be guessing, or who are simply reading scripts when they’re asked technical questions.  Before you commit to a hosting provider, it might help to ask some pertinent questions of the technical support staff, almost as if you’re interviewing an IT employee.  After all, that’s essentially what they’ll become.  Most worthwhile hosting providers have an online chat tool that allows you to easily access their highest level support people.

Hopefully you’ve learned some things from this explanation about web hosting.  Good luck with your web site and your business.

 

Photoshop Tutorial: Color Matching

We had a customer who wanted to see how a pair of basketball shorts looked with a particular jersey.  The only problem was that we did not have the jersey and shorts on hand in the same color.  Instead of losing time and money shipping the correct color to our main office, we took this picture with mismatching colors and changed the color of the jersey in Photoshop to match the shorts.  I am going to show you how to replace and match colors in pictures so you can use this awesome tool yourself.

Color Matching Original Image

Open your picture in Photoshop.  Save this picture and give it a new name, then open the original picture again.  You should now have two copies of the original image open.  First we are going to work with the copy that is not going to have any color changes.  We are going to call this image the Source Image.  Select as much of the shorts as possible using a selection tool.  You can use the Magic Wand, Lasso, or other selection tool.  I used the Magnetic Lasso to make my selection.  I clicked around the main section of the shorts to get as much of the red color as I could.  As you can see, it is not necessary to select all of the shorts, but you do want to get the full spectrum of color so the new coloring will be accurate.

Magnetic Lasso Tool

Selected Red Shorts

Now go back to the other image.  This is the image that you will be replacing the color on.  It is the Destination Image.  Right click on the background layer in the layers panel and select duplicate layer. 

Duplicate Layer 

By default this new layer will be called Background copy.  I am going to rename this layer Color Replace and click OK to complete the step. 

Rename Layer 

We will be working with this duplicated layer to preserve the original image. Use the selection tool of your choice to select the entire area where the color should be replaced.  Again I used the Magic Wand Tool.

Selected Blue Jersey

Now go to the file menu and choose Image>Adjustments>Match Color. 

Match Color 

The Match Color Options Window will pop up.  For this example we do not need to worry about the the three sliders under the Image Options.  Under Image Statistics, make sure the two boxes are checked.  Checking the top box means that only the area selected in the Source Image will be used for color matching instead of colors from the entire image.  The second boxed is checked indicating that only the selected area in the Destination Image will be affected.  Next to Source: select the Source Image.  You will be able to see a small picture of the Source next to the Source Image name.  Click OK.

Match Color Options

You can see that the jersey is now red instead of blue, but there is still some work to be done.  We are going to adjust the contrast of the new red jersey.  Make sure this layer is still selected in the layers panel.  In the layers panel click on Create New Fill or Adjustment Layer and select Levels. 

New Adjustment Layer

New Layer - Levels

A Histogram will appear.

Histogram

There are three arrows at the bottom of the Histogram.  A black one on the left that controls the darkness of the shaded areas.  There is a gray arrow in the middle, and then a white one on the right that controls the highlights.  I am going to slide the black and white arrows inward until the contrast in the red looks how I want it to look.  If your image looks faded, this is how you fix it.  Now, in the layers panel I am going to select Luminosity so the overall color is not affected by this new layer, only the brightness of the color.

Luminosity

There you have it.  Here is a perfect sample picture to send to our customer.  It will be much easier for our customer to decide if they like how the jersey and shorts look together now.  With a blue top and red bottoms they were almost certain not to like the match.

Final Color Match Image

 

 

Welcome to WebsiteTemplateDatabase.com

Welcome to WebsiteTemplateDatabase.com, where you’ll find the templates and tools you need to build your website.  You’ll find here templates for shopping cart systems such as Zen-Cart and Magento, blogging templates for WordPress and Blogger, Content Management System (CMS) templates for Joomla and Drupal, and many others.  You’ll also find website related tutorials.  You can find instructions on using an FTP program, how to design websites using Adobe software (including Photoshop, Illustrator, Flash, and Dreamweaver), and much more information.  We invite our users to participate and contribute as much as you feel appropriate.  We hope you find these resources helpful.