More Ways to Get Inspired - 5 Tools for Web Design

Earlier, we talked about several simple tips for gaining inspiration for your web design concept. Although these are some good places to start, you might be looking for something more to trigger your creativity. Thankfully, the Internet has no limits to the resources that are available for public consumption. Here are just a few of the free resources that you can use to derive inspiration.

1. Adobe Kuler As always, Adobe provides some of the best web and graphic design tools. Kuler is an online tool that you can use to create and save color themes as well as browse existing themes. Sometimes coming up with a color scheme can be difficult, so taking a look at the themes can help jumpstart your creativity and give you an idea of what sort of colors work together.

In addition to searching through themes, new themes, and popular themes, you can also type in a keyword or a color you're looking for. Kuler will pull up themes with that color so you can narrow your search and browse only the colors you're interested in.



Adobe Kuler

2. Color Scheme Designer 3 Color is one of the most important aspects of design; the colors you choose convey the entire theme of the site, along with any subliminal connotations that people associate with the color. It's important to choose colors wisely and choose colors that work well together, so we're going to look at another tool for choosing colors.

The Color Scheme Designer 3 is a tool that you can use to find any hue from the color picker and select a color scheme, such as monochromatic (all colors used are in the same family, such as all yellows including tints and shades) and complementary (two colors that are opposite each other on the color wheel, such as red and green). Although it's not perfect, it can help you pick colors and get a general idea of what sort of color scheme you might want to go with. In addition to giving you a color palette that changes instantly to whatever color you choose on the picker, it also gives you the RGB and hexadecimal values, so you can easily incorporate them into your design or duplicate them in Photoshop. Plus, you have the ability to adjust the scheme to change brightness and contrast as well as see how different users with different needs would visualize it (such as people who are colorblind).



Color Scheme Designer

3. Fonts.com by Monotype Imaging Designers know how important it is to use the right font to display content. Although it may seem like elements such as images should get the most attention, and although this is very important, you want to keep your written content in mind as well. After all, people generally go to a website to gather information. So the text should be seamless, easy to read, and go with the theme. Choosing the right font can be difficult, and sometimes it can be expensive. Thankfully, we have some free web tools for browsing and downloading free font types. One of the best ones I've come across thus far is fonts.com.

Fonts.com gives you a wide range of fonts to choose from, and many big name developers to browse by, such as Adobe and Monotype. There are fonts that come with a price tag, but you can look at the free ones by clicking "Find Fonts" and then "Free Fonts." You have to create an account to download, but it's free and doesn't take long to do.



Fonts.com

4. Icon Finder When producing content for a website, it can be hard to find free icons for buttons or visual representations. Thankfully, there are a few good resources for finding free icons that you can use on your website; you just have to pay attention to the license restrictions for each icon. Most of them just require you to give credit to the creator, or only use the icon in certain ways.

The best website I've used for free icons is Icon Finder. You can browse by size, background color, and license type. Plus, many of the icons come in several different sizes, so you're sure to find the size you're looking for. So if you need to find an icon for a well known brand (such as a Mastercard icon to put on your check-out page) or just want to browse some icons for inspiration, then Icon Finder is the right place to go.



IconFinder

5. MorgueFile Looking through photos can be one of the best triggers for inspiration. But what happens if you find a photo you really like and want to use it on your website? Generally, copyright restrictions would keep you from using it; however, if you use a stock photo and abide by the license restrictions, then you're not prohibited from using it. MorgueFile is one of the best sites for free stock photos. Most of the photos can be used with a catch - you can't use the original photo unedited. This means that you have to make some changes in a program like Adobe Photoshop CS4. However, it is not that difficult to make a few changes and give credit to the creator.

You can search for a phrase or a keyword, and once you've started your search, you can refine it by choosing the size limitations, categories, color, and date, among other things. MorgueFile is easy to browse and use, and the pictures already have big dimensions, so you won't need to make them any bigger for your projects.



MorgueFile

These are just a few of the many resources available out there, but they will enable you to gain inspiration and get a fuller body concept of what you want your website to look like. You can discuss your findings and your concept vision with a web design company, like Codank Web Design, to make your idea a reality.

About CODANK Web Design

CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.

For more information, visit us at www.codank.com

Creating an animated GIF in Adobe Fireworks CS4

If you've ever worked with images, you've probably wondered how to create an animated GIF. Although it may seem difficult, the truth is that creating GIFs is easy when using the right tools. In this tutorial, we'll look at how to create an animated GIF using Adobe Fireworks CS4.

First, open Fireworks. Click on File and Open, then navigate to the folder where you've saved the images you want to use in your animation. After you open them, you need to check their sizes. To do this, click Modify then Canvas and Image Size.



A dialogue box will pop up, showing the size of the image and allowing you to change it. For this demonstration, the pictures I used were too big, so I changed the size to be 200 px wide and 133 px high.



Now you need to open your other picture files and make sure their image sizes are the same. If they haven't already been created to be the same size or resized, then change their sizes to be same width or height. You should be constraining proportions and keeping the objects to scale, so if one of the other values is different after you enter a new value, you can use the crop tool in the Tools panel until you have the exact same size as the first picture. It's very important for all your pictures to be the same size. If you need to crop, select the tool, drag your selection, and hit Enter.



Create a new document by clicking File then New. When the dialogue box appears, make sure the background is set to transparent and enter new values in the width and height boxes. Make sure the canvas size is the same size as your pictures.



At this point, you want to show the States window (called Frames in earlier versions of Fireworks). States are used similarly to layers, though instead of being on top of each other, they're used for images that are to be shown in ordered succession. In order to show the States window, click Window and then States.



Switch over to the tab of your first image. Select it by clicking Select and then All. Next, copy it and switch over to your new document, then paste the image. This will put the image in the first state (or frame) of your document. At this point, you can label your states to tell them apart. To do this, double click on the name (like State 1) and enter a new name.



Now add a new state. You can do this by navigating to the States panel on the right side of the workspace and clicking the notepad icon on the lower right.



Copy and paste your second picture into the document, and rename the state. You can do this as many times as you need to, depending on how many pictures you have. Once you're finished copying and pasting, you can change the speed of the animation. The default is 7/100, where 100/100 is one second. To change the value, double click on the 7 next to the State name and enter a new value.



Here, you can customize some other options if desired. For example, you might not want your animation to keep playing continuously, or you might want the images to gradually fade into the next. To change the way the GIF behaves, look at the bottom of the States panel and click the icons to explore your options.



Clicking on the arrow will give you the option of changing how many times the GIF plays. I want to leave mine on a continuous loop, so I keep the default.



The first icon controls onion skin options. Using onion skin means that your images will gradually fade into the next image instead of switching over. This provides a smoother transition.



At any time during the process, you can preview your animation by clicking the play button at the bottom right of the workspace, just above the properties panel.



Now that you've chosen your settings, it's time to save. Navigate to the Optimize panel at the top of the right side of the workspace and click the drop down for file extension. Choose Animated GIF.



Next, click File then Export. Give it a name and navigate to the folder you want to save it in. You can view your GIF by going to the folder it's saved in and right clicking, then moving down to Open with and choosing Internet Explorer.



And that's it! Now that you see how simple it is to create animated GIFs, you can make icons and other moving images quickly and easily.

About CODANK Web Design

CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.

For more information, visit us at www.codank.com

Creating a simple header in Photoshop CS4

Every website needs a header of some sort to frame the top of the page and give an impression of the website's purpose, the overall design and mood, and the layout. Headers can be created by CSS, but if you'd rather whip something up quickly and without the hassle of fumbling with coding, then you can create one in Adobe Photoshop CS4. Here's how to do it.

First, open Photoshop and click File, then New. When the dialogue box pops up, set the background color to white and set the dimensions to the size you'd like. Keep in mind that if you want a header to stretch across the entire width of the page, that most screens are set to 1024 px. But you should offer a little extra room for wider screens. I've made my document 1110 px wide, giving myself 10 px for layer styles. I've also made my document 210 px tall so I have 10 extra px to play with.



Now we need to create a new layer for our picture. Click Layer then New then Layer to create a new layer. If desired, you can fill in a name for the layer once the dialogue box pops up.



Now navigate to where you've stored a picture or logo you want to use in your header. Open the file and alter the image size by clicking Image then Image Size.



Change the size of the height and give yourself 10 px of extra blank space to play with. For this project, since my header canvas is 210 px tall, I've made my picture 200 px tall.



Select the picture by clicking Select and then All. You can also press Ctrl + A.



Paste the image into the document by clicking Edit and Paste, or by pressing Ctrl + V. Then go to the top of the Tools panel on the left side of the workspace and select the move tool. Use it to drag the picture or nudge it with the arrow keys.



Create a new layer by clicking Layer + New + Layer. Then choose the rectangular marquee tool from the Tools panel. If it is not visible, click the black arrow in the lower corner of the marquee tool button to bring up a list of options. Next, change the Style from Normal to Fixed Size. Here's where you will have to do a little math. Find the width of your picture and add ten to that. Then subtract that number from the size of the canvas. For example, my canvas is 1110 px wide and my picture is 299 px wide. If I add 10 to 299, I get 309. Then, if I subtract that from 1110, I get 801. So the width of my selection will be 801 px, and the height will be 10 px less than the height of the canvas (210 – 10 = 200).



Click anywhere on the document; you can always use the move tool to adjust the placement if you're dissatisfied with the outcome. Once the marquee appears, select the paint bucket tool from the Tools panel (you may find it under the gradient tool, in which case you should click the black arrow at the corner of the button). Now click the foreground color swatch at the bottom of the tools panel and use the eyedropper to select a color from your picture. I've chosen to select a darker green from the edge of the leaf. Once you've chosen your color, fill the selection.



The green looks a little dark, so we can adjust it by lowering the opacity. Make sure that the fill layer is active and go to the Layers panel. At the top, you'll find an opacity drop down box. Type in the value or move the slider until you're satisfied with the look. I've chosen to lower my opacity to 45%.



Our header still looks a little too plain, so we need to add some layer styles to give subtle, yet effective definition. Click on the picture layer and go to the bottom of the Layers panel and click the fx. Then choose Blending Options.



Add a drop shadow to the picture. You can adjust the size and distance (how far the shadow comes from the picture) to your liking. Once you're finished choosing options, you can use the move tool to bring the picture closer to the fill to close any white space in between.



Now select the fill layer. Again, go to the bottom of the Layers panel and click the fx, then Blending Options. When the dialogue box pops up, click on Stroke and change the size, position, and color to your liking. I've chosen to make my stroke 2 px wide and position it on the inside of the fill to ensure the corners are sharp instead of rounded. I've also changed the color by sampling the fill color and dragging the color picker slider down to a dark shade of green.



Add text by selecting the text tool from the Tools panel. Along the top bar are options for changing font, font weight, font size, color, and alignment. I've chosen Arial in 18 pt as my h1 font, and Brush Script Std in 9 pt as my h2 font.



At this point, you may be done if you wanted a very simple heading. However, I like to spice my headings up a little more, so we're going to add a faint background picture behind the fill. Find a picture, pattern, or texture you like and open it in Photoshop. Go to Image and Image Size to resize it so the width is 1100 px (giving yourself those 10 px of room). Once you've resized it, you may need to do some cropping so the height is the right size (200 px). Just keep cropping and checking the image size; if it's close enough, you can uncheck Constrain Proportions so you can resize it without it affecting the width you've already set. Just be careful when editing this way because too much change can affect the quality of your picture.



Now that you have your image resized, you can copy it by clicking Select + All then Edit + Copy. Switch over to your header document and select the background layer, then paste the picture. You can use the move tool to adjust its placement.



Since we haven't used every last bit of extra space, we need to crop some out so there won't be a white outline around our header. Select the crop tool and carefully select the header. Once you're satisfied, press Enter.



Our header is done and ready to save. You can save it in any format you'd like, but it's best to save it for optimal web rendition. Click File then Save for Web & Devices.



Once the dialogue box pops up, choose the format you want to save it in; I chose PNG-24. After you've made sure all the options are correct, click Save then give the file a name and navigate to the folder you'd like to save it in. And you're done!



About CODANK Web Design

CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.

For more information, visit us at www.codank.com

How to stylize text in Photoshop CS4

One of the great things about using Photoshop is that you can create stylized text for images, graphics, and logos. The difficulty you might run into is knowing where to start when there are so many different features that you can use. The trick is exploring the different features and playing around with them; however, when you're new to Photoshop and don't know where anything is, this can be hard to do. In this tutorial, we're going to run through some of the things you can do to stylize text and show you where different options are located so you can customize text to your liking.

First, open Photoshop and click File then New. You can make your document any size you'd like, but I've chosen to make mine 1000 px wide by 500 px tall. Once you've created your document, click on the text tool in the Tools panel (it looks like a capital T). Click on the font dropdown at the top of the workspace and choose a font, then choose a font size and color. I've chosen to use Copa Sharp BTN in 72 pt black. You can drag a text box across the document at any time during this step.



Type your text in the text box. You can change your text options at any time during the process by selecting the text and changing the dropdown boxes at the top. Here, I've chosen to center align my text by clicking the middle button near the color swatch.



Click the Create Warped Text button (located on the right of the color swatch) and choose a style from the dropdown. You can play with the different styles until you find one you like; I've chosen to use the Arc style.



You might need to use the move tool at the top of the Tools panel to move or nudge the text down so it's visible on the document. Now we need to add some layer styles. Click on the fx at the bottom of the Layers panel on the right side of the workspace. Choose Blending Options from the list and explore your options once the dialogue box pops up.



The first thing I'm going to add is a drop shadow. I've changed the distance to 6 px because it was looking a little crowded before. You can leave it as it is if you're satisfied, but I wanted to do something a little different and make my text really pop. To do this, explore your contour options and try different ones; I chose to use Sawtooth 1 to give my text more definition and dimension.



Next, I decided to soften the text so I added an inner glow. I changed the color to white and the opacity to 50% to make it blend in more. Now it has a nice, smooth 'chrome' look.



At this point, if so desired, you can center the arc a little more by clicking Edit then Transform then Rotate and dragging the bounding box until you're satisfied.





Next, we're going to create a some vertical text. To do this, click on the black arrow at the corner of the text tool button and select the Vertical Type Tool. Drag a text box down and choose your font type, font size, and font color. I've chosen to use Cooper Std in 60 pt black. Type your text in the box.





Just like with our other text, we're going to add some layer styles. Navigate to the bottom of the Layers panel and click the fx, then choose Blending Options. For this text, I've chosen to use a drop shadow and left the default settings. I also added an inner glow, again leaving the default settings. Where I did some customizing was when I got to using a gradient overlay, which you can use to add a gradient to your text. I chose to use a black and white gradient (though you can change it by clicking the arrow next to the gradient), and checked the reverse checkbox. I also chose a different gradient style from the dropdown (instead of linear, I went with reflected).



Next, I clicked on bevel and emboss. I chose to use a pillow emboss from the style dropdown to give it more definition and make it easier to read. Then, I clicked on the texture subcategory and used the arrow next to the texture swatch to browse the patterns. I chose to use the denim texture, though if you don't see any you like in the preset swatches, you can append more by clicking the black arrow next to the texture swatches displayed.



There's one other way of customizing text that I'd like to look at, so create a third text box. This time, change the text color (I've made mine blue), though I've left the settings from the previous text box I created.



Along the top bar of the workspace, find where it says Filter and click on it. Then click on Filter Gallery to bring up the dialogue box where you can view changes and test filters before you apply them.



You can browse through the filter gallery and try out different filters; many of them won't show up that well because text is pretty flat. However, we can add some noise to the text by going under the texture category and choosing Grain. You can leave the default settings if you'd like, but I changed the Intensity to 66 and the Contrast to 61. I also changed the type to Soft. Once you're satisfied, click OK to apply the changes.



Finally, I decided to give the text some more definition and make it look sort of plastic, so I decided to add a layer style. Just like before, click on fx and then Blending Options. This time, click on bevel and emboss and leave the default settings.



We've only just scratched the surface of the many things you can do to customize your text in Photoshop. However, now that you've completed the tutorial, you should have a better understanding about how to navigate Photoshop and edit text to stylize it. As mentioned before, sometimes the key is to play around with your options, and once you get more familiar with it, you'll be able to choose options in a snap to make it look like the vision in your head.

About CODANK Web Design

CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.

For more information, visit us at www.codank.com