Ace Design

Creating Paragraphs and Line Breaks in HTML

Drew — Wed, 13 Feb 2008 05:48:44 +0000

Let’s learn how to make paragraphs and text breaks in an HTML document. If you have a website, or want to build one, it’s essential to know this. No one wants to read a big block of text – so breaking up your text can make the difference between getting your information across versus losing visitors.

To make a paragraph, follow these instructions. If you would like, open up the file that you made in Introduction to HTML, and in the , type this:
Hello, my name is Nick.

Welcome to my website!

That text will come up in a web browser as:

Hello, my name is Nick.

Welcome to my website!

To make a line break, try this:
Hello, my name is Nick.
Welcome to my website!

This will show up as:

Hello, my name is Nick.
Welcome to my website! Notice that the difference in the two styles is that with the paragraph

tags there is an extra line break. When you use the break tag

you start immediately on the next line.

Adding line breaks and paragraphs makes your document much better than it would otherwise. However, it is important to know when to use which. Generally, you will not want to use the

in the middle of paragraphs, instead you should save this tag for addresses and such. You also won’t want to use them for lists and the like.

Pretty soon, you can have a website that looks like a pro made it.

Introduction to HTML Basics

Drew — Wed, 13 Feb 2008 05:46:45 +0000

Here you will learn the very basics of HTML – exactly what you need to get started in the HTML world. By the end of this tutorial, you’ll learn how to create a basic web page that you can even view in your browser!

What is HTML?

HTML stands for Hyper Text Markup Language, and it is the code that is used most commonly to craft websites. A file containing HTML must end with .htm or .html file extension, or it isn’t valid. An HTML file can be created using a common text editor, like Notepad (Windows) or SimpleText (Mac OS).

The Basics

The first, and most important tag, is . It tells your computer to read it as an html file, and every website coded with HTML has that tag.

Each tag has a start and an end. This is the start tag for the HTML tag:

And this is the end tag for the HTML tag:

Your computer reads that /, and knows that it is the end of the HTML.

For a website, try this:

The Title of My Page

Inside an HTML file (Using the HTML tag), this is the beginning of a new webpage. Inside the tags is the header information, but it is not displayed in the browser window.

The information that’s between the tags is the title of your page – it’s the words that are displayed in your browser’s caption.

Something important to remember is that you should always end the tags in the way they started – you wouldn’t end the example above , you would end it , because it can really screw with your code. If you remember that what is first ends last, you’ll be just fine.

Try this after you use :

This is my website! It’s cool!

Inside the tags contains all the information, be it text or pictures or something else entirely, that shows up in your browser.

So let’s put it all together! Open NotePad, or SimpleText on Macs, and type:

The Title of My Page

This is my website! It’s cool!

Save the file to your computer as mywebpage.html, and then open it in your browser – FireFox, Flock, Internet Explorer, Safari , whichever you use.There you go! The bare-bones essential information on starting your very own web page. If you want to learn more about altering text, check out Basic Font Formatting in HTML, so you can see how to make text bold, underlined, and even colored text.

Basic Font Formatting in HTML

Drew — Wed, 13 Feb 2008 05:43:43 +0000

By the end of this tutorial, you’ll know how to change fonts, make text bold, italic, underlined, change the font color, and much more, all using HTML.

The Basics

Fonts, Colors, Sizes – Oh My!

You want to try the fun stuff, huh? Okay.Go back to Introduction to HTML, and following the instructions, create an HTML document. Now, where the is, type the different font styles, accents, and whatever else you’d like to play with.

To change a font type, use this:

Hi everyone!

Don’t forget the end tags!

The text should show up as:

Hi everyone!

To add color to your text, try this:

My name is Stephanie.

You can use color names, or the hex, which ever you choose.

That shows up as:

My name is Stephanie.

Now, if you want to make your text big use this:

This is big text!

That makes the text big, like this:

This is big text!

Now you can combine it all, like this,

Whee! Color, Big, AND Jokerman font!

Whee! Color, Big, AND Jokerman Font!

Here are some other cool text effects that you can use to make your website really pop.

Bold Bold

Underline Underline

Italics Italics

~~Slashout~~ ~~Slashout~~

_SubScript _SubScript

^SuperScript ^SuperScript

Isn’t it great? There are many things you can do with HTML that can make your webpage completely awesome. At the same time, we hope you will keep in mind that no matter how cool your site looks to you if others can’t read it they wont be staying around. So use effects sparingly like accessories to an already great outfit.

Website Traffic Basics

Drew — Wed, 13 Feb 2008 05:27:52 +0000

If you are embarking on building a website or have already built one, we hope you are already aware that it is not enough to just build the site and put it out on the Internet expecting visitors to show up. If you’re not let us be the first to say “Sorry, it just doesn’t happen like this” – at least not for the last ten years or so.

Really, once you’ve built the site you are only just getting started with your site’s journey through the World Wide Web. If you want people to show up to your site in any real numbers, you are going to need to do a number of things to attract traffic.

The following will help you understand and simplify some of the nitty-gritty details of attracting traffic:

Search Engine Submission: As soon as your site has even a single live page we suggest you let the search engines know about it. Others will disagree with us, they’ll tell you that you need to have your whole site built and up before you notify the search engines. Hogwash. We’ve seen sites that were just one page get indexed and even pull PageRank from Google. The reality is that search engines love growing, changing, dynamic websites. It’s likely that the most prolific period of change for your site will be during it’s development page. So, get one page perfected, put it up and notify the search engines. Here’s are the urls to do that for the top three engines:
Google: http://www.google.com/addurl/
Yahoo: http://search.yahoo.com/info/submit.html
msn: http://submitit.bcentral.com/msnsubmit.htm
Link Building: Networking always helps. Applying the idea to a web business can yield huge results. In fact, some would argue that building links is the single most important thing you can do to increase your web traffic. Our focus isn’t quite that narrow, but we don’t deny that you aren’t likely to get far in search engine result pages (SERPS) without links.
So how do you build links? There are several methods, and it is probably best to employee some of all of them. First, write not good, but great content. Write content that is worthy of others linking to it. Then let it be known that the content exists, by submitting to social media sites etc. Another way is to write a web site and ask them to link to you a lot of links happen this way. Write an article for someone else’s website in your industry or a related industry. We aren’t big fans of mass article distribution which is so 2005, but placing an article on a good vertical niche site can give you a quality link, and lead to more invitations to do the same elsewhere.
Banners: Already established as a viable mode of advertising, it works best for sites that deal with commodities. The price is sometimes negotiable and not always high. The trick is to find the right demographic at a site that is not in competition with yours.
E-mail and Newsletters: An effective way to keep the subscribers updated about the developments and your site on their mind. Still better, if a response form can be provided with each, along with an option for the readers for adding the email addresses of friends. It can result in building up a potential customer list and also sets up an identity for your website for the market it’s catering to.
Valuable and Optimized Content:Though we’ve put this at the end you should not underestimate the importance of content. Content is King. If your content is the best on the Internet for its subject area, other site owners will link to you, thus building your TrustRank and improving your position in the search engines. However, even if others don’t immediately link to you your own content can still help you rise up in the search engine results pages. While writing your quality content, pick out a couple of words that you think would be the primary words someone looking for content like yours would type into a search to find content like yours. We’ll call these keywords. You’ll want to use those keywords strategically throughout your page. Use them first in your tag. Use them in the file extension of your url. If you’re page is using headers (large emphasized text eg. H1 – H5) use the keywords there. Also use them towards the top of the page and the beginning of paragraphs. Finally, use them towards the end of the page. Avoid, over doing it. All that said, avoid over doing it. Don’t use them to the point that they are no longer natural for the human reader. If your writing is such that it alienates humans it probably wont go over that well with search engines either.
Offline Advertising: Included in this might be everything from business cards and letter head to, sponsoring a sports team and turning your company car into a moving billboard with your website listed.

Get started with these and you will be well along your way. Remember, be consistent and persistent in your link building and you will get the traffic you desire.

SEO Meta Tags and More

Drew — Wed, 13 Feb 2008 05:25:01 +0000

If you haven’t realized it yet, a lot of important search engine optimization is going to go on inside your head. No were not talking about the one attached to your neck, although that’s true too. Here we are talking about the head section of each of your web pages. In fact, some very important information to search engines (SE) is contained in this section and how you use your head can make a big difference in how you eventually rank.The head section begins with the tag and includes everything through to the close of this tag. Now lets take a look at what might appear in the head.

Search Engine Optimization Information and Search Engine Marketing Services at Dew Point Productions

More often than not, you’ll often find more code in the head section, but the above includes the components that you need to worry about and a little bit extra just for effect.

The first thing you see below the is the title which goes between the tags. The words you write for this may be the most important words you will write for your entire website. Not only are they important to search engines, they are also the first thing that someone using a search engine comes to find out about your website as it is what gets underlined and displayed on search result pages (serps). The general rule is that this must contains your keywords (best not to have more than 2 or 3 at the most) and that those keywords should come towards the beginning. You can make the title as long as you want however, at some point SEs quit probably quit reading them and you are likely to dilute the importance of your keywords by having a lot of extra copy.

The next thing you should pay attention to in your head section is the meta description not too difficult to pick out above. Many search engines will use this as the text on the serp that goes just under the title. How often searchers pay attention to it is up for debate, but you want to put your best foot forward on this and give a readable and interesting description. At the same time you want to make sure that like the Title the keywords or keyword phrases are contained towards the beginning. Most people tend to scan rather than read entire blocks of text so you want to reinforce that they have found what they are looking for. And of course from a SE perspective, some of them may have a character limit for what they look at, the certainly do for what they show. Again, don’t dilute your keywords with lots of extra writing, but do write enough to ensure that is of interest and useful to humans.

Then comes the

The above is where the thinking of many novice SEO types ends. The often never consider that there is another important seo element in the Head. This is the meta tag for Robots (you can also have a robots.txt file for this information). The robots tag tells search engines what they such things as whether or not they should follow the links on the page as in as in . You can direct them not to index a page . Also, be aware that if you have a listing in the Open Directory Project (ODP) Google will use that description to go under your title unless you direct the Googlebot not to do so with . If you are confused about why you would want to do any of this see our tutorial on using the robot.txt for search engine optimization.

Working with Gradients in Photoshop

Drew — Thu, 04 Oct 2007 03:51:08 +0000

Gradients are used all over the web and they have several uses in graphic design as well. A gradient is unique in that it makes your photos or designs come to life and gives them a dimensional feel versus a plain, matte and static look. A gradient is a blend between two or more colors and there are two main ways to apply gradients.

You can simply apply a gradient to a content layer directly. This creates a good solid gradient area that you can use as a basis to design on top of. You can also use this as a way to create a layer mask in a fill or adjustment layer to create a gradual masking effect. Your second option is to use a gradient fill layer. This when you apply the gradient it its own layer and with a layer mask you can use it to mask gradient layer pixels. This is the easiest type of gradient layer to edit.

To apply a gradient as a fill layer you will first select a layer. Remember, the Gradient Tool cannot be used on an image that is in Bitmap or Indexed Color mode. You can also select an area of a layer to limit the gradient fill to that area. If you do not select an area, the gradient will fill the whole layer. Next, you will choose Gradient from the “Create New Fill or Adjustment Layer” pop-up menu. It looks like a circle that is half black and half white at the bottom of your Layers palette.

Now, click the gradient arrowhead at the top of the dialog box to select the type of gradient you want to use. You can choose from:

Linear

Radial

Reflected

Angular

Diamond

You can also adjust the Angle by moving the dial or entering a value. This will change how the light is reflected in the gradient. You can use the Scale slider to scale the gradient to the layer. The higher the scale, the more gradual the transition will be between the colors in the gradient.

If you need to adjust the order of the colors in the gradient, you can simply check or uncheck Reverse. You can check Dither to minimize the stripe appearance in your gradient and you can check Align with Layer to have the length of the gradient equal the size of the selected layer. Once you have made your adjustments, click OK.

To create a gradient by dragging, you will want to use the Gradient tool. To use this tool, you will choose a layer or create a new one. You will then select the Gradient tool from the toolbox. It may be hidden behind the Paint Bucket, as they share the same spot in the toolbox. Click on the small area to show it. You can then adjust your gradient presets and select the type of gradient you want, adjust your mode and opacity. You can also use Reverse or Dither if you wish. Now, simply drag across the area that you want a gradient to appear in. You can vary the length of your drags to create different gradient designs. Play around to find the gradient that you want in your design. By using gradients, you can highlight, darken and create unique effects in your photos and designs.

Want to increase visibility of your website and demonstrate your own expertise in website design? Find out how to submit a website design tutorial to Ace Design.

Repairing Old Photos with Photoshop

Drew — Mon, 01 Oct 2007 03:48:00 +0000

Over time our old photos tend to tear, stain or develop dust marks. These can easily be remedied through Photoshop in a few simple steps. By utilizing the Patch Tool you can fine tune you selection and repair your photos.

Begin by scanning in your photos. Once you have your photo in Photoshop, choose the Patch Tool, it looks like a little patch on the toolbar. On the options bar, you will want to click Source.
Now, drag around the area in the photo that you want to repair. This is called the “Destination.” You can then make adjustments to the selection by choosing the feather command or another modification you want to make to the selected area.

Next, drag from the inside of the selection to the area that you want to sample from. This is the area that you will want the patch to look like. Most likely, this will be directly next to the destination selection in an area that is undamaged. When you drag from the inside and release the mouse, the patch will bounce back and sample the pixels in the area that it was drug to. This area will automatically be applied to your destination selection.

This tool can be used in conjunction with the Healing Brush. The healing brush has many uses, but it is generally only used in an area where you need to touch-up a single color. For example, if you wanted to remove acne on a person’s skin in a photo or fix red-eye. The healing brush can also be used to fix a paper crinkle in an old photo and blend it with the surrounding pixels. The main difference between the healing brush and the patch tool is that the patch tool requires you to select an entire area to fix. You can use the healing brush freehand and pick and choose where you need to change something in a photo. It is best used in small areas, while the patch tool allows you to modify large areas, such as a long crinkle or tear in a photo.

To use the healing brush, you simply choose it from your toolbox. It looks like a Band-Aid. You can choose your brush size on the options bar for a brush that is appropriate for the work you are doing. A small hard brush will give you the most control when you are doing detail work. If you want to preserve the grain and texture of your photo in the area you are repairing, you will want to select Replace form the Mode pop-up menu. This will ensure that your area looks like it is a part of the original photo. You will also want to choose Sampled as the Source on the Options bar and check Aligned so that you create a single, uninterrupted sampling from your source point. If you want repetitive samplings, you can uncheck Aligned. Alt-click to set your source point and begin dragging across the area you want to repair. When you release the mouse, the source texture will be applied to the target area and will then blend with the area surrounding it. Using these two tools will help you to make your old photos or damaged photos as good as new.

About the author: Valerie Melma is a freelance writer and owner of Words You Want

Want to increase visibility of your website and demonstrate your own expertise in website design? Find out how to submit a website design tutorial to Ace Design.

Creating a Photo within a Photo in Photoshop

Drew — Fri, 28 Sep 2007 03:13:56 +0000

In this Photoshop tutorial you’ll learn how to give photo’s a 3D effect.
This is a really neat process that will make your photo appear to have a real, white outline photo within a photo. If you angle it just a bit, your photo will appear 3D over the background of the original photo. This is another one of those techniques that is so simple to achieve, but looks very complicated.

Begin by opening your original photo in Photoshop. You will see it as a Background layer in your Layers palette. The second thing you will want to do is to create a duplicate layer. You can do this quickly by using Ctrl+J and this layer will automatically be named Layer 1. This Layer 1 will become the small photo, so you can rename it if you need to. Below Layer 1 you need to create a new layer. Do this by clicking on the New Layer icon at the bottom of the Layers palette. It looks like a sticky note pad. Place this new layer between the background and Layer 1. This will be your clipping mask layer and you can name it that if you would like.

With the clipping mask layer selected, you will select the Rectangle tool from your toolbox. Draw a rectangle around the area that you want to create into a small photo on the clipping mask layer. Next, hold down the Alt button and move your mouse cursor between the clipping mask and Layer 1. You will see the cursor change into the clipping mask icon. Now, simply click and it will clip down your Layer 1.

Next click on the clipping mask layer and click on the Layer Styles icon. Select Stroke from the list and this will bring up a large dialog box. Set your Stroke Size to 10px. This will create the white border. Make sure that your Position is set to Inside so that the stroke will appear inside the boundaries, as this will create nice, sharp angles in the corners. Now, change the stroke color to white. Don’t click OK yet, as you also want to give it a drop shadow. Change the angle to 134 degrees and the Distance to 9px. This will create a nice drop shadow.

At this point, you can now rotate the vector shape (clipping mask) slightly to give it the 3D effect. You can also Free Transform the box to your liking and press Enter when you’re done. Making these adjustments really makes your photo within a photo stand out dramatically.

Want to increase visibility of your website and demonstrate your own expertise in website design? Find out how to submit a website design tutorial to Ace Designs.

How to Extract Images in Photoshop

Drew — Mon, 24 Sep 2007 13:44:34 +0000

If you use the lasso tool to extract objects in Photoshop you are probably finding that you have to stop and start over a lot, especially if you are extracting fuzzy animals or people with big hair. The lasso tool isn’t the only way to extract objects, however, the extraction function is a very simple and easy tool that you can use in almost every situation that you need to isolate an object out of. The extract command is best for those items that are irregular in shape and detailed around the edges or have thin limbs, like horses.

The extract command is great because you are able to create the mask on a full-size preview in the dialog box. When you have it how you want it, you can click OK and the background is erased to transparency and your extracted object is preserved. To be on the safe side, it’s always a good idea to work on a copy of your original photograph. This ensures that you don’t lose your original if you accidentally save it when you didn’t intend to.

To begin, you will select the layer from which you want to extract an object. Then, you will choose Filter > Extract and a full-size dialog box will open. You can resize this window to the size that you need it to work comfortably.

Now, you will choose the Edge Highlighter and mask around the object that you want to keep. Do this by choosing the Edge Highlighter tool from the toolbox in the dialog box. You can change the brush size and make it smaller or larger depending on how detailed you need it to be. The sharper the edge you need, the smaller the brush you should use. If the shape has wide edges, you will want to use a large brush. You can also change the color of the highlighter if you would like.

If the object has real crisp edges, you can check Smart Highlighting. This will be a highlight of a minimum width that you need to cover the edge of the object that you are highlight, regardless of the brush size.
After selecting your brush sizes, you simply drag around the border of the area of the image that you want to extract. Be sure to complete your loop and make a closed shape around the object. Drag the brush along the edge of any fuzzy fur or curly hair you may have. Once that is completed, you will choose the Fill tool from the dialog box’s toolbar. Click on the area that you want to save.

If you need to unmask any areas, you can use the eraser to do this. Next, preview the extraction to make sure that you have exactly what you want to save masked. If you need to refine your mask further, you can use the Cleanup too to gradually subtract areas that you don’t need. You can also use the Edge Touchup tool as well.
Once the image is exactly how you want it, click OK. You can then restore lost areas that you need to keep with the History Brush tool. Or, if you need to erase the background more, you can use the Background Eraser tool and do so by hand. See, wasn’t that simple and easy?

Want to increase visibility of your website and demonstrate your own expertise in website design? Find out how to submit a website design tutorial to Ace Design.

Photoshop Tutorial Create a Reflective Text Surface

Drew — Thu, 20 Sep 2007 03:31:04 +0000

In this Photoshop tutorial you’ll learn how to create reflected text. Reflected text can add a unique and classy effect to your graphic designs. You have probably seen it all over the web, but never really knew how to do it. This is a lot easier than it looks and you will love how elegant it can make your websites or designs appear.

First, you want to open a new document in Photoshop. You will want to choose the 640×480 preset option in the New dialog box. Now you want to select the Text tool in the toolbox. It is the “T” icon and will type horizontally, which is what you need to have a reflection that goes below the text.

Now, let’s choose a color for your text. Click on the Swatches tab on the Color palette. If you don’t see it, press the F6 key and it will show the swatches palette and hide the colors. Click on the RGB Red in the top left hand corner with the eyedropper. You can select any color that you wish though. You have your text tool and your color, now you need a font. You can choose your font from the text options bar at the top of your screen. For a really elegant effect, choose a font such as Trajan and set it to 72 points. Type a word in your new document. It should be large and the color that you chose. Type in all caps to prevent any reflection problem later.

Now you are going to duplicate your type layer. Select the text layer in the layers palette and press Ctrl+J. This will create a copy layer. Now you have two text layers, you can use one of them to create your reflection. The reflection is an upside down version of your original layer, so you need to flip it upside down. You will flip the original text layer, so you need to select it and then go to Edit at the top of your screen and then select Transform. A sub menu will pop up and you will click Flip Vertical. The original text layer will flip upside down.

Drag the layer below the unflipped layer. You will want to drag it until it is touching the bottom of the unflipped layer. Now that you have your flipped text below the unflipped text, you are going to create a fade and this can be done by using a Layer Mask. At the bottom of your Layers palette you will see a little box with a circle in it. Click on this to add a layer mask. A layer mask is automatically filled with white. To make it appear as though our text is fading away, you are going to select the Gradient tool. On the Options Bar you will choose the black and white gradient. Ensure that your layer mask is selected and not the layer. With it selected, drag out a gradient vertically. When you release your mouse, Photoshop will apply the gradient. And your text will be faded. You will only want to draw the gradient about halfway between the top and bottom of your two rows of text. You can hold the Shift key as you make the gradient line to ensure that the gradient stays perfect straight. Once this is complete you have perfectly reflected text.

About the author: Valerie Melma is a freelance writer and the owner of Words You Want.