Showing posts with label Design. Show all posts
Showing posts with label Design. Show all posts

Jan 18, 2009

3,000 over Free Blogger Templates and Wordpress Themes

_______________

While many bloggers around the world have yet to realised, its time you give your blog a change in it's design. Close to 60% of Blogger are still using the original template and 30% falls under wordpress users. Blogger is seen to be meant for beginners but since it was meant for beginners, changing a template is as easy as load and go! Yaro Starak had done a video log on blog design and giving a change in your design can improve the number of visitors to your site as well.

A list of 10 blogs for each blog platform that offers templates and themes which you can download from. Sad to say the best design still goes to wordpress but blogger users you have no worries, there are upcoming designers who have duplicated the exact wordpress themes, so we will have more collection of such well designed templates.

Blogger Classic & XML Templates

  1. Arcsin -A collection of blogger templates that the designer had put in effort to develop.

  2. Blogger Templates - You have a wide selection of bloggers(XML) template from 2 column to 3 column, most of which have a beautiful background so if you are looking for templates that have a nice and attraction look, this would be the place to get your templates.

  3. Blog Connection - A collection of Classic and XML templates for you to download.

  4. BlogCrowd - Without doubt Blog crowd designed a range of templates that were web 2.0 style and many are simple and look stylish to use.

  5. JackBook - One of the best Blogger around who could change a wordpress template upon request, check out his new template created for blogger.

  6. Final Sense - It has a range of category to choose from, you can have your 3 column template or even a theme template like animals or general template. Choose from the list and find what' suitable.

  7. Gecko and Fly - Large collection in both Classic and XML blogger templates close to 50 over templates.

  8. Pannasmontata - As the name is weird and long, they have a list of templates that could be hidden treasures templates which are not found by many bloggers.

  9. Pyzam - A huge collection of Blogger template a total of 900 over blogger templates for you to choose.

  10. 99 Computers - They tell you much of computers, but they do have some designs that are good for your blogs.

Wordpress Themes

  1. Arcsin - There are close to 21 well designed wordpress themes.

  2. Blogging Themes - Great list of Wordpress themes close to 30 for you to choose.

  3. DoshDosh - Offers 18 Made for adsense Optimize Themes.

  4. HongKiat - 49 of the most downloaded wordpress themes.

  5. kaushalsheth - A collection of elegant wordpress themes.

  6. Mashable - Shows you 20 4 column Wordpress themes worth downloading

  7. Smashing Magazines - They may not be the creator of the theme but a huge 83 themes that you have not seen before lights up in front of you.

  8. SilentBits - A list of smacking cool 30 wordpress themes.

  9. Teknobites - Offers 10 Great Wordpress Themes.

  10. WriterSpace - This chap listed 100 Favourite Wordpress themes available for download.

If you have found another blog or designer who have a good collection of templates or themes you are welcome to contact me and i will update this page for everybody's conviences.

Jan 16, 2009

Top Ten Social Bookmarking Sites

Sharing favorite webpages has become popular recently. Social bookmarking sites allow visitors to let everyone else know where they found important or just plain interesting information. With the popularity spreading we are seeing more sites offering social bookmarking. Listed below you'll find information on ten of the popular bookmarking sites.

blinklist.com--This site allows you to bookmark sites with the click of a button on your toolbar. You can keep your lists private or share them with the world.

del.icio.us-- One of the first social bookmarking sites to spark the world's attention is still a favorite.

digg.com-- Digg has several categories for the 8.7 million visitors it gets monthly to browse through to find the information and statistics they need quickly. Digg also allows its members to post to their blog through this site when a visitor wants to leave a link to a webpage or article on their blog.

fark.com-- With categories such as sports, politics, music, and business on the main page, this site allows users to browse others bookmarked sites by topic to help you easily find what you are looking for.

magnolia.com-- The ease of use makes this smaller site attractive. Ma.gnolia.com allows the user to become familiar with the whole social bookmarking process making it a great site to start with if you are new to social bookmarking.

mybloglog.com-- Combining social bookmarking and blogging into a social networking package makes this site a great place to promote your pages while finding other sites that may interest you.

reddit.com-- users can view what's new or what's hot at the moment as well as see the weekly stats on this social bookmarking site.

stumbleupon.com-- A relatively new site that combines myspace and social bookmarking where users can make multiple pages on any topic.

tailrank.com-- Blogs often contain a lot of valuable information. This site helps to find the hot buzz online by keeping track of what is being said between blogs. Users search through topics such as politics, technology, video and entertainment or even randomly if they prefer to find out what is going on online.

technorati.com-- Technorati allows its million and a half visitors share their blog posts, photos, favorite videos and other favorite sites every month.

Each social bookmarking site is unique, all are geared toward different audiences. For a website owner to get the most out of social bookmarking you can use a combination of several different sites. Start by putting your blog on one site, Technorati for instance. You can then start a webpage or two on Stumbleupon with themes that match your blog. Listing your pages as favorites on Digg after you have set them up will drive traffic to your site.

Bookmarking your own site gives users of these sites easy access to your webpages. Keep an eye on sites like tailrank.com to see what other users are talking about, use that information for inspiration for your own blog. This will keep your site fresh and in line with what others are looking for online.

If you use these sites together you can introduce your site to people who have similar interests while helping your site to increase traffic as well as linking you to possible future partners in other projects that can help you to increase your traffic and revenue online. Read the rules of each site and make sure you stay within the guidelines and use these tools to help your site grow.

How to make a StarBurst Effect in Photoshop

This tutorial has been designed to teach you the following things:

  • filling layers and selections with color
  • using menu commands to affect the entire document
  • merging layers together
  • applying special effect filters
  • applying Layer Blend Modes to produce a specific effect

Step 1

Ok lets start by creating a New Document (Ctrl/Cmd+N). The dimensions must be equal, so let's use 256x256 pixels, and with a White Background, and using 72dpi.

Step 2

Create a New Layer, and name it 'starburst'. Then draw a rectangular selection from top to bottom, and make it cover roughly 3/4 of the canvas from left-to-right. Fill that with black, then Deselect. You now have a B&W;image - 3/4 left is black, 1/4 right is white.

Step 3

Open the Filter menu now, and go down to "Stylize". Then within there, choose "Wind...". Set the filter to these settings: Method: Blast
Direction: From the Right

Apply the filter.

HINT PAUSE: If you experiment with the Wind filter, you'll notice that it reacts oppositely for black and white. We're using black, and so the wind direction is what the option shows - "from the right". If you used this option on a white filled area though, the effect would actually be the opposite - the "from the right" option would produce wind "from the left", instead. This isn't crucial to know here, but it IS something worth noting in general.


Step 4

Press Ctrl/Cmd+F five times. This applies the filter a total of 6x. This will make the black section a lot smaller and help spread out our spikes.

Step 5

Your image should now look somewhat like this one. Now we'll apply the "Motion Blur" filter. Use these settings in the filter:

Angle: 0 (zero)
Distance: 200

Apply the filter. Your image should now look much smoother, and the spikes should be much more spread out across the canvas.




Step 6

Now we need to rotate our entire document. Rotate the entire Canvas 90 degrees counter-clockwise (90°CCW). Image menu/Rotate Canvas.../90°CCW.

Step 7

And now for the special effect - the Polar Coordinates filter! Woohoo!
Open the filter and set it to "Rectangle to Polar". (in the Filter/Distort menu)
Apply the filter.

Step 8



And now, to make our starburst effect easier to use within other images, and to manipulate in general, we're going to extract the transparent starburst area from the black surrounding it. To understand better what we're dealing with here, hide the background layer and you'll notice that our starburst effect is actually a transparent area, not color ( as seen here ). Make sure to unhide the background layer again!




Ctrl/Cmd-Click the 'starburst' layer, then press Ctrl+Shift+I (MAC: Cmd+Shift+I) to invert the selection. Create a New Layer and fill the selection with white, then Deselect. Now fill the Background layer with black. And you can now delete the original black layer with the transparent starburst on it; the one we started with. You can now also give your new white starburst layer a proper name - "starburst".







T I P S
Here's just a few things you can do to tidy up the document, and enhance the effect a little more:


Step 1


And last, create a New Layer above the starburst layer, and fill this layer with the color of your choice. Then change it's Blend Mode to one of these: Overlay/Softlight/Color Burn/Color. In the sample image at the top of this page, I used "Overlay", and a bright purple - R=153 G=51 B=255. Plus, I did the 3 "GURU TIPS" on the next page.

In the following steps we're going to enhance the effect.


Step 2

We're going to strengthen the inner center spot, while softening it at the same time. Duplicate the 'starburst' layer and under the 'Distort' menu, apply the "Pinch..." filter, set to 100%. Under the FILTER menu choose 'Other...', then 'Maximum...'. Set it to 2 pixels and apply it. Now press Ctrl/Cmd+E to merge the 2 layers together.

Step 3

To strengthen the impact of the effect even more, try this: Apply the "Pinch..." filter again to the 'starburst' layer, and use 100% again.

Step 4

You're going to lose some detail after applying the Polar Coordinates & Pinch filters. So if you'd like to make the image crisper, and get some of the finer detail back (just how much detail, is up to you) apply the "Unsharp Mask" filter to the 'starburst' layer (Filter/Sharpen/Unsharp Mask...).
I used these settings on mine: Amount: 50%
Radius: 0.5
Threshold: 0


Step 5

Using the starburst in other images or documents: (optional)
Now that your starburst image is on it's own layer, you can just open your other document, and drag the 'starburst' layer into it. Once on it's own new layer, move it's layer up or down in the layers palette to suit your purpose for it in your image. And you can now also Move the starburst anywhere you want within the new document. Then to add some color to the effect, create a New Layer right above the 'starburst' layer. Ctrl/Cmd-click the starburst layer to select the starburst shape, then under the SELECT menu choose Modify/Expand. Expand the selection 2 pixels. Now fill it with the same color you're using for the document's background co lour. Then set the layer's Blend Mode to COLOR. And finally, link these 2 layers together; so they can be moved around together as one.

And that's it for my involvement in this effect!
It's now up to you to think of other ways to experiment with the it. I'm sure you'll find lots of other things to do for it.

Here's one example to get you going...



This was created by applying the FILTER>Stylize>Diffuse [Anisotropic] filter 10x ( a PS7 and up filter ). Interesting effect isn't it? Now it's your turn!

Creating a Magic Talisman in Photoshop

1: Create a new black (or dark colored) 1024x768 image. Create a new layer. On this second layer, use the ellipse tool and hold the shift-key to draw a circle. Make sure that the circle is using paths so it will not color in the circle.



2: You now have a path outline of a circle. Select the pen tool , right-click on the canvas and from the pop-up menu, select "Stroke Path." This will outline your path using whatever brush and color you have selected. I would recommend using the hard round brush at 3 pixels. Right-click and select delete path.



3: Still using the pen tool , select the Custom shape tool and choose a shape. I chose the bulls eye. Using whatever shape you selected, place it somewhere inside the circle. The select "Stroke Path" as we did before and delete the path.



4: Now use the line tool to make your design a bit more elaborate and original. Use a slightly smaller pixel width than before, like 2 pixels. Duplicate the layer. Select the bottom layer and go Filter > Blur > Gaussian Blur 4 pixels. With the top layer selected, go Layer > Merge Down.



5: Duplicated the merged design layer and select the lower layer and go Filter > Distort > Ripple. Select a large ripple or about 750%. Now Filter > Blur > Radial Blur and make sure you select Zoom and set the amount to 100. Duplicate that layer and set the upper distorted layer to Vivid light. Merge all the layers except the black background.



6: Use the Move tool on your design layer and go Edit > Transform > Distort. Move about the circle until you have it in your desired position.

7: As a final touch, duplicate the layer and set the lower layer to Filter > Blur > Gaussian Blur 8 pixels. Set the upper layer to Overlay and go Layer > Flatten Image. Finally, use the Dodge tool at a brush size of 50 pixels and an exposure of 90% to highlight areas and emphasize the glow. You now have a kick-ass surface for any character to stand or sit on!

How to make Creamy LCD Display in photoshop

Step 1
First create a rounded rectangle with your rounded rectangle tool of size w=144 h=82 and fill with color=FFCF5A

Step 2
Then apply the following layer styles to the layer:
Inner Shadow: color=black

Inner Glow: color=FF0000

Bevel & Emboss: colors=default

Satin: color=715501

Gradient: foreground color= transparent background color=FF3000

Stroke: color=black

When your done you should have something like this:

Step 3
Then add a small bump at the bottom of the of the lcd in a new layer with the color=FF6000. Select the layer transparency of the lcd layer then go back to the new layer. Apply a Gaussian Blur of about 1.0. Finally set the layer Opacity to 22% in your layer palette.

When your done you should have something like this:

Step 4
Duplicate the small bump layer you just create then click "Edit > Transform > Flip Horizontally". Then click "Edit > Free Transform" and set the width (H) to 50%. Then move the layer to the far right corner of your lcd and set the layer opacity to 25%.

When your done you should have something like this:

Step 5
Create a new layer folder/group and rename it "Glass" in your layer palette and create a new layer inside it and fill it with color=white. Name this layer "Layer 13" for good luck. Select the layer transparency of your lcd layer and then invert the selection. Go back to your lcd folder, then to the new layer you created and delete the unwanted portions of white from it. Invert the selection again to regain it then Gaussian blur the white layer by about 15.0. Using your vector tool create a wave across the white layer that swoops down when up then starts swooping down again. Let the selected portion be the bottom part of the lcd. Then right click on the edge of the vector area and click "Make Selection". Then press delete on your keyboard. Select layer transparency of the lcd layer then go back to the white layer and blur by about 3.0. Set the layer opacity to about 31% in your layer palette.

When your done you should have something like this:

Step 6
Select layer transparency of your lcd area again and create a new layer called "Layer 14" and fill it with white, remove the bottom portion of the layer so that the layer only cover about 120 pixels of your lcd area from the top down. Select layer transparency of your lcd layer again then blur your new layer by about 13.0. Select layer transparency of Layer 13 then invert the selection and delete the portions from "Layer 14". If the layer is bit to bright set the transparency to as low a desired, I've set mine to about 92%.

When your done you should have something not too far from this:

Step 7
Create a new layer called "Layer 15". Select layer transparency of your lcd layer, invert the selection then delete the unwanted portions from Layer 15. Invert the selection again to regain it, then move it down by one pixel and click delete on your keyboard to create a thin white line in the shape of your lcd. Make your you deselect any selections you have then Gaussian blur the layer by 1.0. Move the layer down by 6 pixels. Duplicate the layer to create "Layer 15 copy" and move this new layer down by 1 pixel.

When your done you should have something like this:

Step 8
I noticed that the right and bottom parts of the display are a bit bright and may need some darkness to them so create a new layer called "Layer 16" and fill it with black. Select layer transparency of your lcd layer, invert the selection and remove the unwanted portions of Layer 16. Invert the selection again to regain it, then move the selection up by 2 pixels and to the left by 2 pixels then delete this area leaving a 2 pixel black area just within the lcd region. Select layer transparency of your lcd layer then go back to layer 16 and blur to your desired of darkness.

When I was done I had something like this:

Step 9
Create a new layer called "Layer 17" and redo you steps like Step 8 but this time use a lesser blur and adjust the layer opacity until you get the desired look.

When I was done I had something like this:

Step 10
Some airbrushing skill is needed now and if you have a drawing tablet then your in luck if not you'd have to use your blur tool or Gaussian blur until you get the look desired. Your going to add a bit of white to the top right corner of you display but its going to be very faint and the edges of it must not be visible at all.

When I was done I had something like this when you place the airbrushed "Layer 18" over a black layer by itself:

Then I set the transparency of my layer to about 50% and I had something like this:

Step 11
Create a new layer called "Layer 19" then create a white-to-transparent gradient from the boom left corner of the lcd area with a length of about 60 pixels diagonally towards the top right corner of the lcd. Set the layer opacity to about 45%. You can also blur it by about 1 or 2 pixels to smoothen it out a bit if you want.
If you want to see this layer against a black background so you can see how it looks at 100% opacity then look here:

When your done you should have something like this:

Step 12
Create a new layer called "Layer 20" then with your vector tool create a bump at the bottom of your lcd area and fill the area with white. Gaussian blur this layer by about 2.0 and set the opacity to 36% and you should have something like this:

Step 13
Finally add some airbrushed layers to the bottom right and left corners of the lcd area and another line like "Layer 15" but at the bottom this time and your done. When your done you should have something like this: