Rainbow Walk

Photo gallery websites for inspiration

admin — Mon, 08 Aug 2011 10:22:32 +0000

Sometimes or maybe most of the time, we are looking for something can inspire you, but when you walk the same road everyday, meet the same the people and do the same things you have done million times. Where do you find something really inspiring. Travelling is always a way to get inspiration. But when you don’t have the budget.
No budget no problem I always go to the new places and discover the secrete corner in the city I live, thanks god I live in London!

When the weather is not good. which happens a lot here. Staying at home, make nice food that you never border to do during the week. Choose my precious tea that I hide in the cupboard. Then turn on my computer. I almost Google everything and half of the time I’m on-line like most of the “young people”. I always spend time browsing those website to get some inspiration.

The Design Inspiration My friends website. Provide all sorts of design ideas and resource such as creative pictures, logo, business card, website, fonts, illustrations and etc. Great work, tony and ray.

Photography Served – Gallery for commercial photography, product photography and portraiture.

Flickr – It’s become my daily routine now.

Deviantart – community of artists and those devoted to art. Digital art, skin art, themes, wallpaper art, traditional art, photography, poetry / prose. Art prints. Lots of free resouce avialble on the site as well. e.g. background, photoshop brush, vector file, icon, photoshop action and etc.

favim.com, image gallery of the most awesome and the prettiest pictures on the Web to be the storehouse for your inspiration. You can search them by color tag. You can also edit images on the website.

We heart it – we heart it – get inspired by what people love, and show them what inspires you.

Greatest Illustrator artworks I love Part One

admin — Thu, 04 Aug 2011 15:24:52 +0000

Yukio Miyamoto – Masters of Adobe Illustrator

Yukio Miyamoto has been using and abusing Adobe Illustrator since the biginning of time (well, since the late ’80s at least.). Professional Artist Yukio Miyamoto’s artwork is showcased and sample throughout the book.Yukio’s artwork has appeared in a number of books, from design books. Yukio has trained thousands of people in all areas of graphics for the Mac and win.

His illustrator works for instrument and object are amazing. The result looks like photo effect which is hard to believe is made by vector illustration.

His mucha are also sooo beautiful. If he could make a Tarot card, I will definitely collect it.

Image source from google image search

Max Kostenko

A very talent illustrator lives in Moscow, Russia. He creates a lots of stunning cartoon characters which you can’t forget after seeing them.

Image source for www.behance.net

Sveta Dorosheva

Her beautiful fairy-tale and Calligraphy illustration just stole my heart.

Image source for www.behance.net

Andreas Krapf

a super talent illustrator from German.

His works always shows a very interesting stories. He tweet’s some fairy tale story into his version which gives them a new life. Very creative !!!

Image source for www.behance.net

COLOURlovers

admin — Thu, 07 Jul 2011 11:44:26 +0000

To be brave to put some colours that you will never think to put them together. But you know what they will surprise you. Think hard in your head is not gonna work, you need to get a tool.

Photocopa – to create a color palette from the picture you like.

Not bad! It’s just a small part of COLORlovers.com

Create a color palette yourself,

then you can create patten by using these palette.

If you can’t find the pattern you like, you can create your own pattern.

Hand-picked best free wordpress theme

admin — Mon, 16 May 2011 09:34:27 +0000

Sight

Sight is a professional WordPress theme which was made in a modern minimalistic style and best suits for Blogs & Magazines. Layout is made using Golden Grid and it gives you a choice of information publishing – grid view or standard blog view.
Extra ability of showing most important information content via big image slider on the top of the page allows you to improve your web-site’s presence and attract new visitors. It is important to be noticed that Sight is already Search Engine Optimized, so you don’t need to care about, just start and get love from Google.

Theme info:

Current Version: 1.0.1
Release date: 11/25/2010
Theme Type: Blog, Magazine
Requirements: WordPress 3.0+

Features
jQuery Powered Featured Post Carousel
A custom homepage featured slider to showcase particular posts, all powered by jQuery.

Pagination types
Choose your personal pagination type from a standard (Prev – Next) or a trendy Twitter-style “Load More” powered by jQuery.

post view types
Your blog navigation is now much easier with 2 types of post views. It’s powered by jQuery and user’s cookies will remember the choice at any time, so your visitor will always see the chosen type.

Custom Widgets
Custom Widgets add flexibility to a flexible as it is template.

Custom Menu Locations
For your convenience we prepared two locations for the Menu which you can check out and choose at standard WordPress function.

Theme Options Page
Options Panel will make your work with template even easier.

Google Analytics Ready
You don’t have to be lost in code now! Just paste a ‘google analytics’ code with one click.

Logo Customization Options
Easy Logo Upload allows you to adjust a template for your unique site.

Search Engine Optimized
We love Google, so we made our best to make Google loves yours.

Built in support for Social Bookmaking
Built-in social bookmarking buttons allow users to share links to your site in a single click.

Threaded Comments Support
Now all discussions are carried out quick and easy.

View Demo download

Premium News

The Original Premium News Theme, was the very first premium theme that woothemes ever released. This theme may be a bit rough around the edges (in terms of its looks), but they’ve used the same solid base for all our subsequent themes.

Theme Info:
Release date: 2nd November, 2007
Designer: Adii
Theme Type: Free, Magazine / News
Requirements: WP 3.0+, PHP 5

Features:

These are some of the more unique features that you will find within the theme.
Featured Posts panel on the homepage using jQuery technology to display / hide the posts;
The layout supports all three of the most popular web ad sizes i.e. 468×60, 300×250 and 125×125;
Animated horizontal drop-down menu’s for category navigation.
7 colour styles to choose from

View Demo download

Inuit Types:

This is a rare gem – a simply stunning theme that’s half blog, half magazine site.

Features:
* Custom translations of all blog areas
* SEO like nowhere else – seriously – try it and you’ll see
* Big Fat ‘About my Blog’ Area
* Simple Pagination
* Header / Footer Scripts Management
* Fully Widgetized Sidebar
* Left or Right-Hand Sidebar by your choice
* Featured Entries
* One or Two column entries on front-page
* WP 2.7 full comaptibility

View Demo download

Over Stand

A fabulous magazine-style layout, Overstand is free from clutter and highlights content beautifully using a combination of white space, large slugs, neat headlines and thumbnail images.

Orange and grey are the predominant colours and the layout ranges across three columns.
The theme takes a little bit of extra work in set-up but the results can be worthwhile.

View Demodownload

AutoFocus

A unique wordpresstheme. AutoFocus is a beautiful free WordPress theme built specifically for photographers looking for a simple way to showcase their work online.

The theme features a unique homepage layout with autosized images and large full-width images on the individual article pages. An optional single-column version of the homepage is also available.

AutoFocus makes great use of typography considering its photo-centric focus. Also, mousing over any of the images on the homepage or the category pages reveals an excerpt of the post content, which is an attractive touch.

Perhaps best of all, no custom fields are needed. Images are uploaded using the Media Uploader, and resizing is handled automatically. The theme grabs the images directly from the article, making this a great theme for a less experienced user.
View Demo download

DePo Square

DePo Square is a beautiful, simple WordPress theme that provides Tumblr-like capacity to post photos and videos in the stream of your posts.

Designed by well-known web identity Derek Powazek, DePo Square is a minimalist-looking theme with elegant typography and effective functionality.

To use the theme ala Tumblr, you simply map your categories so as to allow you to use five pre-defined post types — Post (default), Status, Quote, Link, or Photo — and your content will be displayed in a format special to those types.

Just select your category mappings by visiting the “Current Theme Options” under “Appearance.” No CSS or other formatting is necessary.

The theme also has a neat widget space in the top header, allowing site owners to mix navigation with updates from Twitter and Flickr.
View Demo download

Imbalance

Imbalance is an excellent choice for any online magazine, blog or portfolio websites. This free wordpress theme designed with a contemporary modern vibe in a minimalistic style. By the use of Imbalance theme, you can easily fresh-up your project whether it is a blog or i-magazine. In consideration of additional features and flexible layout it is a very user-friendly theme that can attract new visitors to your web-site.

Theme info
Current Version: 1.19
Release date: 08/08/2010
Theme Type: Blog, Portfolio
Requirements: WordPress 3.0+

Features

Custom Homepage
Unique homepage design allows you to use the template for different goals whether it is a professional Portfolio or a personal Blog.

Clean typography
Less noise makes your site easier to read.

Powerful jQuery-powered header
Special drop-down Menu adds some originality and convenience to your template.

Theme Options Page
Options Panel will make your work with template even easier.

Search Engine Optimized
We love Google, so we made our best to make Google loves yours.

Logo Customization Options
Easy Logo Upload allows you to adjust a template for your unique site.

View Demo download

Urban Free WordPress Theme

Urban is a free WordPress theme from Paul Bennett, based around the idea of having posts displayed in a timeline. It features a scrolling timeline, inline loading of posts, pages, images and Youtube videos, realtime search that displays results as you type, tracking of your recently viewed pages, and other footer modules including twitter updates and last.fm recently played tracks.

Please read some usage instructions when you install this theme.

View Demo download

Realtex

Realtex is a free news WordPress theme with featured content option and options page. Supports post thumbnails. Suitable for any niche, especially for news or magazine sites.

Features
Options Page
Post Thumbnails
Featured Content
125×125 banners ready (easy editable from admin options)
468×60 Header Banner ready (easy editable from admin options)
Three columns
Gravatar on Comments
Compatible with latest WordPress versions
Widgets Ready
SEO Optimized
Fixed width
Logo .PSD file and font files are included in theme folder.
Tested and compatible with all major browsers: IE, FF, Safari

View Demo download

GIMP

admin — Mon, 09 Aug 2010 13:47:25 +0000

GIMP is an acronym for GNU Image Manipulation Program. It is a freely distributed program for such tasks as photo retouching, image composition and image authoring.

It has many capabilities. It can be used as a simple paint program, an expert quality photo retouching program, an online batch processing system, a mass production image renderer, an image format converter, etc.

GIMP is expandable and extensible. It is designed to be augmented with plug-ins and extensions to do just about anything. The advanced scripting interface allows everything from the simplest task to the most complex image manipulation procedures to be easily scripted.

GIMP is written and developed under X11 on UNIX platforms. But basically the same code also runs on MS Windows and Mac OS X.

Find more about GIMP, click there.

Download from download page.

Some Popular Jquery Script

admin — Mon, 09 Aug 2010 00:10:20 +0000

1. Greyscale Hover Effect w/ CSS & jQuery

A great effect for displaying portfolio gallery from Soh Tanaka. This technique works even under IE6. This solution relies on CSS Sprites and a few lines of jQuery, but requires a bit of preparation before it can be implemented. It is not recommended for large scale projects and probably best for displaying portfolio pieces.

First set up an unordered list which we will use as our foundation for the list
of gallery images.

HTML

1
2
3
4
5

<ul class="gallery">
<li> <a class="thumb" href="#"><span><img src="image.gif" alt="" /></span></a>
<h2><a href="#">Image Name</a></h2>
</li>
</ul>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

ul.gallery {
width: 708px; /*--Adjust width according to your scenario--*/
list-style: none;
margin: 0; padding: 0;
}
ul.gallery li {
float: left;
margin: 10px; padding: 0;
text-align: center;
border: 1px solid #ccc;
-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
display: inline; /*--Gimp Fix aka IE6 Fix - Fixes double margin bug--*/
}
ul.gallery li a.thumb {
width: 204px; /*--Width of image--*/
height: 182px; /*--Height of image--*/
padding: 5px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
ul.gallery li span { /*--Used to crop image--*/
width: 204px;
height: 182px;
overflow: hidden;
display: block;
}
ul.gallery li a.thumb:hover {
background: #333; /*--Hover effect for browser with js turned off--*/
}
ul.gallery li h2 {
font-size: 1em;
font-weight: normal;
text-transform: uppercase;
margin: 0; padding: 10px;
background: #f0f0f0;
border-top: 1px solid #fff; /*--Subtle bevel effect--*/
}
ul.gallery li a {text-decoration: none; color: #777; display: block;}

jQuery

Initial Step – Call the jQuery file
You can choose to download the file from the jQuery site, or you can use this one hosted on Google.
The logic here will be to fade out the default thumbnail, and set a background image on the tag. Using CSS Sprites, we will position the image to the ‘bottom’ so the greyscaled thumbnail can seep through on hover over.

The following script contains comments explaining which jQuery actions are being performed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(document).ready(function() {

$("ul.gallery li").hover(function() { //On hover...

var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'

//Set a background image(thumbOver) on the tag - Set position to bottom
$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});a>

<a> //Animate the image to 0 opacity (fade it out)
$(this).find("span").stop().fadeTo('normal', 0 , function() {
$(this).hide() //Hide the image after fade
});
} , function() { //on hover out...
//Fade the image to full opacity
$(this).find("span").stop().fadeTo('normal', 1).show();
});a>
});

View Demo

2. Zoomimage – jQuery plugin

Zoomimage presents images in stylish way. The links are unobtrusively highjacked to open the images in an inpage popup with drop shadow and border.

Preloads images
the images can by grouped in galleries,
Scales the image to fit the viewport
Keyboard gallery navigation

Attach the Javascript and CSS files to your document. Edit CSS file and fix the paths to images and change colors to fit your site theme. Important: be sure to include Javascript files in the specific order as in the example below.
jQuery

1 2	<script src="js/eye.js" type="text/javascript">script> <script src="js/utils.js" type="text/javascript">script> <script src="js/zoomimage.js" type="text/javascript">script>

All you have to do is to select the elements in a jQuery way and call the plugin.

1	$('a.myLinks').zoomimage(options);

View Demo

jQuery Masonry

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

View Demo

Some CSS Tricks

admin — Fri, 05 Feb 2010 14:56:36 +0000

Some small and common css trick to remember, by the way I gave up on IE6 now, so don’t really care whether the style it will work on IE6 or not.

1. Fixed on the left, and scrolling on the right

The inspriation is from http://www.nuyustore.com/ . I like the way nüyu display the content. this is very simple to do by using CSS.

CSS:

1
2
3
4
5
6
7
8
9
10
11

#col1 {
float:left;
margin-right:30px;
position:fixed;
width:260px;
}
#col2 {
float:left;
margin-left:300px;
width:650px;
}

HTML:

<div class="col1">fix position content, for example navigation menu</div> <div class="col2">scrolling content, for example main content</div>

See some examples of the fix navigation

2. footer always at the bottom of the page

This is an very classic problem for lots for front end developer. My method is based on Matthew James Taylor’s post.

CSS:

1
2
3
4
5
6
7

#wrap{ min-height:100%； position:relative, background-color:#fff; width:1000px; margin:0 auto;}
#header{ width:948px; padding:0 26px;}
#main{ width:948px; padding:47px 26px 165px 26px; overflow:auto;}
#footer{ position:absolute; bottom:0; height:165px; background-color:#666； width:100%; padding-top:35px; }

/*If IE 7 & IE6*/
#main {height:100%;}

HTML:
<div id="wrap"> <div id="header">...</div> <div id="main">....</div> <div id="footer">...</div> </div>

3.Min height/Width & Max Height/Width for IE7

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#{

max-height:400px; /*for Firefox and other broswers*/
width: expression(this.height>; 200 ? "200px": true); /*for IE only*/

}

#div{

min-height:600px; /*min height work for all browsers */
height: auto !important;
height: 600px;

}

4.reset CSS style

1 2	html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

5. To show the hr with image background use

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

div.smldivider

{

clear:both;
width:100%;
background-image:url(../Images/dotted-line.jpg);
background-position:left center;
background-repeat:repeat-x;
height:5px;
border:solid 0px #f2f2f2;

}

div.smldivider hr

{

display:none;

}

[/css]

>HTML:>

[ccie_html]<;div>;<;hr/>;<;/div>;[/ccie_html]

6. locate the elment in middle horizontally

>CSS:>

[cc lang="css"]
#sec_nav
{

width:950px; /* the width must be defined */
margin:0 auto; /*auto can make the sec_nav location in the middle or in the middle of some container */
text-align:center;
height:25px;

}

7.Conditional Comments for different version of IE browsers

[if IE 6]> <link rel=”stylesheet” type=”text.css” href=”ie6.css”> [endif]-->

8.p: before and p: after and the property of content , for example:

1 2	p:before, p:after { content: “” ”; color: gray; }

1	{ content: url(para.gif) }

This is a quote.

Result: “ This is a quote. ”

9. Get ride of the link border

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

a:link{ outline-style:none}
[/cs]
But keep in mind the outline may be very important for user who use the keyboard to browser the website.

>10.IE White space bug>

There is a white space under the images in IE

Solution: add <;div>; wrap the link and image <;img src=”images/test.jpg” alt=”test image”>;<;/div>;

>11. Some CSS selectors>

[attribute^=string] - This looks for the string at the Beginning of the Attribute.
[attribute$=string] - Looks for the string at the End of the Attribute.
[attribute*=string] - Looks for the string Anywhere in the Attribute.

>12. CSS hack for Safari only
>[cc lang="css"]

/* To target a safari browser issue */

@media screen and (-webkit-min-device-pixel-ratio:0){

Element{
}
}

13. Bicubic Image Scaling

You’ll love this one. Does the bad image scaling in IE bothering you? If you compared other browsers and IE, IE’s rescaled image doesn’t look as good as other.

Adde this in the css : img { -ms-interpolation-mode: bicubic; } to make the image look smooth in IE

…More to come

Voucher and Coupon Websites

admin — Fri, 05 Feb 2010 12:11:08 +0000

This is very important. Before you buy any thing online, there are some websites you should checkout first. They may be able to provide you some discount or free delivery.

http://www.myvouchercodes.co.uk/

http://www.retailmenot.com/

http://www.hotukdeals.com/

http://www.feedmedeals.co.uk/

http://www.techhead.co.uk/hot-deals

http://www.discountshoppinguk.co.uk/

http://www.groupon.co.uk/

As I live in the UK at the moment, so I am not sure about the best website for voucher and coupon in the other country.

Feminine and Cute Design Website

admin — Thu, 04 Feb 2010 17:42:43 +0000

Pretty and cute is definitely my cup of tea. I love butterfly, flourish background, cute icon and illustration thing. In this post, you will be able to see some very beauty and extremely cute website design. Hope they can bring some inspiration to your life.

Feminine

RedVelvetart online Shop that sells hand craft staff.

Darling Tree Personal Website for Joanna klima

Freepeople online fashion boutique

Susannah Conway Personal website of Susannah Conway

Rainbow Walk

Photo gallery websites for inspiration

Greatest Illustrator artworks I love Part One

Yukio Miyamoto – Masters of Adobe Illustrator

Max Kostenko

Sveta Dorosheva

Andreas Krapf

COLOURlovers

Hand-picked best free wordpress theme

Sight

Premium News

Inuit Types:

Over Stand

AutoFocus

DePo Square

Imbalance

Urban Free WordPress Theme

Realtex

GIMP

Some Popular Jquery Script

1. Greyscale Hover Effect w/ CSS & jQuery

2. Zoomimage – jQuery plugin

Some CSS Tricks

Voucher and Coupon Websites

Feminine and Cute Design Website

Popular Tutorial Blog