Posts Tagged ‘Website Design’

How to Check Inlinks in to A Site using Yahoo Site Explorer

Inlinks (or backlinks) are the incoming hyperlinks that can direct traffic to a website or blog. Inlinks are often used by web designers and developers as an indicator of the popularity or importance of a web page. By using Yahoo Site Explorer you can see how many hyperlinks are coming in to your site or a competitor’s site.

Go to http://siteexplorer.search.yahoo.com

Enter the name of the site you would like to check and then click Explore URL. In this example I am going to use the Acoustic Guitar Player site run by Tony Hogan http://the-guitarplayer.com/

yahoo site explorer

This will take you to a page showing you the number of pages on the site. You need to click on the inlinks button to see the links in to the site.

click inlinks

This will take you to a page that shows all links in to the site including any links that are happening within the site. To see only the links that are coming in from outside sites you will need to click on the Show Inlinks drop-down box and select Except from this domain

fromallpages

Then click on the next drop-down box and select Entire Site

inlinks entire site

 You can now see that this site has 3650 sites that link back to http://the-guitarplayer.com/. If you want to have a look at any of these that have hyperlink in to this sites you can just click on the Explore button.

final

  • Share/Bookmark

Posted by tipsforwebsitedesign on June 12th, 2009 No Comments

Create a Shiny Button Photoshop CS4 Tutorial

Here is a video tutorial from YouTube that shows you how to use Photoshop CS4 to easily make a shiny button to use in your website design projects.

  • Share/Bookmark

Posted by tipsforwebsitedesign on June 5th, 2009 8 Comments

Rounded Corners Content Box Photoshop CS4 Tutorial

In this tutorial I am going to show you how to make content boxes with rounded corners which you can use in your web design. In the example below I made a series of content boxes which were made in to clickable links to pages on the client’s site.

content boxes

You will need to create each content box as a separate Photoshop file.

Create a new document with a white background and 190 x 130 pixels dimensions

create new 

Create a new layer, then hide your background layer. Select the Rounded Rectangle Tool and then set the radius to 10px and check anti-alias. Under options choose “Fixed Size” with 180×130 px dimensions

rounded rectangle

Now draw a white rounded rectangle in the new layer you created. Now you need to center the rectangle on the layer. To do this you need to click on the move tool:

move tool 

You will need to Select All (CTRL+A) then Click on align vertical centers then align horizontal centers (see below if you are not sure how to do this).

center

This will make sure that you rectangle is sitting exactly in the center of your layer. Now deselect by hitting CTRL+D. Now you need to create the border around your rounded rectangle using a layer style. Click Layer > Layer Style and add a Stroke blending option to your rounded rectangle layer as below. Change the size to 1px and choose your color (I have used grey # 999999).

stroke

Unhide your background layer and your rectangle should look like this:

rectanglestroke

Now you need to use a picture that has a transparent background like this butterfly I used.

butterfly 

You will need to create a new layer (name it accordingly eg butterfly) and copy and paste your image in to the new layer. Now position your image where you want it to go on the layer.

butterflyrectangle 

Now you can add your heading text. Choose your font and type your heading. (I have used the font Segoe Print, Bold, 12pt, Color #003366)

Now type your main text using a smaller font. You will need to hit enter to go to each new line. I have used Trebuchet Ms, Regular, 11pt, Color #333333)

Now add your text to “Click Here” or “Read More” if it is appropriate for your content box. ( I have used Trebuchet Ms, Bold, 11pt, Color # 003366). Your content box should now look similar to this:

boxwithouteffects 

Now we will add a couple of drop shadow effects and you will be finished. Click on your Heading layer to select it, then click Layer > Layer Style and add a Drop Shadow to your text using the settings below:

Blend mode: Multiply
Opacity: 75%
Angle: 23%
Distance: 3px
Spread: 0%
Size: 5px

 dropshadow

Now select your image layer and add the same drop shadow effect to the image (in this example it is the butterfly). Your clickable content box is now complete.

content-box

You can now go ahead and create the rest of your boxes.

  • Share/Bookmark

Posted by tipsforwebsitedesign on May 20th, 2009 5 Comments

The Easy Way to Insert YouTube Video into WordPress

Follow these Simple Steps:

Log in to your Wordpress blog

Click on Posts and either Add New or Edit depending on where you want to embed the YouTube video

Click on the Kitchen Sink button as shown in the picture below

kitchen sink

On the toolbar below click on Insert/ edit embedded media

embed YouTube

In the popup window that appears paste the URL address of the YouTube video into the File/URL box

Leave Type as the default Flash

WordPress will automatically add the Dimensions if you click on the Preview box or when you hit the Insert button

popup-window1

Click Insert and you are done!

 

  • Share/Bookmark

Posted by tipsforwebsitedesign on April 3rd, 2009 5 Comments