CG-Designer: August 2009

Tuesday, August 25, 2009

400+ Time Saving Photoshop Actions

Photoshop Actions are extremely useful in both saving time as well as learning new features that you may not know. They can be used to help standardize your final project better, cut down on repetitive tasks, and to assist you in a bit of creative inspiration. We have collected a handful of great (and free) downloadable PS Actions in this article and also included a nice tutorial on creating your own Actions.

This is a guest post by Omar the Radwan.

Photoshop Actions Downloads

8 Photography Actions
40 Mixed Actions
10 Polaroid Actions
‘rawimage’ from deviantart.com has made a great Polaroid Generator Action. Not only do the finalized photos look wonderful, but the â€˜finisher’ action adds a bit of random streaks and bevels that make each picture look unique.
40 Mixed Actions
170 Mixed Actions
124 Mixed Actions

Additional Photoshop Actions Downloads

Photoshop Actions Tutorial

How to Create Photoshop Actions

Blogged with the Flock Browser

jQuery Examples – Horizontal Accordion

Up until now I have always used Scriptaculous / Prototype for any Java Script animation and effects, but lately I’ve heard a lot of good things about jQuery. So, I thought I would give it a try, and start doing some experiments.

In this example, I have created an accordion effect that reveals a caption for each thumbnail. I’ve done similar navigations like this in flash, so I wanted to see how it compared to doing it with jQuery.

In order to use jQuery in your pages you first need to download the latest release and then include the Java Script library within your head tags.


<script src="javascript/jquery-1.2.3.js"
type="text/javascript"></script>

Now lets take a look at the html for this example. I gave the first anchor tag an id, so that we could set an initial width and make it appear expanded when the page is loaded.


<ul>
  <li>
    <a id="a1">
      <img src="images/free_thumb.jpg" />
      <p>
        <strong>Freebies</strong><br/>
        Download free files to make your job easier.
      </p>
    </a>
  </li>
  <li>
    <a>
       <img src="images/tut_thumb.jpg" />
       <p>
         <strong>Tutorials</strong><br/>
         Tips and tricks to help you
         keep up with the latest technology.
       </p>
    </a>
  </li>
  <li>
    <a>
      <img src="images/inspire_thumb.jpg" />
      <p>
        <strong>Inspiration</strong><br/>
        Get inspired by what other designers are doing.
      </p>
    </a>
  </li>
</ul>

Here is the CSS, which is pretty straight forward. The main thing to note is the fixed height being set on the anchor tag. Doing this along with “overflow: hidden” prevents the contained p tag from dropping down below the thumbnail.


ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li{
  float: left;
  padding: 10px;
  display: block;
  margin-right: 10px;
}

ul li a{
  display: block;
  overflow: hidden;
  height: 75px;
  width: 75px;
}

#a1{
  width: 210px;
}

ul li img{
  position: absolute;
  border: 3px solid #881212;
}

ul li p{
  margin: 0;
  padding: 0;
  width: 120px;
  display: block;
  margin-left: 85px;
}

And here is the jQuery script that makes it all happen. This can be placed in the head tag. The first thing we do is set a few initial variables: lastBlock represents the block that is already expanded, maxWidth is the width we want our block to be when it is expanded, and minWidth is the width when it is not expanded.

Then we simply set a hover event on all anchor tag contained within all list items. Within the hover event we make two calls of the animate() function: one to close the lastBlock, and another to expand the block we are hovering. Then we set lastBlock equal to the block we just expanded. That way jQuery will know which one to close the next time the hover event is fired. The animate() function allows you to create custom animations by setting new values for multiple properties. In this case we are only animating the width.

One important thing to note is setting “queue” to false. If it is set to true, every hover event is stored and will be animated one after another, resulting in opening and closing long after the last hover happens.


<script type="text/javascript" >
$(document).ready(function(){
    lastBlock = $("#a1");
    maxWidth = 210;
    minWidth = 75;	

    $("ul li a").hover(
      function(){
        $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
	$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
	lastBlock = this;
      }
    );
});
</script>

For more info on the animate() function and other jQuery goodness, check out the official documentation.

Blogged with the Flock Browser

10 Excellent CSS Tips and Tutorials

CSS is a technology that web designers use everyday, but yet it is something that most struggle with as well. Whether it’s keeping stylesheets for large sites manageable, or creating image effects that are cross browser compatible, there are plenty of things to cause frustration. This article is an attempt to provide you with a few resources that might help you with your CSS woes or introduce you to a few tricks you didn’t know about.

Organization

Write a well structured CSS file without becoming crazy

A detailed and well written post about how to write a well structured CSS file.

Organizing Your Stylesheet Using CSS Edit

Rob Soule of Viget Labs shows you how to organize your style sheets using CSS Edit, a powerful CSS editor built exclusively for the mac.

Tips for organizing your CSS

A set of practical tips for organizing your style sheets.

Tabs and Buttons

Expandable CSS Tabs Tutorial

A tutorial on creating expandable CSS tabs.

Simple Round CSS Buttons

Learn how to create rounded corner buttons with only One Image and One CSS file.

Scalable CSS Buttons Using PNG and Background Colors

Beautiful CSS buttons with icon set

Learn how to create a clean set of buttons with CSS and an icon set.

Working with Images

CSS Decorative Gallery

Decorate your images and photo galleries without editing the source images.

Placing text over image using CSS position property

A simple technique for placing text over an image.

Create Resizing Thumbnails Using Overflow Property

Learn how to create a cool resizing thumbnail effect.

Blogged with the Flock Browser

Monday, August 24, 2009

16 Great Photoshop Light Effect Tutorials

I’ve selected various Photoshop tutorials that I’m liking at the moment for light effects, some have quite cool techniques on how to achieve the end result that can be applied to a million different designs (try and experiment with them), check them out below.

Design a Vista Styled Wallpaper

Windows Vista Aurora Effect

Design a Vibrant Blackberry Inspired Ad

NoPattern “Jumper” Effect

Mysterious Lighting Effect

How to Create Brilliant Light Streaks

Creating a Mac-Type Background

Luminescent Lines

Create a Glowing Light Painting Effect

Abstract Dust And Spray Effect

Make a dreamy abstract background

Digital Bokeh effect

Abstract Lines Background

Abstract Light Rays

Drawing an Abstract Lightbulb

How to create 3D abstract circles

Comments

Blogged with the Flock Browser

9 Free Apps That Makes Easy To Store And Share Your Files

Free file hosting is not a problem now a days but to find a good and high speed website that can help you to send or receive your large files in an easier way is really hard. We also know that people have a love and hate relationship with free file hosting sites. Some file hosting sites are really handy and make sharing data even simpler than sending a file via email while other services spam you with countless pop ups and forced membership options to simply download a file. But we don’t want you to worried at all. We have compiled a list of 9 Free Apps That Makes Easy To Store And Share Your Files.

You are welcome to share if you know more free file hosting services that have capability to store and share your files and our readers/viewers may like. Do you want to be the first one to know the latest happenings at SmashingApps.com just subscribe to our rss feed.

SkyDrive

Windows Live SkyDrive works well on any Windows or Macintosh computer with Firefox 1.5 or higher, or Internet Explorer 6 or higher. 5 GB of free online storage, available from any computer with Internet access. You can create personal, shared, and public folders and you can decide who has access to each folder.

DivShare

It’s really easy to upload all your photo, documents, videos and music to DivShare. You can create slideshows, audio playlists, flash videos and online document viewers that you can embed anywhere.

OpenDrive

OpenDrive is a remote drive for your computer, that allows you to store, share or back up files from your computer on the Internet. You can store anything and share it with anyone, right from your desktop.

Wuala

Wuala is a free social online storage which allows its users to securely store, backup, and access files from anywhere and to share files easily with friends, groups, and the world. Tens of thousands of users and thousands of communities around the world are already actively sharing millions of files, growing quickly.

Sky Store & Share

Store & Share is a secure, online storage facility. This fantastic product is open to everyone - you don’t need to be a Sky customer. You can access from any computer with an internet connection and can share with friends and family.

Yuntaa

With Yuntaa, You can manage all your files online, just like you would on your desktop! They automatically recognise all your file types and categorize them for you. Files, Photos, Videos, Audios, access them all with a single click.

ADrive

ADrive offers complete and secure solutions to store, backup, share, access, and edit files from virtually anywhere, at any time. ADrive serves as an online, centralized vault for all important file types including: music, videos, photos, documents, and more.

zSHARE

With zSHARE you can upload files, images, videos, audio and flash for free. Simply use the upload form below and start sharing. You can also use zSHARE as your personal file storage to backup your data and protect your files.

Orbitfiles

At Orbitfiles, there is plenty of space to store videos, photos or any other type of file safely & easily. This will also help you to send large files to your friends fast & securely, never email them again.

Blogged with the Flock Browser

50 Top Sites you can Download Free Fonts

Fonts,fonts,fonts.are you looking for some cool fonts? There are lots of good sites where you can download fonts. Talking about fonts Here is a list of 50 Sites you can Download Free Fonts. These are the most recommended sites for downloading some cool fonts for your computer.