Dezzain Studio » Tutorials http://www.dezzain.com Personal Web Design, Blog Design And Custom Wordpress Themes Development Sat, 18 Oct 2008 15:49:45 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 How To Design A Simple Radial Elements http://www.dezzain.com/tutorials/how-to-design-a-simple-radial-elements/ http://www.dezzain.com/tutorials/how-to-design-a-simple-radial-elements/#comments Tue, 15 Jan 2008 05:51:45 +0000 Richie-K http://www.dezzain.com/tutorials/how-to-design-a-simple-radial-elements/ today we going to design a simple yet stylish radial element for your header site or sidebar elements. First thing first, what is radial elements? radial is a random line stripe that give an advantage attention for your visitors and it is also been pratice by web designer to add some spice to their site to give more in view to a more important intro text in their site.

First Step – Make A Header Sample

radial-step1.jpg

create a canvas for your header, usually around 900px width and 180px height and make sure it has a resolution of 72px and 8bit RGB colour

Second Step – Choose A Background Image

radial-step2.jpg

open any images that larger than your original header images and copy paste to the radial canvas, it should similiar like this:

radial-step3a.jpg

Step 3 – Make A New Layer For The Radial Canvas

radial-step3a1.jpg

Select Top Navigation of your photoshop and go to Layer > New > New Layer and now there are a new layer top of the layer panel similiar to below:

radial-step3a2.jpg

Step 4 – Drag The Radial Shape So It Fit Your Header Images

radial-step3.jpg

select a shape similiar to above and drag it across the content. you can zoom out your canvas so it can fully covered all area of the header image, sample below

radial-step3a3.jpg

and it will look like this when you released the shape control

radial-step3a4.jpg

Step 5 – Ok Now You Got A Simple Radial Shape In A Header, Let’s Retouch It

ok after this step, you can be creative on how to make the radial blend with your background image, below are just a example what i would do to make the radial more subtle with current images.

Choose the radial shape layer > blending options

radial-step5.jpg

play around with colour blend in gradient overlay and blend the backgorund accordingly and set the blending option to 50% – 70% opacity
radial-step5a.jpg

Final Result After Some Element Of Text And Block Added

radial-step6.jpg

There you go but keep in mind that this is a simple way to make a radial element in header. Try experiement with diffrent kind of images and blending option to get more optimized radial element for your site header.

You can download the sample psd here for your own practice purpose only.

thank and hope you enjoy this tutorial :)

]]> http://www.dezzain.com/tutorials/how-to-design-a-simple-radial-elements/feed/ 5 How To Input Social Clouds In Wordpress http://www.dezzain.com/tutorials/how-to-input-social-clouds-in-wordpress/ http://www.dezzain.com/tutorials/how-to-input-social-clouds-in-wordpress/#comments Wed, 12 Sep 2007 01:42:55 +0000 Richie-K http://www.dezzain.com/tutorials/how-to-input-social-clouds-in-wordpress/ scloud.gif

the social cloud is just a niffty stuff to nput into your sidebar. just copy and paste below text into your sidebar or any desired place in templates:

Copy & Paste This Line

Social cloud with homepage tag:

<div class="cloud-boxes"><a href="http://www.blinkbits.com/bookmarklets/save.php?v=1&source_url=<?php echo get_settings('home'); ?>&title=Spread the seed of <?php bloginfo('name'); ?>&body=more about Spread the seed of <?php bloginfo('name'); ?>" style="font-size:101%">BlinkBits</a> <a href="http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=<?php echo get_settings('home'); ?>&Title=Spread the seed of <?php bloginfo('name'); ?>"style="font-size:83%">Blinklist</a><a href="http://www.blogmemes.net/post.php?url=<?php echo get_settings('home'); ?>&title=Spread the seed of <?php bloginfo('name'); ?>" style="font-size:135%">Blogmemes</a>

<a href="http://blogmarks.net/my/new.php?mini=1&simple=1&url=<?php echo get_settings('home'); ?>&title=Spread the seed of <?php bloginfo('name'); ?>" style="font-size:96%">Blogmark</a><a href="http://cimlap.blogter.hu/index.php?action=suggest_link&title=Spread the seed of <?php bloginfo('name'); ?>&url=<?php echo get_settings('home'); ?>" style="font-size:109%">blogtercimlap</a>

<a href="http://bluedot.us/Authoring.aspx?>u=<?php echo get_settings('home'); ?>&title=Spread the seed of <?php bloginfo('name'); ?>" style="font-size:83%">Blue Dot</a><a href="http://book.mark.hu/bookmarks.php/?action=add&address=<?php echo get_settings('home'); ?>%2F&title=Spread the seed of <?php bloginfo('name'); ?>" style="font-size:83%">Book.mark.hu</a>

<a href="http://www.bumpzee.com/bump.php?u=<?php echo get_settings('home'); ?>" style="font-size:90%">BumpZee</a><a href="http://co.mments.com/track?url=<?php echo get_settings('home'); ?>&title=Spread the seed of <?php bloginfo('name'); ?>" style="font-size:83%">co.mments</a>

<a href="http://www.connotea.org/addpopup?continue=confirm&uri=<?php echo get_settings('home'); ?>&title=Spread the seed of <?php bloginfo('name'); ?>" style="font-size:96%">connotea</a><a href="http://del.icio.us/post?url=<?php echo get_settings('home'); ?>&title=Spread the seed of <?php bloginfo('name'); ?>" style="font-size:123%">del.icio.us</a>

<a href="http://digg.com/submit?phase=2&url=<?php echo get_settings('home'); ?>&title=Spread the seed of <?php bloginfo('name'); ?>" style="font-size:166%">Digg</a><a href="http://www.dotnetkicks.com/kick/?url=<?php echo get_settings('home'); ?>&title=Spread the seed of <?php bloginfo('name'); ?>" style="font-size:87%">DotNetKicks</a>

<a href="http://www.dzone.com/links/add.html?url=<?php echo get_settings('home'); ?>&title=Spread the seed of <?php bloginfo('name'); ?>" style="font-size:96%">DZone</a>

<a href="mailto:?Subject=check <?php bloginfo('name'); ?> Out&body=I found a cool site <?php bloginfo('name'); ?>: <?php echo get_settings('home'); ?>" style="font-size:186%">Email.This</a>

<a href="http://cgi.fark.com/cgi/fark/edit.pl?new_url=<?php echo get_settings('home'); ?>&new_comment=Spread the seed of <?php bloginfo('name'); ?>&new_comment=BLOGNAME&linktype=Misc" style="font-size:83%">fark</a>

<a href="http://feedmelinks.com/categorize?from=toolbar&op=submit&url=<?php echo get_settings('home'); ?>&name=Spread the seed of <?php bloginfo('name'); ?>" style="font-size:96%">feedmelinks</a>

<a href="http://www.furl.net/storeIt.jsp?u=<?php echo get_settings('home'); ?>&t=Spread the seed of <?php bloginfo('name'); ?>" style="font-size:135%">furl</a>

<a href="http://www.indianpad.com/submit.php?url=<?php echo get_settings('home'); ?>" style="font-size:96%">IndianPad</a>

<a href="http://www.linkter.hu/index.php?action=suggest_link&url=<?php echo get_settings('home'); ?>&title=Spread the seed of <?php bloginfo('name'); ?>" style="font-size:96%">Linkster</a>

<a href="http://www.mister-wong.com/addurl/?bm_url=<?php echo get_settings('home'); ?>&bm_description=Spread the seed of <?php bloginfo('name'); ?>&plugin=soc" style="font-size:83%">MisterWong</a>

<a href="http://ma.gnolia.com/bookmarklet/add?url=<?php echo get_settings('home'); ?>&title=Spread the seed of <?php bloginfo('name'); ?>" style="font-size:122%">Ma.gnolia</a>

<a href="http://www.newsvine.com/_tools/seed&save?u=<?php echo get_settings('home'); ?>&h=Spread the seed of <?php bloginfo('name'); ?>" title="News (3)" style="font-size:119%">NewsVine</a>

<a href="http://www.netscape.com/submit/?U=<?php echo get_settings('home'); ?>&T=Spread the seed of <?php bloginfo('name'); ?>" style="font-size:83%">Netscape</a>

<a href="http://www.plugim.com/submit?url=<?php echo get_settings('home'); ?>&title=Spread the seed of <?php bloginfo('name'); ?>" style="font-size:135%">PlugIM</a>

<a href="http://www.simpy.com/simpy/LinkAdd.do?href=<?php echo get_settings('home'); ?>&title=Spread the seed of <?php bloginfo('name'); ?>" style="font-size:174%">Simpy</a>

<a href="http://www.sphere.com/search?q=sphereit:<?php echo get_settings('home'); ?>&title=Spread the seed of <?php bloginfo('name'); ?>" style="font-size:126%">SphereIT</a>

<a href="http://www.stumbleupon.com/submit?url=<?php echo get_settings('home'); ?>&title=Spread the seed of <?php bloginfo('name'); ?>" style="font-size:146%">StumbleUpon</a>

<a href="http://technorati.com/faves?add=<?php echo get_settings('home'); ?>" style="font-size:146%">TechnoratiFAV</a>

<a href="http://webride.org/discuss/split.php?uri=<?php echo get_settings('home'); ?>&title=Spread the seed of <?php bloginfo('name'); ?>" style="font-size:83%">Webride</a>

<a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=<?php echo get_settings('home'); ?>&=Spread the seed of <?php bloginfo('name'); ?>" style="font-size:83%">YahooMyWeb</a>

</div>

Social cloud with post permalink tag:

<div class="cloud-boxes">

<a href="http://www.blinkbits.com/bookmarklets/save.php?v=1&source_url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&body=more about <?php the_title(); ?>" style="font-size:161%">BlinkBits</a><a href="http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=<?php the_permalink(); ?>&Title=<?php the_title(); ?>"style="font-size:83%">Blinklist</a>

<a href="http://www.blogmemes.net/post.php?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" style="font-size:135%">Blogmemes</a>

<a href="http://blogmarks.net/my/new.php?mini=1&simple=1&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" style="font-size:96%">Blogmark</a>

<a href="http://cimlap.blogter.hu/index.php?action=suggest_link&title=<?php the_title(); ?>&url=<?php the_permalink(); ?>" style="font-size:109%">blogtercimlap</a>

<a href="http://bluedot.us/Authoring.aspx?>u=<?php the_permalink(); ?>&title=<?php the_title(); ?>" style="font-size:83%">Blue Dot</a>

<a href="http://book.mark.hu/bookmarks.php/?action=add&address=<?php the_permalink(); ?>%2F&title=<?php the_title(); ?>" style="font-size:83%">Book.mark.hu</a>

<a href="http://www.bumpzee.com/bump.php?u=<?php the_permalink(); ?>" style="font-size:161%">BumpZee</a>

<a href="http://co.mments.com/track?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" style="font-size:83%">co.mments</a>

<a href="http://www.connotea.org/addpopup?continue=confirm&uri=<?php the_permalink(); ?>&title=<?php the_title(); ?>" style="font-size:96%">connotea</a>

<a href="http://del.icio.us/post?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" style="font-size:83%">del.icio.us</a>

<a href="http://digg.com/submit?phase=2&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" style="font-size:96%">Digg</a>

<a href="http://www.dotnetkicks.com/kick/?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" style="font-size:187%">DotNetKicks</a>

<a href="http://www.dzone.com/links/add.html?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" style="font-size:96%">DZone</a>

<a href="mailto:?Subject=check this <?php the_title(); ?> Out&body=I found a cool article about <?php the_title(); ?>: <?php the_permalink(); ?>">Email.This</a>

<a href="http://cgi.fark.com/cgi/fark/edit.pl?new_url=<?php the_permalink(); ?>&new_comment=<?php the_title(); ?>&new_comment=BLOGNAME&linktype=Misc" style="font-size:83%">fark</a>

<a href="http://feedmelinks.com/categorize?from=toolbar&op=submit&url=<?php the_permalink(); ?>&name=<?php the_title(); ?>" style="font-size:96%">feedmelinks</a>

<a href="http://www.furl.net/storeIt.jsp?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" style="font-size:135%">furl</a>

<a href="http://www.indianpad.com/submit.php?url=<?php the_permalink(); ?>" style="font-size:96%">IndianPad</a>

<a href="http://www.linkter.hu/index.php?action=suggest_link&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" style="font-size:96%">Linkster</a>

<a href="http://www.mister-wong.com/addurl/?bm_url=<?php the_permalink(); ?>&bm_description=<?php the_title(); ?>&plugin=soc" style="font-size:83%">MisterWong</a>

<a href="http://ma.gnolia.com/bookmarklet/add?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" style="font-size:122%">Ma.gnolia</a>

<a href="http://www.newsvine.com/_tools/seed&save?u=<?php the_permalink(); ?>&h=<?php the_title(); ?>" title="News (3)" style="font-size:109%">NewsVine</a>

<a href="http://www.netscape.com/submit/?U=<?php the_permalink(); ?>&T=<?php the_title(); ?>" style="font-size:83%">Netscape</a>

<a href="http://www.plugim.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" style="font-size:135%">PlugIM</a>

<a href="http://www.simpy.com/simpy/LinkAdd.do?href=<?php the_permalink(); ?>&title=<?php the_title(); ?>" style="font-size:174%">Simpy</a>

<a href="http://www.sphere.com/search?q=sphereit:<?php the_permalink(); ?>&title=<?php the_title(); ?>" style="font-size:126%">SphereIT</a>

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>&title=<?php the_title(); ?>" style="font-size:146%">StumbleUpon</a>

<a href="http://technorati.com/faves?add=<?php the_permalink(); ?>" style="font-size:106%">TechnoratiFAV</a>

<a href="http://webride.org/discuss/split.php?uri=<?php the_permalink(); ?>&title=<?php the_title(); ?>" style="font-size:83%">Webride</a>

<a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=<?php the_permalink(); ?>&=<?php the_title(); ?>" style="font-size:83%">YahooMyWeb</a>

</div>

In additional add this css line into your template style css

.cloud-boxes {
margin: 0px;
padding: 5px 0px;
float: left;
width: 90%;
font-size: 12px;
line-height: 20px;
}

that’s all and you’re done. Of course you can add as many as network tools link into the list and change the font size percentage of the more popular social links.

]]> http://www.dezzain.com/tutorials/how-to-input-social-clouds-in-wordpress/feed/ 13