Supersized is a jQuery plugin that automatically resizes (background) images to the size of the browser while maintaining image dimension ratio and runs them as a slideshow. There is no extra whitespace, no scrollbars - the entire browser window is always filled. It is lightweight and plays nice with Firefox, Safari, Opera, IE7, and IE6. Requirements: jQuery Framework Accessible News Slider is a JavaScript plugin built for the jQuery library. The plugin does not use color as a primary indicator of a change in state for the slider. Instead, the “back” and “next” navigation is either visible or hidden. There is also an indicator that communicates the total number of news items. If the user chooses to resize the text via the browser file menu, the slider will flex vertically to accommodate the larger text, and still function. Although the core functionality of the news slider is partially accessible with a keyboard, the “View All” link was added as a catch-all mechanism. Hitting the “Enter” key while focused on the hidden “Skip to News” anchor will mimic the same behavior, since it is assumed the user is tabbing through content. The JavaScript is only 2 KB packed. The CSS, XHTML and JavaScript were developed specifically to meet the WCAG 1.0, and this will always be the number one priority of the plugin. The ZIP download contains all of the necessary files, including a packed version of jQuery v.1.2.6. Requirements: jQuery Framework Agile Carousel is a jQuery plugin that allows you to easily create a custom carousel. Call jQuery UI to enable many different additional transition types and easing methods. It uses PHP to draw images from the folder you specify. You can also configure Agile Carousel with many different options including controls, slide timer length, easing type, transition type (e.g. blind, drop, pulsate, shake, slide and etc…) and more. The script is currently in beta version, security & feature enhancements are on the way. Requirements: jQuery Framework This dynamic JavaScript slideshow is feature packed and under 5KB. You can find the new features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status. The init function takes 5 parameters (id of the slideshow content placeholder, the id of the image placeholder, the id of the previous image placeholder, the id of the next image placeholder, the id of the image link placeholder). This script has been tested in Firefox, Internet Explorer, Opera, Safari and Chrome. This script is available for any personal or commercial projects under the creative commons license and is offered as-is, no free support provided. Requirements: Javascript Enabled The s3Slider jQuery plugin is made by example of JonDesign’s smooth slideshow script. The author needed something like that for jQuery. Since he didnt find it after a small research, he decided to build it by himself. This script is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones. This plugin has been tested and is known to work in Firefox, Opera, Safari, Internet Explorer and Google Chrome. Requirements: jQuery Framework Devthought has created an elegant, lightweight slideshow script called BarackSlideshow. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists. Devthought came up with a new class that receives the images and loading spinner as parameters as well. The CSS plays a major role. You should analyze it carefully before implementing it in your applications or websites. You’ll probably need to adjust the ids, or use classes instead to keep your stylesheets clean. Requirements: Mootools Framework This is an automated news slider using the new AS3 XML features. The main propose of this news slider is show news on the front page, with a title, an image, some descriptive text, and a link to the full article. It loads 4 articles and changes from one article to another automatically in a lapsus of time, and the user could stop, rewind or forward whenever he wants. The data source uses XML, so it could be adapted to any programming language that could generate XML data. Requirements: - noobSlide is a mootools based slide show gallery. You can see 7 different styles of images galleries / slide shows. I think they are working smoothly and looking nice. However, I particular like example 6 and 7. If your web application / website is already using mootools, noobSlide is definitely a good choice to power your image gallery. noobSlide is licensed under MIT License. Requirements: Mootools Framework Couloir Slideshow is a demonstration of Flash-like behavior implemented solely in Javascript, HTML, and CSS. It is a very good resources for creating a gallery with resizing and fading effects. You are permitted to use it on your own project so long as you do so according to the rules outlined in the Creative Commons ‘Attribution-ShareAlike 2.0′ License and the license terms contained in the associated, third-party APIs. Requirements: Any Modern Browsers with Javascript Enabled SmoothGallery is a javascript gallery and slideshow system using MooTools. It allows you to have simple and cross-fading image galleries, timed slideshows and showcases.Unlike Lightbox 2, you can define the time of switching pictures automatically.And also, you can jump to a specific picture from the pictures menu and do not need to flick through all pictures in between. Requirements: Firefox, Opera, Safari, Internet Explorer 6.0+
Supersized - Full Screen Slideshow jQuery Plugin
Demo: http://buildinternet.com/live/supersized/
License: License Free
Accessible News Slider Plugin Built for jQuery
Demo: http://www.reindel.com/accessible_news_slider/
License: License Free
Create Custom Carousel with Agile Carousel jQuery Plugin
Demo: http://code.google.com/p/agile-carousel/
License: New BSD License
Free Dynamic Javascript Slideshow Under 5KB
Demo: http://sandbox.leigeber.com/javascript-slideshow/
License: Creative Commons License
Build Your Own Slideshow with s3Slider jQuery Plugin
Demo: http://www.serie3.info/s3slider/demonstration.html
License: Creative Commons 2.5 License
Elegant and Lightweight Slideshow Script
Demo: http://devthought.com/wp-content/moogets/BarackSlideshow/demo.html
License: MIT License
Automated News Slider using AS3 XML Feature
Demo: http://works.faustocarrera.com.ar/news_slider/
License: License Free
noobSlide - Mootools Slide Show Image Galleries
Demo: http://efectorelativo.net/laboratory/noobSlide/sample.html
License: MIT License
Couloir.org Resizing and Fading Slideshow Gallery
Demo: http://www.couloir.org/js_slideshow
License: Creative Commons License
JonDesign’s SmoothGallery for Slideshows
Demo: http://smoothgallery.jondesign.net/showcase/gallery
License: GPL License
Read more...
Friday, May 1, 2009
10 Great Designer Slideshow
Thursday, April 30, 2009
Principles of Good Design for Websites
One of my absolute favorite design books is, Robin Williams Design Workshop. It looks into practical design theories and showcases awesome examples. One of the areas of focus that I’ve taken into all my designs are the four major design principles. They include: contrast, repetition, alignment, and proximity.
This post will discuss those four principles as they relate to web design. By keeping these design theories fresh in your mind, you will be sure to design cleaner, more aesthetically pleasing sites.
1. Contrast
Great contrast can leave a very good first impression on a user. Without a focal point, the viewer is generally lost in a sea of equally-sized elements and typography. It’s the designer’s job to create visual elements of significance that guide the user’s experience. You can achieve great contrast on your site by choosing your images, colors and fonts wisely.
Contrast With Images
It’s often very effective to showcase a large illustration next to smaller elements. Here’s what I mean:
The Invoice Machine
This site utilizes a large image to bring in the reader’s attention. Also the monochromatic nature of the site allows the limited use of blue to play a bigger role.
Instabox
Do the eye test on this site. What do you notice first? More than likely it’s the star on the box. Just like The Invoice Machine, they’ve created a focal point using a large image and limited color.
Contrast With Colors
Sprinkling in color at just the right amount is another way to create effective contrast within a website. It can be created using a different color in headers and text copy, as well as within the colors of an image or illustration.
Fatburgr
This site is a fantastic example of almost all of the design principles. For color contrast take a look at the large yellow header versus the smaller light gray copy. Alignment, image contrast, repetition and proximity are all strong throughout.
I Love Typography
Is it any surprise that a website built to showcase typography would give us a great example right in its own header? I love their font choice and how the green color plays nicely off the darker gray.
Contrast With Fonts
If you are trying to create contrast with fonts you should avoid using two very similar font faces and sizes. The similarity of the fonts tends to create confusion and blur the design. However, it can be very effective if you make the font sizes very different, or mix the lightest version of the font in combination with the boldest. Also, you’ll be surprised at the visually impressive combos you can create by using two very different fonts in tandem. For instance a san serif font with a hand-written font.
Fixie Consulting
Wow! I love the typography and colors on this site. Check out all the size and stroke variations on their slogan. I also love the grunge that is sprinkled in, and the limited use of blue.
2. Repetition
Repetition in print design is much more common than it is in web design, however it can be equally effective. Repeating design elements helps create a consistent look and improves branding. In web design a great way to achieve this is by repeating elements in the header and footer. Check out a couple of examples below.
Ten24 Media
Ten24 Media uses a creative grass illustration in both the header and footer.
Silverback
This site is just awesome! I definitely could have showcased it in the contrast section, but it works just as well here because the theme and branding are clearly used throughout. Check out the use of the bananas as bullets, and the forest illustration at the header and footer.
3. Alignment
Alignment plays an intricate role in taking your site designs from looking amateur to professional. I’ve recently become a huge advocate for designing sites using a grid. Doing so cleans up your designs and gives you an awesome framework to work from. If you’re interested in learning more about designing for a grid, check out my recent post (insert shameless self promotion here), Design A Fresh Blog Theme On The 960 Grid.
Black Estate Vineyard
This site is showcased on the 960 Grid website. It’s alignment is consistent and striking. I love the way the main content is left justified and flush in its column, however some of the larger level headings break the rule and shift into the left sidebar. They also do a good job with generous amounts of white space and contrasting sized fonts.
A List Apart
A List Apart features a visually obvious grid. The columns are well defined and contain everything in very readable chunks. Studies have shown that really wide columns drastically reduce readability. Your eyes will get tired when trying to follow text across wide column widths. A List Apart also features a fantastic article that argues, Good Designers Redesign, Great Designers Realign.
4. Proximity
The last principle is proximity. This has to do with grouping like elements together and separating those that are not. It can really ruin user experience if you group everything into one lump text block. That’s why its very important to use header tags and proper spacing.
Envato
This site does a beautiful job of organizing it’s content into three major categories. They are well spaced and clearly defined.
Paradigm Reborn
This site is well structured. The headers are clear and concise. The spacing is good and the content is separated into logical chunks.
Final Thoughts
It’s unbelievable how much better your designs will become when you take into consideration these four basic principles. There are always more things to consider, but a foundation of contrast, repetition, alignment and proximity will improve your designs dramatically.
Your Turn
Join the discussion. What do you think of these design principles? Are there more that you’d like to share?
If You Like My Post Comment Me,Thanks You And Visit Again
Read more...
10 Awesome Free Serif Fonts
This is the second part of a five part series featuring my favorite free fonts for design. This compilation will focus on ten very useful serif fonts. These fonts are perfect for print copy and large headings. Check them out!
1. Andron Freefont [ Download ]
2. Droid Serif [ Download ]
3. Garogier [ Download ]
4. Gentium Basic [ Download ]
5. Latin Modern Roman [ Download ]
6. Museo [ Download ]
7. Optimus Princeps [ Download ]
8. Sanford [ Download ]
9. Serif Beta [ Download ]
10. Tallys [ Download ]
If You Like My Post Comment Me,Thanks You And Visit Again
Read more...
10 Awesome Free Sans Serif Fonts
I find it so important as a designer to have an awesome library of fonts at your fingertips. Choosing the correct one can make or break a design. The resources are out there to find some great free fonts, but sometimes the search can be a bit overwhelming. I’ve decided to put together a series of posts that feature my 10 favorite fonts in 5 different major categories.
Here Are My Top Ten Free Sans Serif Fonts
1. Aller [ Download ]
2. Aurulent Sans [ Download ]
3. Bitstream Vera Sans [ Download ]
4. Colaborate [ Download ]
5. Fontin [ Download ]
6. Luxi Sans [ Download ]
7. Mayberry Pro [ Download ]
8. Museo Sans [ Download ]
9. Sansation [ Download ]
10. Surface [ Download ]
Final Thoughts
I found all these fonts at my favorite free font site - Font Squirrel. The best part is they are available for commercial use! So what did you think of this list? What are your favorite free sans serif fonts?
If You Like My Post Comment Me,Thanks You And Visit Again
Read more...
Wednesday, April 29, 2009
How to Make a Stylish Glowing Box in Photoshop
In this Adobe Photoshop graphic design tutorial, we are going to create a magical glow effect coming from a box in Photoshop. This is a pretty simple effect that looks great and can easily be adapted for use in other ways.
Final Result
Here is what we’re going to try and achieve. See the large full-scale version by clicking on the image.
Download and set up the stock photo
1 Lets go ahead and get our stock photo. You can download it here. Open it up in Photoshop.
No we want to straighten out the box so click and hold down the Eyedropper Tool in the Tools panel, and then click on the Measure Tool (also known as the Ruler Tool).
2 Now click and drag a line so it follows the bottom edge of the box. Go to Image > Rotate Canvas > Arbitrary. Don’t change the number, click OK. This will straighten out your box.
Now go in and crop the document so there are no white edges showing.
Cleaning up the stock image
3 Since the light source is going to be from the inside, our shadow is going to be different that how it currently is. So, we are going to get rid of the shadow on the cover.
Use the Marquee Tool and select a part of the bright area, then bring that selection into a new layer (Ctrl + J). Bring it over to the left edge and fit it in the corner. (If you use Ctrl + T to transform the layer, then control and move the corners of the box it will skew them to get a better fit.)
4 Add a layer mask by clicking on the Add a layer mask button at the bottom of the Layers panel, and use a soft black brush to mask out the right side of the highlighted area we just duplicated (the middle area of the box).
Play around with it until you get a smooth transition between the two layers and so there aren’t any duplicated areas.
<5 Now link the two layers.
Merge them together, Layer > Merge Layers (Ctrl + E).
6 Now we are going to take another selection, this time grab a selection of the entire width of the brighter area we just made. Bring the new selection into a new layer (Ctrl + J). Then blend the new layer like in step 4.
Use the Clone Stamp Tool (S) by first Alt + clicking on an area you want to clone from, then painting the area that needs to be cloned.
Cutting out the box from our stock image
7 Now we are ready to cut out the box.
Go in and use the Pen Tool to cut out the box and bring it into a new document. Use 1680 x 1050 px for its dimensions. Size it down to around 30%.
Creating the background
8 Let’s work on the background. Pick a dark blue color and fill the background (Ctrl + Del).
9 Grab a lighter version of that color, create a new layer (Ctrl + Shift + N) and create a radial gradient.
10 Transform the gradient (Ctrl + T), bring it under the box then stretch and squeeze it so it fits like so.
Darken the box
11 We are now going to darken the box. Open up the hue/saturation window, Image > Adjustments > Hue/Saturation (Ctrl + U). Change your setting like I have them below.
Open up the Curves window, Image > Adjustments > Curves (Ctrl + M) and change your settings to something like what I have.
Putting in the glow
12 Let’s put the glow in the box now. Using the Elliptical Marquee Tools draw a circle so the side edges of the box touch the inside sides of the box.
13 Select the circle layer by using (Ctrl + Right-click) circle layer and create a new layer (Ctrl + Shift + N). Fill the area with a light blue. Make sure the white circle is the top layer. Click on the white circle layer and transform the circle using Edit > Free Transform (Ctrl + T). Hold down Shift + Alt shrink the circle.
14 Now to give it a glowing look we are going to blur the edges of both the circles. First click on the blue circle layer and then go to Filter > Blur > Gaussian blur. Do the same thing with the white circle.
15 Link the two circles together (click the empty box to the left of the layer, then merge the layers, Layer > Merge Down (Ctrl + E) to merge the two layers.
Now use the Polygonal Lasso Tool to make a box around the bottom part of the circle that isn’t inside the box and delete it.
Creating the outer glow
16 Now we are going to add an outer glow to the circle. Click on the "Add a layer Style" button at the bottom of the Photoshop Layers Panel and select Outer Glow. Adjust the settings like I have them. The color is going to be R: 190 G: 239 B: 255.
17 We are now going to make another radial gradient using white as our color. Put the layer behind the glowing circle and stretch it out so it covers the whole width of the box.
Change the Blending Mode to Overlay. Now duplicate that layer by right-clicking on the layer and selecting Duplicate Layer… in the dialog box (Ctrl + J) to make it brighter.
Adding in the details (floating particles)
<18 Create a new layer (Ctrl + Shift + N).
We are going to create some particles floating off the glow. Click on the Brush Tool (B) and get a brush with 0% hardness, around 20 px. Pull up the brush settings (F5).
19 Create a new layer and start painting on a few particles until you get something you like the following. You can adjust the size of the brush and experiment with its settings to get the desired effect.
20 Now go into your layer styles and change your outer and inner glows to what I have below. Drag that layer just below the circle layer.
Giving the box a drop shadow
21 We are going to give the box a little bit of a shadow. Click on the box layer and duplicate the layer (Ctrl + J). Use Ctrl + Right-click on the new layer to select it, and fill it with black #000000.
Drag it below the box layer.
Go to Filter > Blur> Gaussian Blur and change the setting to 12.4. Click OK. Now bump the shadow down a little bit.
<22 Click on the Elliptical Marquee Tool, change the feather to 100 px and draw a circle around the box.
Make sure that your foreground is black (#000000) and the background is white (#FFFFFF), then go into Filter > Render > Clouds. Change the Blending Mode of the layer to Soft Light and the opacity to 70%.
Finished!
There you have it, a magical glowing box. I’m going to put my logo in and we are finished!
If you do the tutorial, be sure to link to your version in the comments, we’d love to see your rendition!
If You Like My Post Comment Me,Thanks You And Visit Again
Read more...
