Archive for the ‘Graphic Design’ Category
Photoshop – Text in a Circle
This is for Photoshop 5 or higher.
Drawing text along a path or placing text in a circle is something that many people ask about. Until now, it was really difficult to accomplish without a vector program such as Illustrator or Corel DRAW! With Photoshop 5’s new features, however, it has become possible to place text in a circle with relative ease. It’s still more time consuming than with a drawing program, but, once you’ve got your text the way you want it, another new feature will let you easily edit the type!
This tutorial uses two new features of Photoshop 5. The first is a feature that enables you to move the center of rotation of an object and the second is editable type layers.
The editable type layers means that you can go back to a type layer and change the text, change the font you used, and its size, and even change the font or size of individual letters. Very cool!
To get started, open a new 200 x 200 x 72 dpi image. Set the Contents to white and the mode to RGB.
With the new image open, choose View, Show Grid to show the grid (see figure 16.1).
Select the Type Tool and position the mouse on the second line down from the top of the grid and exactly in the middle horizontally. This will position your type near the top and in the middle of the image.
- Click to bring up the Type Tool dialog box.
- Choose your font and its size. I used Arial at 30 points.
- Click in the large white area and enter the number 1.
- Click OK to enter the text into the image. It will appear on a new layer. Click on the small eye icon to the left of the layer in the Layers Palette to turn off the layer’s visibility.
- Place the mouse back in the same place and click to bring up the Type Tool dialog box.
- Enter the number 2 and click OK.
- Turn off this layer, as well.
- Click the mouse in the same place again and enter the number 3 in the Type Tool dialog box.
- Continue this process until you have entered 7 numbers.
NOTE: I’ll be working with seven characters and you might want to do the same just to follow along. Later you can re-create this image at a different size and with a different number of characters.
You should now have seven numbers (1 through 7) on seven separate layers as well as the background layer.
To place the letters properly you’ll need to use a little math. Ack!!! I know, I know… Scary subject, right? No problem! Here’s how it works. The top letter (or number in this case) is at 0. Since I’ll be placing the text along a semi-circle there’s 180 degrees to work with. Photoshop likes to break the angles up into plus and minus so the last letter will go at 90 degrees and the first letter will go at -90 degrees (see figure 16.2).
In figure 16.2 you can see what the angles are for all of the letters. I arrived at these numbers by doing a little simple arithmetic, not higher math. Because I was working with 7 letters and the 4th or middle letter was at zero that left 3 to the left (the minus side) and three to the right (the plus side). Each side has 90 degrees, right? And 90 divided by 3 is 30. Voila! Each letter would be separated by 30 degrees. These numbers will be different for each image if you use more or less than 7 letters. Again, though, as I mentioned above, you can change the type so you’ll only have to do this once for each image.
-
The last number you entered, the 7, should be on the only visible layer.
-
Choose Edit, Transform, Rotate.
You can now move the cursor back over the number 7 and drag it down to the 90 degree mark.
You can make this move more accurate by turning on the Info palette so that you can see what the angle is. As well, you can move the number in angular increments by holding down the shift key. When the number is in place press the Enter key (the Return key on a Mac) to complete the transform.
Figure 16.3 shows the number 7 in its place.
Make the layer with the 6 active by clicking on its layer in the Layers palette.
Repeat the process with the 5 (it goes at 30 degrees) and the 3 (it goes at -30 degrees), the 2 (at -60 degrees), and finally the 1 (at -90 degrees). The number 4, of course, stays at its original position at the top of the semi-circle.
With all of the numbers in place you should save this image.
You can now edit each number and replace it with a letter. How? Easy! Just double-click on a type layer. Doing so will bring up the Type Tool dialog box enabling you to change each character.
Figure 16.4 shows the numbers replaced with the letters of my name.
Using this technique you can create circular and semi-circular text. As well, you can save the results and go back in later to change the text.
Make Your Web Site Load Quickly!
Do you want your site to load quickly? If it is your personal homepage, it may be a big deal to you. If you are trying to run a business, or offer people important information, this can be very important. If your front page takes a great deal of time to load into a browser, then you may want to do a little redesigning to increase the number of visitors that decide to stay at your site.
First, remember that not everyone has a T1, cable modem, or ISDN connection to the internet. In fact, there are still a large number of surfers with modems less than 56K. So, as web designers we must see to it that our sites load as quickly as possible without losing anything important.
Let’s start with the obvious bandwidth hogs: images and other media. My suggestion here is to take out every form of multimedia embedded in you front page except for images. Sure, a background song can be nice, but these sound files can take up a great deal of bandwidth, especially if the sound is a .wav file. (I made a 30 second .wav on my computer- It came out around 140K). Videos can be even more taxing, (1 MB or more at times) and should probably be avoided unless absolutely necessary. As a surfer, if I have to wait more than 10 seconds for something like this to load, I’m tempted to hit “Stop” or “Back”. So if you use these, keep the file sizes small (Probably 30-40K or less would be OK). Better yet, save them for a later page.
Your images will be your next big worry. These can also get quite large, so caution is necessary when dealing with images. For starters, do not make an image any larger than you need it to be for the effect you desire. If you have an image that is 600 pixels x 600 pixels, your page could take forever to load. One of the easiest ways to reduce the file size of your image is to simply give the image smaller dimensions. Go to your image editing program, and resize or resample your image to make it smaller. You can also compress your images using special services on the web which reduce the file size of images for you, and let you choose the images that still look good once they are compressed. There are links to an image program, an image rendering tutorial, and image file size reduction services at the bottom of the article for you.
After you have the images as compact as you can make them, you can save loading time on other pages by using one or more of the images from the front page on other pages. The image you loaded for the viewer on the front page will be in the browser’s cache, and will load instantly when it is called on your other pages! This will allow you to load other things you may need without needing to worry about the image again.
Another trick you can use is to define the width and height in all of your image tags. This way, the browser knows how much space the image will use on the page, and will not have to adjust everything once the image starts loading. It will save a little time, and will also keep the page from jumping when an image loads.
Finally, be sure your front page is as short as possible as well. A longer page can take a long time to load, even if it is all text. Put extra information on another page and use a link for people to go view it. You will save a little extra time, and maybe reduce clutter a little bit.
Well, I am done thinking for today, maybe I’ll have a few more speed tips for you in a future article. Until then, have fun with your speed enhanced web sites!
Recommended Reading
strong>GifWizard
Offers a couple of free tests to see how efficient your images are, and has an image file size reduction area if you register with them.
Web Site Garage
You can check the loading time of your web site with their tune-up, and you can use their “Gif Lube” to give your images a smaller file size.
JASC- Paint Shop Pro
You can download a trial version of Paint Shop Pro as shareware to create and edit your images. If you decide you like it, you can also purchase the program from them. It is the best image program I have found other than the really expensive Photoshop.
| By John Pollock |
How to Promote Your Artwork Online
Awards are nice to receive after having put a lot of effort (or not) into your site. If you haven’t gotten one yet for your killer design, you are at the right place. You undoubtedly have seen several sites around the net showing off their nice, shiny awards. Then you wonder: “Why haven’t I got an award? My site is at least just as good!”. The truth is, you can’t receive an award if you don’t apply for one. Those other sites don’t get their awards straight out of nothing, they’ve applied for it!
There are numerous award sites available on the net, with most of them legitimate ones, and others which look more like link-exchanges. Some award sites only allow non-commercial sites, while others only allow corporate websites.
Read through the criteria of each award website carefully, some only accept non-frames sites, or disallow java-applets. A lot of people miss out on awards because they didn’t read the criteria fully.
If you were planning to get some extra hits with your newly acquired awards, you will probably need to have a superb site (a good site anyhow, to get an award), since the most prestigious awards are usually only showcasing the winner(s), which often leads to more hits. If you’re just planning to show off to your friends with your award, well then, you have the wrong attitude towards web designing, in my opinion.
If you haven’t won, don’t be discouraged. Web design can be fun and profitable, so don’t let it get you down, see it as a challenge to learn more and improve your site.
Here are some tips on getting yourself an award:
Don’t Spam the award site with numerous requests
No adult sites
Make sure the site is finished, so no “under construction” signs
Get your loading time down, nobody wants to wait an eternity for your website
No broken graphics and 404 errors
Have some content, unless you’re running a link-exchange site
Write out your name, website URL, title, etcetera out in Notepad, and just copy and paste everything in your browser, that saves you a lot of time if you’re applying for multiple awards
Some award sites to get you started:
Coolsiteoftheday.com – One of the most prestigious awards. If you win this one, you’ll get some hits for sure
Awardsites.com
NetGuide
USA Today
Lycos Top 5
GoldenWebAward.com
Well, this was my first piece of creative writing. I hope this was informative as well as a bit of entertaining (don’t want this to be a pain in the back to read) =).
By Kang He
Just applying images to your bullet points goes a long way.