Archive for May, 2009

A Beginner’s Guide to Adding a Blog Post to ning.com

Click on the Blogs link in the navigation bar
Click +add a blog post

Add a Ning Blog Post

Type in your post title and type your post content in to the entry field

To Bold Text

Highlight the words you want to make bold then click the “B” under the page entry

Bold Text

To add an image to your blog post

To add an image click the “Camera” icon under page entry

insertpicture1

A popup box will appear.
If you have an image on your computer that you would like to add, click the browse button next to the Upload an image box and navigate to the desired image on your computer.

insert picture2

If you have a link to an image on one of your websites then add the URL of the image to the Insert an existing image box.

To centre the image you will need to edit the code.

align

 

center ning image

To add a hyperlink to your post
Click the “Chain” icon under the page entry,

add hyperlink to ning

If you get a warning to allow scripted windows click to temporarily allow then go and click the chain icon again

A popup box will appear, type the web address in the box provided and click OK

linkuserprompt

To get your link to show in your post you MUST add a title or name etc as shown below:

link edit

link edit2

If you don’t do this your link will not show in your post.

Tags

It’s good practice to add tags to each of your blog posts. A TAG is keyword or term assigned to a blog post . Pick a few relevant words and type them in the TAG box here:

tags

When you are happy with your post you can choose to either Post it Now or Post it at a Future time/ date. To post it at a future time or date, enter details as shown below:

date post

Privacy and Comments

Here you can choose who can view a post and who can comment on a POST

comments

Now is a good time to preview your post. If you are happy with the post click PUBLISH and you are done otherwise click BACK and change what you are not happy with.

publish

  • Share/Bookmark

Posted by aussiepoker on May 31st, 2009 No Comments

Reflected Text Header Photoshop CS4 Tutorial

In this tutorial I am going to show you how to make a simple reflected text header which you can use in your web design.

header
Create a new document with a white background. In this example my header is 960px x 200px (you can make it any size that suits your project.)

new photoshop file

Double click the background layer to unlock it.

unlock background layer

Next apply a gradient effect to this background layer. Click Layer > Layer Style to add a Gradient Overlay blending option to your background layer. Click on the gradient box to edit the color of the gradient (As below)

photoshop gradient overlay

You can either choose one of the gradients you already have or make your own. To change a color, double-click on its color stop and the color picker will open, allowing you to select a new color. The color I will use for the stop on the left is #a49c6c. The color I will use on the right stop is #4c482c.

gradient editor

select stop color

Now add your title text. Click on the Text tool. Choose your font and type your title. (I have used the font Trebuchet MS, Bold, 60pt, Color #FFFFFF (white)). The text at this point needs to be somewhere towards the top of the canvas.

Click on the type layer to highlight it.

type layer

Now right click on the highlighted layer and click Duplicate Layer.

Click Layer > Layer Properties and rename the original text layer to “reflection”

reflection rename layer

Make sure you have selected the “reflection” layer and then hit CTRL+T (this selects the transform tool)
Click Edit > Transform > Flip Vertical. Now use your arrow key to move your reflected text like shown below:

reflection step 1

Rasterise the “reflection” layer by right clicking on it and selecting “Rasterize Type”
Now select the Rectangular Marquee Tool by hitting “M” or clicking on the tool in the toolbar. Select a feather of 10px.

marquee tool

Now use the marquee tool to make a selection on the “reflection” layer like the one below:

marquee selection

Now hit your backspace key, then CTRL+D to deselect the marquee tool
Make sure the “reflection” layer is still selected and change the opacity of the layer to 40%

layer opacity

Make sure your reflection layer is still selected then hit CTRL+T . Click Edit > Transform > Skew and drag the bottom left and right corners so your header looks like this:

skew

Select the Title type layer and then click Layer > Layer Style > Drop Shadow and add a drop shadow to your title using the settings below:
Blend mode: Multiply
Opacity: 75%
Angle: 120%
Distance: 3px
Spread: 0%
Size: 5px

drop shadow

Make sure that the Title type layer is still selected and then click Layer > Layer Style > Gradient Overlay and add a gradient to your title. Click on the gradient box to edit the color of the gradient The color I will use for the stop on the left is #585757. For the stop on the left use #FFFFFF. Click on the top right stop and change its opacity to 0% as shown below

title gradient

Click OK then make sure your gradient settings are the same as below before closing:
Blend Mode: Multiply
Opacity: 100%
Style: Linear
Angle :90
Scale 100%

Hold down your Shift Key to select both the reflections layer and your title (text) layer and use your arrow key to move the text down so your finished header looks like this:

header

If you don’t have Photoshop CS4 you can try Creative Suite 4 Free!

It’s now very easy to change the background gradient colour if you want to change the look.  Here are a few examples below:

blue header

For this blue gradient, edit the gradient overlay on the background layer and use #87d1e0 for the left stop and #237c9a for the right stop.

pink header

For this pink gradient, edit the gradient overlay on the background layer and use #ff5db3 for the left stop and #ef007c for the right stop.

  • Share/Bookmark

Posted by tipsforwebsitedesign on May 29th, 2009 5 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

Top 5 Free RSS Readers

To access the RSS Feeds you subscribe to you will need a RSS Feed Reader. There are a large number of RSS Feed Readers you can use. Good Feed Readers allow you to search, organize and categorize RSS news items.

My Top 5 free RSS readers are:

Google Reader

http://www.google.com/reader
Google Reader features:

  • Works in most modern browsers without needing to install any software.
  • Has sensible keyboard shortcuts to make navigating easy
  • Lets you tag, sort and organize individual items using labels
  • Allows you to easily share items on a public web page that has an RSS feed itself and send items by email, or use tags for blogrolls.
  • Has a blog and news search engine to make it easy to find and subscribe to feeds
  • Google Gears allows you to access up to 2000 items offline

Google Reader

Bloglines

http://www.bloglines.com/
Cool Bloglines features:

  • Mobile Bloglines: Allows access to your favourite content on your phone
  • Drag and Drop Feed Manager: Drag and drop to manage your feeds
  • Bloglines Top 1000: Keep track of the Top 1000 most popular feeds
  • 3 Pane Reading View: Gives you more options for reading your feeds
  • Custom Start Page: Allows you to customise your start page with your favourite content

Bloglines

Feedreader

http://www.feedreader.com/
Feedreader features:

  • Feedreader is completely free software that you download and install on your computer
  • It has a very simple and easy-to-use interface which even non-technical users find easy to understand and navigate.
  • Users can create smart feeds by adding key words or phrases related to their area of interest. Feedreader automatically monitors articles, and displays those topics
  • Allows you to add or remove columns from your view
  • With a single click you can group headlines by source, date, or tag

Feedreader

MyYahoo

http://my.yahoo.com/
You can subscribe to RSS feeds using My Yahoo!

MyYahoo features:

  • By entering a keyword or search term Yahoo will automatically create an RSS feed to track the latest news search results for that topic.
  • Yahoo has a very good tutorial on how to set up RSS feeds on to your “My Yahoo!” Page. Click here to read it http://help.yahoo.com/tutorials/my2/mycham/my_addcontent3.html

My Yahoo Reader

Firefox Feedly Reader RSS Add-On

https://addons.mozilla.org/en-US/firefox/addon/8538
If you use Firefox as your default browser then you should consider using the Firefox Add-On Feedly Reader  to view your RSS Feeds Firefox Reader features:

  • Allows you to import your favorite RSS feeds and sources from Google Reader, Bloglines, Netvibes or your bookmarks
  • Allows you to collect and organize RSS feeds into tabs/categories
  • You can configure multiple views: title only, title and summary, image grid, video grid, entire content
  • Allows you to filter the most relevant/popular content
  • You can share articles on twitter, friendfeed, tumblr, delicious and facebook
  • Has an excellent list of keyboard shortcuts

 The firefox add-on can be found here https://addons.mozilla.org/en-US/firefox/addon/8538

Firefox Feedly Reader  RSS Add-On

  • Share/Bookmark

Posted by tipsforwebsitedesign on May 10th, 2009 2 Comments