Building a basic website

Step 1 – Plan
You will need to think about what you want to use the website for, how much time you can devote to this project and what your budget is.  Websites can be used for business or personal use, and you will need to allocate a sufficient amount of time and money to your website in order to make it successful.

Step 2 – Research
It is important to do some research into similar websites to the one you intend to build, that have good search engine rankings.  This will help you to target the right keywords to use in your own website, and will also give you some more ideas for design and content.

Step 3 – Choosing a Web Host
If you are on a tight budget or do not have much experience in building websites then it is a good idea to choose a web hosting plan that includes all of the software you need to design, build and publish your website, and one that also provides 24/7 support in case you get stuck and need some extra help.  If you want to sell products on your website then you will also need to do some research into which hosting plans provide the right kind of payment and online security features.  If you are running a business and do not have a lot of time to build or run your website then you may want to consider outsourcing this task to a professional website design company, as they will have all of the skills and software to create the website you need.

Step 4  – Designing and Building Your website
It is important that you take time to design your website in order to make sure it will be presentable, easy to navigate and interesting for visitors.  Use a combination of images and text, but try and avoid too many large photo or video files as visitors who do not have fast broadband will find it hard to download your pages and will get bored and go somewhere else. You can try some premium wordpress themes if you are building a blog.

Step 5 – Incorporating SEO
SEO aka search engine optimization will help you to get high rankings in search engines and thus traffic to your pages once you have published them. Also, it is important what country search you want to target – if you want higher rankings on Google.co.uk, then follow some search engine optimization UK guides. There are a number of techniques used in SEO, but one of the most important is keywords, and once you have researched which keywords you need, you should incorporate them throughout the main content of your website, in the page titles and URL, in outbound links and bold tags and also in the meta tags.  It is important you do not sacrifice the quality of the content on your website by adding too many keywords, and ideally you should be looking at a keyword density of around 5-10%, anymore than this and you can find it difficult to keep the content interesting and natural looking.

No related posts.

Why is banner design such a closely guarded secret? I don’t know. So today I’m going to let the secret out and show you how I made the Deadly Clever Designs banner in the bottom, in hopes of getting some of you other newbies started. Let’s begin with this banner design tutorial !

Step One: Create Your Banner Layout

First things first, create a new photoshop document that is 468 by 60 px in size. Once that’s done, select a color scheme you enjoy (ideally, three colors) and fill in the document with your background color. If you need help with this, check out my post about color functions. The colors I’m using are lime green, white, and absolute black.

Step Two: Add Your Logo or Attractive Graphic

The next step in designing a banner is to add your logo. Create a new layer and paste your logo into it. Your logo should be sized to have a height of 55px to fit accordingly. If your logo doesn’t scale properly, perhaps you should consider the things you should be getting from your logo designer. The color of your logo should be the other two prominent colors in your scheme. (All three are prominent, because this is an active graphic.)

After you paste your logo into your banner file, you may notice that it’s aligned in the center. Simply use the Move Tool (v) to adjust it’s position. To be more precise, we’re going to use rulers and guides to layout the design of our banner. If you don’t have rulers enabled, use ctrl+R or View–>Rulers to enable them.

Now select your background layer (the layer we want to use for the guide reference.) Then use the Move Tool and create a new horizontal guide by clicking and dragging on the top ruler. The guide will automatically stop in the middle of the document. Next, create a new vertical guide by clicking and dragging on the left ruler and position it about 10 to 20 pixels into your design.

Now you can properly align your logo! I added a few more guides to help out with aligning text later on.

Step Three: Adding Your Website Name

If your website name isn’t in your logo, or needs to be represented more clearly, you should add it to the banner. In this tutorial, we’re going to put it next to the logo, in a font that’s about half the height of the graphic used. I position mine slightly left of the middle, using the font Nevis. My text is in my second most prominent color: white.

Step Four: Adding the Tagline

A banner with just your site name may not attract all of the clients you’re looking for. They know that my website is named “Deadly Clever Designs,” but what is it I’m designing? So let’s add a tagline! Using the rounded rectangle tool, create a rounded rectangle in your third prominent color (mine is green) that extends off the right and bottom edges, such as in the picture below:

Now let’s add some text on top. Using the text tool, add your tagline in a new layer above the rounded rectangle. I’m going to use white to contrast with the green, such as in the logo. To make it more readable, I’ve set the text style to “crisp.” (You may have to zoom to position the text correctly.)

Step Five: Exporting your Design

Once you’ve completed your tagline, it’s time to export your design to be used! In most cases, you’ll want to export your banner as a png file. To do this with photoshop, use Ctrl+Alt+Shift+S or File–>Save for Web. Adobe ImageReady should pop up to help you with formatting. Simply select PNG-24 from the dropdown menu.

And there you have it! Your attractive banner is now ready to start bringing in some clients. Obviously, this is a fairly simple tutorial and doesn’t cover animated banners or any kind of effects, but it should help the absolute beginner banner designer into the right direction. Here’s the final result:

What are your tips for banner design? What effects do you use to make your banners more attractive? Share your tips, resources, and opinions below!

No related posts.

This post was inspired by Yan of ThouShallBlog, who really wanted to know how I put the text over images such as in my trumpet playing post.

So Your Photos Need 1001 Words?

A picture is worth 1000 words, but sometimes you want to emphasize the message that the picture from flickr or from your own camera create. The easiest way to do this is to add a tagline. (not to be confused by a watermark, which is used to prevent photo theft and to claim ownership.) In this tutorial, I’ll be showing you how to add a tagline in three simple steps.

1) Get a Photograph

First, you’ll want a photograph. You should always use photos licensed under creative commons if they aren’t yours. For the purpose of this demonstration, I went to flickr (the link takes you to a CC search) and picked up an image of a very cute puppy. Then I opened it in photoshop. (Note: this tutorial works for any image editor that has an “opacity” function.)

2) Add the Bar

(optional: before doing this, you can make the photo B&W by going to image –> mode –> greyscale. Sometimes it makes the tagline look cooler.)

The next step is to create a new layer, and select a rectangle somewhere in your photograph. Preferably in the middle, without obstructing the view of the picture too much. Now fill in the layer with your desired color. If you’re not sure what color the layer should be, then just go for black.

Afterward, set the opacity to 15% (this may change based on photograph conditions) by using the slider in the “layers” toolbox.

3) Add Your Text

The final part is to add your text to the image. Simply click on the text tool in the toolbox and click over your newly created bar. And there you have it! A tagline. If you want to further, you can clip the bar off just after the text ends, to create a sort of flag. And you can even add lighting effects.

Was this tutorial helpful? What other photo effects do you want on your blog? Ask your questions below.

No related posts.