News back to homepage

Top HTML & CSS Editing Applications For Mac Designers Top HTML & CSS Editing Applications For Mac Designers

When it comes to web design, every designer tends to have their own favourite coding application. Luckily for Mac users there are plenty of options to choose from, this roundup of HTML and CSS editors pulls together the most popular editing apps with a brief overview of their features.

When it comes to web design, every designer tends to have their own favourite coding application. Luckily for Mac users there are plenty of options to choose from, this roundup of HTML and CSS editors pulls together the most popular editing apps with a brief overview of their features.

Coda ($99)

Coda is the swiss army knife of CSS editing apps, it combines code editing features with FTP, SVN, Terminal and a browser preview to produce a do-it-all app. Coda is one of the most popular choices for Mac based Web Designers and is also my personal preference.

Screenshots

CSSEdit ($24.90)

CSSEdit is an editing app with a primary focus on Cascading Stylesheets. The application includes some super handy features for writing and debugging your CSS such as Live Preview and the X-Ray Inspector but being a lightweight application designed specifically for CSS edits, you will need a collection of supporting apps in your toolbox.

Screenshots

TextMate ($54)

TextMate is a comprehensive code editor with a clean and minimal interface. It includes all the common features you would expect from an editing app and has some unique shortcuts that can really speed up the workflow for power users.

Screenshots

BBEdit ($99)

If you find yourself working with large quantities of files, BBEdit might be the application for you. It includes a range of powerful file browsing and search features that allow you to easily find and make edits to snippets of code buried deep in your website directories.

Screenshots

Espresso ($49.84)

Espresso is the sister app to CSSEdit, also created by the folks from MacRabbit. Where CSSEdit focused on CSS, Espresso has much wider support for general coding tasks and includes a range of handy navigation, snippet and auto-completion features, not to mention the built in preview engine and FTP support.

Screenshots

Dreamweaver ($399)

Dreamweaver includes some powerful and unique features for building websites, particularly its infamous ‘Design view’, but it can also be used purely for coding. If you do only use Dreamweaver for coding, the alternative apps mentioned in this post include pretty much the same important features, but also benefit from faster loading times due to their overall more lightweight build.

Screenshots

HyperEdit ($24)

HyperEdit is a super lightweight coding application that combines the edit pane with a Safari powered preview window which allows for fast and easy page building. With the key features of code highlighting, snippets, live validation and support for HTML, CSS, Javascript and PHP it includes everything you need in a small package.

Screenshots

skEdit ($34.95)

skEdit is another lightweight coding app that can be easily extended with more language support. It makes sense to limit the application down to only the languages you use to avoid bloat. Otherwise the application includes project support, code completion, snippets and live preview, so it’s definitely a good competitor to the more wider known options.

Screenshots

Bonus: Firebug (free!)

Although it’s not a code editor at heart, it’s certainly a must-have application for Web Designers. Firebug allows you to tweak and edit your HTML and CSS on your live websites, which can then be ported back to your original files. This live editing cuts out the hassle of changing and re-uploading your files to really speed up your workflow.

Screenshots



See the rest here:
Top HTML & CSS Editing Apps For Mac Designers
Creating Slick Animated jQuery Menus Creating Slick Animated jQuery Menus

In this tutorial we’ll be building a cool navigation list complete with a sliding hover effect.

In this tutorial we’ll be building a cool navigation list complete with a sliding hover effect. Learn how to build the concept in Photoshop, lay out the basic HTML elements, style everything up in CSS then tie it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design.

The design we’ll be building features a cool label image that slides into place under each navigation item on hover. We’ll build the design to work without jQuery first of all to ensure it’s widely accessible to users without Javascript enabled, then enhance the effect with jQuery for the majority of users.

View the animated menu demo

Build the Photoshop concept

Create a new document and fill the background with a light beige. Add a subtle 1.5% noise texture by going to Filter > Noise > Add Noise.

Use a subtle grunge Photoshop brush to add a little extra texture to the top centre of the canvas. Adjust the opacity to tone down the distressed effect.

Draw and fill a rectangle to create the base of the label graphic. Press CMD+T to transform the shape, then drag a guide to highlight the centre point.

Use the Polygonal Lasso tool to draw a small triangle. Use this triangle to clip out the bottom edges. Flip the selection horizontally and align with the guide to ensure the clipping is symmetrical.

Begin adding a range of Layer Style effects to bring the label to life. Start with a Gradient Overlay to add a range of dark to light red tones.

Add a thin stroke using a dark red colour selection with settings of 2px width and aligned to the inside.

Set up an Inner Glow using a slightly lighter red with 100% opacity, Normal blending mode, 50% Choke and 3px in size.

Add a soft Drop Shadow aligned to 90 degrees to give the impression of depth. Reduce the opacity to around 20% to tone down the effect.

Finish off the label with a distressed texture using the subtle grunge brushes. Load the selection of the label shape, inverse and delete out the excess. Change the blending mode to Lighter Color at 35%.

All the menu needs now is a series of text links. Set the fonts up with Helvetica Bold and choose a fill colour from the label. Simulate the hover effect by switching the fill to beige on the active link.

Make a selection of the label graphic and export the image as a PNG24 file with Alpha transparency.

The demo file uses just three images: A textured background image, the red label graphic and a repeating noise texture.

Create the basic HTML structure

The basic menu system first needs to be laid out as a HTML skeleton. Begin the page with a Doctype, followed by page title and a link to the CSS stylesheet. Write out the menu itself as a good old Unordered List element, with each

  • item containing an anchor.

    Style up the design with CSS

    Next, the CSS brings the design to life. Begin the CSS file with a quick reset to remove any default browser styling, then set up the surrounding page design by adding the repeating noise background texture to the page body. Centre up the

      with margin: auto; and text-align: center; and clear the element using overflow: hidden;. /> Float each
    • item to the left to place each nav item side by side. The rest of the styling can then go directly onto the anchors. Each anchor needs to have the exact dimensions of the label graphic, taking into consideration any padding used to position the text into place. Replicate the font styling from Photoshop using the same bold Helvetica styling, and use the CSS3 text-shadow property to recreate the Photoshop Drop Shadow. Finally, add the label graphic as a background image and set the position to -149px so it is hidden off screen until the mouse hovers the nav item. /> Set up the styling for the :hover effects by moving the background back into position and alter the colour of the font and shadow to ensure they can still be seen when the background colour changes.

      A preview of the HTML file so far will show a fully working menu design, albeit with basic CSS styling where the label immediately appears and disappears without any cool sliding effects. It’s important to first develop this basic fall back so users without Javascript enabled will still see a hover effect.

      Spice up the effect with jQuery

      In order to add some fancy Javascript effects we first need to head back to the HTML file and link up some JS files. We’ll require three files: The jQuery library, a handy plugin allowing background position animation, and finally our own blank scripts.js file where we’ll write our own code.

      The first thing to add to our jQuery code is a simple line to turn off the basic CSS effect. Adding a special ‘.js’ class to the anchor with Javascript allows us to add an extra line of CSS to overwrite the original styling. With this out of the way we can then style the actual sliding hover effect. Add a hover function to the anchors within the menu list. On hover, use .animate() to set the backgroundPosition to 0 0, then back off screen on hover-out. A speed of 200 keeps things nice and swift. One extra snippet to add is a .stop(true,true) to prevent the effect looping if the mouse passes over the menu quickly.

      A preview of the effect in the browser will show the label sliding in and out on hover. We can add one extra line to really spruce up the effect. Adding an extra animation to move the label by just 5px creates a cool little bounce effect. Similar effects can also be achieved using easing plugins, but to save linking up extra files this little trick works nicely.

      The complete HTML, CSS & jQuery code

      HTML

      CSS

      jQuery

      The final animated menu design

      View the animated menu demo



      Read more here:
      How To Create a Cool Animated Menu with jQuery

      Incoming search terms:

      • distressed texture vector
      • grunge noise texture
      • distressed filter photoshop
      • function-brushes-subtle-grunge vector
      • animate fill begin jquery
      • distressed brushes photoshop
      • jquery image hover effects
      • noise brush photoshop
      • slick jquery filter nav
    		•
    How To Create Your Own Custom WordPress Themes – Free Tutorial How To Create Your Own Custom WordPress Themes – Free Tutorial

    Follow this overview of the build process to create your own custom WordPress theme. We’ll be taking my latest theme design from its basic HTML and CSS mockup and inserting the various WordPress template tags to build a fully working theme ready to install on your blog. Long time readers may remember the build process of the LoveGrid concept where we designed and finished off the mockup as a static HTML and CSS page.

    Follow this overview of the build process to create your own custom WordPress theme. We’ll be taking my latest theme design from its basic HTML and CSS mockup and inserting the various WordPress template tags to build a fully working theme ready to install on your blog.

    Long time readers may remember the build process of the LoveGrid concept where we designed and finished off the mockup as a static HTML and CSS page. Now let’s take this design and convert it into a WordPress theme. If you want to get your hands on this theme for your own site, it’s now available to Access All Areas over on my graphic design blog – Blog.SpoonGraphics.

    How WordPress themes work

    WordPress themes are made up of multiple template files that are all contained in a theme folder. When the index.php file is loaded, PHP tags within this file load other template files, such as the header, sidebar and footer to build a complete page. Different template files are loaded depending on which section the viewer is browsing, so page.php is loaded when the user is viewing a page, and single when the user is viewing a blog post. /> Within these template files are template tags, which provide the dynamic functionality of a WordPress blog. Most of these tags are pretty simple and just need inserting in the right place within the HTML code, for instance the tag inserts the title of that particular post wherever the PHP tag appears in the theme.

    The LoveGrid theme is fairly simple and makes use of just the main template tags. It doesn’t have a sidebar, so sidebar.php isn’t used. Likewise, the search function has been left out to maintain a clean interface, so search.php isn’t required either. When building your theme it’s important to list out the types of template files you will need.

    Getting started

    One of the first steps you must remember to take when building your theme is to set up the basic theme information. At the top of your style.css document add and edit the following information:

    You will also want to add some CSS styling to make sure the alignment of images works. These classes are automatically added by the WordPress WYSIWYG editor:

    Finally, don’t forget to modify the screenshot.png image so your theme displays a nice preview in the Appearance section of the WordPress admin area so it can be identified when selecting a theme.

    Header.php Template File

    Open up your index.html mockup file and copy the code that makes up the header area. This should include all the elements that will appear exactly the same on every page of the site. Paste them into a header.php file within your theme folder. The next step is to go through and insert WordPress template tags in place of the basic HTML. The first will probably be , which will insert the relevant wording into your HTML </code> tag for each page of the site. Other tags used in the header template are <code><?php bloginfo('stylesheet_url'); ?></code> to automatically insert a link to the style.css file and <code><?php bloginfo('template_url'); ?></code> to insert a link to the theme directory, which is handy for linking up Javascript files.</p> <p>Just before the closing <code></head></code> tag, the <code><?php wp_head(); ?></code> template tag is used so WordPress can insert any additional code into the head itself, such as meta keywords, description and other plugin specific information.</p> <p>Also included in the header.php file is the header section of the design. Links to the homepage are added using the <code><?php echo get_option('home'); ?></code> template tag. In order to populate the navigation menu, the tag <code><?php wp_list_pages(); ?></code> is used to display all the WordPress pages, with the <code>title_li=</code> parameter clearing out the default title that WordPress would otherwise add.<br<br/> /> Finally, at the end of the navigation list, an extra <code> <li></code> is added to link to the RSS feed using the <code><?php bloginfo('rss2_url'); ?></code> template tag.</p> <h3>Index.php Template File</h3> <p><a href="http://yoursourceisopen.com/wp-content/uploads/2011/02/58077c91index.png"></a></p> <p>Switch back over to your mockup HTML file and copy the next chunk of code from where the header left off, down to the footer (or sidebar if you have one). This content will be placed in the index.php template file. At the top of this file the first tag you’ll need is <code><?php get_header(); ?></code>, this will insert the content of the header.php file above your index.php content when the page is viewed in a browser. Next, the WordPress loop checks for content. Within the loop you lay out the HTML for one post, then this is repeated for every post WordPress displays. Continue replacing HTML content with a WordPress template tag, so <code><?php the_permalink(); ?></code> goes wherever there’s a link to the post, <code><?php the_title(); ?></code> goes wherever the post title is displayed and <code><?php the_content(''); ?></code> tells WordPress where to insert the actual post content.</p> <p>Underneath the list of posts we can set up the pagination options. Simply insert the <code><?php next_posts_link('Older posts'); ?></code> and <code><?php previous_posts_link('Newer posts'); ?></code> tags wherever you want these links to appear. Below this we can set up a simple error if no posts were found below the PHP <code>else</code> statement.</p> <p>At the bottom of the document the footer.php file is called using the <code> <php get_footer(); ?></code> template tag. This will render a complete page in the browser by combining the header.php, index.php and footer.php files.</p> <h3>Archive.php Template File</h3> <p><a href="http://yoursourceisopen.com/wp-content/uploads/2011/02/2112a028archive.png"></a></p> <p>The index.php file is used when viewing the homepage of the blog (unless a page is set as the homepage instead). When the user views a category list or any collection of posts, whether it’s by date, tag or author the archive.php file is used instead. The archive.php file is almost identical to the index, with the addition of a few extra titles to identify what posts the user is browsing.</p> <p>Conditional tags are used to detemine which snippet of content to display, so <code><?php if (is_category()) { ?></code> checks if it’s a category view. If so, a title is displayed that indicates which category it is, using the <code><?php single_cat_title(); ?></code> template tag to print the name of that particular category. Similarly, checks can be made on the date and the relevant month and year can be added to the page. If your site makes use of tags and authors, even more titles can be added using a series of other conditional tags. See the WordPress Codex page on <a href="http://codex.wordpress.org/Conditional_Tags">Conditional Tags</a>.</p> <h3>Page.php and 404.php Template Files</h3> <p><a href="http://yoursourceisopen.com/wp-content/uploads/2011/02/c894fccdpage.png"></a></p> <p>There are two types of content on WordPress blogs, posts and pages. Out of the two pages are often the most simple. The page.php file is pretty much a stripped down version of the index or archive templates. It still includes the link to the header file, the WordPress loop and the tags to generate the page title, but on a page we don’t need a date, read more link, or meta information.</p> <p><a href="http://yoursourceisopen.com/wp-content/uploads/2011/02/e0088912404.png"></a></p> <p>Another template file that acts similar to a page is 404.php. This file allows you to customise an error page just in case a 404 File Not Found error appears on your blog. This file is even more simple that page.php as the content is coded directly without any special WordPress tags.</p> <h3>Single.php and Comments.php Template Files</h3> <p><a href="http://yoursourceisopen.com/wp-content/uploads/2011/02/506c0fc9single.png"></a></p> <p>The single.php file is the template used whenever a blog post is viewed. The first portion of the file is pretty much identical to how the post content is laid out in the other template files, the main difference is blog posts also include comments, so the <code><?php comments_template(); ?></code> template tag is used to call the comments.php file.</p> <p><a href="http://yoursourceisopen.com/wp-content/uploads/2011/02/6e79ea13comments.png"></a></p> <p>Inside the comments.php file there’s a bunch of comment specific tags that enable you to build a thorough comments section. <code><?php comments_number(); ?></code> is a simple tag used to display the number of comments on a post, with parameters allowing you to edit the wording as you please. The comments file has its own mini loop, <code><?php if ( have_comments() ) : ?></code> checks to see if there are any comments on the post, then the whole list of comments is simply inserted using just one tag: <code><?php wp_list_comments(); ?></code>. The comments file has its own set of pagination links, which combined with the WordPress discussion settings allow you to split comments over multiple pages.</p> <h3>Footer.php Template File</h3> <p><a href="http://yoursourceisopen.com/wp-content/uploads/2011/02/8f4115d6footer.png"></a></p> <p>To finish off the theme, all we need to do is fill out the content in the footer.php file. Remember this file has been called from many of the other template files to round off the page with the rest of the HTML required. The file continues where the others left off. In this particular design the footer file begins with a list of categories using the <code><?php wp_list_categories(); ?></code> template tag with a range of parameters clearing out the default post count and title as well as hiding specific categories such as ‘Uncategorized’. Usually this particular template tag would be found in the sidebar, but as with most WordPress tags it doesn’t matter where you place them in your theme.</p> <p>Next up in my footer file is a spot of <code><?php query_posts(); ?></code>. This section isn’t someting usually required in your average theme, but it is used to create a separate list of posts outside the main WordPress loop. In this theme it’s used to display the latest 6 posts.</p> <p>Another tag you wouldn’t usually see in a theme is <code><?php wpp_get_mostpopular(); ?></code>. This particular tag is unique to the <a href="http://wordpress.org/extend/plugins/wordpress-popular-posts/">WordPress Popular Posts plugin</a>, but it shows how additional functionality can be added using plugins and their custom tags. In the public theme this tag is wrapped in a <code><?php if (function_exists); ?></code> statement to ensure it doesn’t break the theme if that particular plugin isn’t installed.</p> <h3>The Final WordPress Theme</h3> <p>So basically the whole process of building a theme involves pasting a bunch of template tags in between your HTML. Many of the most common tags are listed out in this post, but you’ll also want to keep the <a href="http://codex.wordpress.org/Template_Tags">WordPress Codex</a> open in order to refer to the whole library of template tags available. On most occassions there’s a tag out there that will help you achieve the exact function you have in mind.</p> <p>With all the HTML, CSS and PHP template tags in place the theme is now ready for installation and testing.</p> <p><a href="http://chrisspooner.com/themes/lovegrid/"></a></p> <p><a href="http://chrisspooner.com/themes/lovegrid/">View the LoveGrid theme demo</a></p> <p><br/> <br/> See more here:<br/> <a target="_blank" href="http://feedproxy.google.com/~r/Line25/~3/5FzgCdvoVZ4/how-to-create-your-own-custom-wordpress-theme" title="How To Create Your Own Custom WordPress Theme">How To Create Your Own Custom WordPress Theme</a></p> </td> </tr> </table> </div> <div class="item"> <table> <tr> <td class="img"><a href="http://yoursourceisopen.com/7587-how-to-design-custom-youtube-backgrounds"><img src="http://yoursourceisopen.com/wp-content/themes/Gadgetine/scripts/timthumb.php?src=/wp-content/uploads/2011/02/b7a10cc725.jpg&w=160&h=120&zc=1&q=100" alt="How To Design Custom YouTube Backgrounds"/></a></td> <td class="title"> <a href="http://yoursourceisopen.com/7587-how-to-design-custom-youtube-backgrounds">How To Design Custom YouTube Backgrounds</a><p class="caps"> <p></p> <p> Have a YouTube channel? </p> <p></p> <p>Have a YouTube channel? Want to customise it with your own background design? Follow this guide to find out how to create a cool theme for a gaming channel, then download the free template for use in your own projects.</p> <p><span></span></p> <p><a href="http://www.youtube.com/chrisjspooner"></a></p> <p>The design we’ll be creating is a dark military theme for my new gaming channel. Subtle camouflage patterns, grungy background textures and an array of awesome weaponry all combine to form an eye catching background design to entice viewers and subscribers.</p> <p><a href="http://www.youtube.com/chrisjspooner">View the final YouTube background design</a></p> <p></p> <p>Like many social websites, YouTube allows the cusomisation of your personal profile through the uploading of a background image and the modification of the profile’s colour scheme. In order to make sure our design fits well with the YouTube website and its various palettes we need to base it on a template. Here’s a YouTube design template I made earlier, download it and feel free to use it in all your future projects. The template highlights where each palette is located and shows how much of the page is seen by common monitor resultions.</p> <p><a href="http://line25.com/wp-content/uploads/2011/youtube/YouTube-Background-Template.zip">Download the YouTube PSD template</a></p> <p></p> <p>The first step towards our dark gaming channel design is a camo pattern background. Here I’m using my <a href="http://www.blog.spoongraphics.co.uk/freebies/free-camouflage-patterns-for-illustrator-photoshop">free repeating camo patterns</a> I posted on Blog.SpoonGraphics, with a slight colour adjustment.</p> <p></p> <p>Next, draw a large selection around the main YouTube container from the template and fill it with black on a new layer.</p> <p></p> <p>Download a grungy texture like this one from <a href="http://lostandtaken.com/gallery/scratched-7.html">LostandTaken</a> and scale it into position over the black area in the design. Reduce the opacity to tone down the grungy effect.</p> <p></p> <p>Toggle on the template and CMD+click the palettes layer thumbnail to load the selection. Fill these palettes with a black background and reduce the opacity so the texture can be seen through them.</p> <p></p> <p>Create a new layer then right click the selection and choose Stroke. Enter 1px with the color White. Change this layer to Soft Light.</p> <p></p> <p>Use the Eraser tool with a soft brush setting at 50% opacity to grunge up these borders by erasing out random areas.</p> <p></p> <p>Being a military themed gaming channel means we need guns, lots of guns! Scour the stock photo websites for various weaponry. I originally developed this design for an <a href="http://www.blog.spoongraphics.co.uk/tutorials/how-to-create-the-expendables-winged-skull-poster-art">Expendables Movie poster tutorial</a>, check out that post for more details!</p> <p></p> <p>Open up each weapon photo into Photoshop and desaturate, then use the Magic Wand to quickly make a selection of the object.</p> <p></p> <p>Go to Select > Modify > Contract and enter 2px in the settings. This helps clip out any unwanted white area that the Magic Wand might have included in the selection.</p> <p></p> <p>Clip out every weapon image you find and compile the selections in a new document. Aim to find a range of weapons of various sizes, including knives.</p> <p></p> <p>The images won’t be in proportion with each other, so scale and order each weapon according to their actual size.</p> <p></p> <p>Starting with the largest weapon and moving down, rotate and position the guns so they flare out in a kind of wing shape.</p> <p></p> <p>If the tones of some weapons don’t match, quickly adjust the Levels to clip their shadows and highlights.</p> <p></p> <p>The smaller weapons may need duplicating to fill out their area of the wing. Stack these weapons to give the impression of layered feathers.</p> <p></p> <p>Finally arrange the knives until the rotation of elements reaches the 180 degrees mark. Again stack and layer these objects to fill in any gaps.</p> <p></p> <p>When all the weapons have made up a complete wing shape, group them together and paste them into the main YouTube design document.</p> <p></p> <p>Scale and position the wing behind the content panel. Take into consideration the common monitor resolution guides to ensure the weapons will fit within the screen area of most viewers.</p> <p></p> <p>Paint in a blue overlay over the weapons to add a cool colour cast. This blue will also be sampled for use as the link colour to tie the design together.</p> <p></p> <p>Duplicate the group of wings, right click and selection flip horizontally, then position the duplicate in the same place on the opposite side.</p> <p></p> <p>Toggle on the design template to double check the scale of the design and its elements. This design will fit into 1440px resolutions, but the tips of the larger guns will be cropped off on anything smaller.</p> <p></p> <p>We also need to take into consideration larger monitor resolutions and browser window scrolling, so add a black fill to fade out the edges of the design to a solid colour.</p> <p></p> <p>Crop the design as tightly as possible, then save the image. Compress the JPEG settings as far as you can while keeping an acceptable image quality. The max filesize YouTube accepts is 256kb.</p> <p></p> <p>Log into your YouTube profile and edit your channel. Upload the background image and deselect the repeat option. Then go through and edit the design background, text and link colours. Also remember to set the transparency of the YouTube wrapper and palettes to 100% so the underlying background can be seen.</p> <p><a href="http://www.youtube.com/chrisjspooner"></a></p> <p>Check out the final design over at my <a href="http://www.youtube.com/chrisjspooner">gaming channel on YouTube</a>. Notice how the palettes sit nicely against the containers of the background. If you’re gaming fan, particularly of the Call of Duty series, why not consider subscribing? </p> <p><a href="http://www.youtube.com/chrisjspooner">View the final YouTube background design</a></p> <p><br/> <br/> Excerpt from:<br/> <a target="_blank" href="http://feedproxy.google.com/~r/Line25/~3/gMGAuL2R6Bs/how-to-design-a-custom-youtube-background" title="How To Design a Custom YouTube Background">How To Design a Custom YouTube Background</a></p> <h4>Incoming search terms:</h4><ul><li>FAD weapon</li><li>youtube backgrounds</li><li>cool backgrounds for youtube channel</li><li>youtube background template</li><li>cool youtube backgrounds templates</li><li>cool youtube backgrounds</li><li>backgrounds for youtube channel</li><li>cool youtube backgrounds gaming</li><li>youtube channel background</li><li>awesome youtube backgrounds</li><li>youtube design template</li></ul><!-- SEO SearchTerms Tagging 2 Plugin --> </td> </tr> </table> </div> <div class="item"> <table> <tr> <td class="img"><a href="http://yoursourceisopen.com/7370-free-professional-css-html-web-templates"><img src="http://yoursourceisopen.com/wp-content/themes/Gadgetine/scripts/timthumb.php?src=/wp-content/uploads/2011/02/ee835b50csstemp_01.jpg&w=160&h=120&zc=1&q=100" alt="Free Professional CSS & HTML Web Templates"/></a></td> <td class="title"> <a href="http://yoursourceisopen.com/7370-free-professional-css-html-web-templates">Free Professional CSS & HTML Web Templates</a><p class="caps"> <p></p> <p> Ready-made CSS templates are one of the most sought after resources within the web design community. They not only offer a quick and easily edited solution for a static website or as a theme for your favorite CMS, they also offer a great avenue for exploring beautiful code, learning new techniques and most will work perfectly as a basic framework for any web project. To help with your search for the latest and greatest templates we have put this post together. </p> <p></p> <p>Ready-made CSS templates are one of the most sought after resources within the web design community. They not only offer a quick and easily edited solution for a static website or as a theme for your favorite CMS, they also offer a great avenue for exploring beautiful code, learning new techniques and most will work perfectly as a basic framework for any web project.</p> <p>To help with your search for the latest and greatest templates we have put this post together. Not only are these templates beautifully built, they all in there own way offer something different and unique (HTML5, CSS3 and some marvelous Javascript techniques). You’ll love them!</p> <h2><a href="http://rocketgraphs.net/2010/11/xhtml-free-template-creativestudio/">CreativeStudio xHTML/CSS Template</a></h2> <p><a href="http://rocketgraphs.net/2010/11/xhtml-free-template-creativestudio/"></a><br<br/> /> <a href="http://rocketgraphs.net/2010/11/xhtml-free-template-creativestudio/">CreativeStudio Download Page →</a><a href="http://rocketgraphs.net/demo/">Live Demo →</a></p> <h2><a href="http://www.bloggerzbible.com/2010/11/graymatter-new-htmlcss-template.html">Greymatter HTML/CSS Template</a></h2> <p><a href="http://www.bloggerzbible.com/2010/11/graymatter-new-htmlcss-template.html"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/60364792csstemp_02.jpg" alt="Greymatter HTML/CSS Template"></a><br<br/> /> <a href="http://www.bloggerzbible.com/2010/11/graymatter-new-htmlcss-template.html">Greymatter Download Page →</a></p> <h2><a href="http://www.os-templates.com/free-css-templates/4/photomatic">Photomatic CSS Template</a></h2> <p><a href="http://www.os-templates.com/free-css-templates/4/photomatic"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/80c4d54bcsstemp_03.jpg" alt="Photomatic CSS Template"></a><br<br/> /> <a href="http://www.os-templates.com/free-css-templates/4/photomatic">Photomatic Download Page →</a><a href="http://www.os-templates.com/assets/files/free-css-templates/demo/4/photomatic/">Live Demo →</a></p> <h2><a href="http://www.free-css.com/free-website-templates/page1/magicbox.php#bookmarks">Magicbox</a></h2> <p><a href="http://www.free-css.com/free-website-templates/page1/magicbox.php#bookmarks"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/29203784csstemp_04.jpg" alt="Magicbox"></a><br<br/> /> <a href="http://www.free-css.com/free-website-templates/page1/magicbox.php#bookmarks">Magicbox Download Page →</a><a href="http://www.free-css.com/assets/files/free-website-templates/preview/page1/magicbox/">Live Demo →</a></p> <h2><a href="http://www.templatesdock.com/template.php?id=bestfolio-01">Bestfolio</a></h2> <p><a href="http://www.templatesdock.com/template.php?id=bestfolio-01"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/cd41039fcsstemp_05.jpg" alt="Bestfolio"></a><br<br/> /> <a href="http://www.templatesdock.com/template.php?id=bestfolio-01">Bestfolio Download Page →</a><a href="http://www.templatesdock.com/template.php?id=bestfolio-01">View Screenshots →</a></p> <h2><a href="http://www.cssheaven.org/category/css_templates/">CSS Heaven 2</a></h2> <p><a href="http://www.cssheaven.org/category/css_templates/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/14e10efccsstemp_06.jpg" alt="CSS Heaven 2"></a><br<br/> /> <a href="http://www.cssheaven.org/category/css_templates/">CSS Heaven 2 Download Page →</a><a href="http://www.cssheaven.org/preview/cssh-2/">Live Demo →</a></p> <h2><a href="http://chocotemplates.com/portfolio/darkportfolio/">DarkPortfolio</a></h2> <p><a href="http://chocotemplates.com/portfolio/darkportfolio/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/a10a95d7csstemp_07.jpg" alt="DarkPortfolio"></a><br<br/> /> <a href="http://chocotemplates.com/portfolio/darkportfolio/">DarkPortfolio Download Page →</a><a href="http://chocotemplates.com/demo/?template=darkportfolio">Live Demo →</a></p> <h2><a href="http://www.cssheaven.org/category/css_templates/">HTML5 Template Portfolio</a></h2> <p><a href="http://www.cssheaven.org/category/css_templates/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/3bf3cc80csstemp_08.jpg" alt="HTML5 Template Portfolio"></a><br<br/> /> <a href="http://www.cssheaven.org/category/css_templates/">HTML5 Portfolio Download Page →</a><a href="http://www.cssheaven.org/preview/portfolio/">Live Demo →</a></p> <h2><a href="http://www.cssheaven.org/category/css_templates/">Studio One</a></h2> <p><a href="http://www.cssheaven.org/category/css_templates/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/6a2e8424csstemp_09.jpg" alt="Studio One"></a><br<br/> /> <a href="http://www.cssheaven.org/category/css_templates/">Studio One Download Page →</a><a href="http://www.cssheaven.org/preview/studio-one/">Live Demo →</a></p> <h2><a href="http://www.yourinspirationweb.com/en/yiw-minimal-a-free-clean-template-for-a-simple-yet-professional-website/">YIW Minimal</a></h2> <p><a href="http://www.yourinspirationweb.com/en/yiw-minimal-a-free-clean-template-for-a-simple-yet-professional-website/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/0eb773edcsstemp_10.jpg" alt="YIW Minimal"></a><br<br/> /> <a href="http://www.yourinspirationweb.com/en/yiw-minimal-a-free-clean-template-for-a-simple-yet-professional-website/">YIW Minimal Download Page →</a><a href="http://yim.yourinspirationweb.com/">Live Demo →</a></p> <h2><a href="http://chocotemplates.com/portal/moviehunter/">MovieHunter</a></h2> <p><a href="http://chocotemplates.com/portal/moviehunter/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/cc4f4d48csstemp_11.jpg" alt="MovieHunter"></a><br<br/> /> <a href="http://chocotemplates.com/portal/moviehunter/">MovieHunter Download Page →</a><a href="http://chocotemplates.com/demo/?template=moviehunter">Live Demo →</a></p> <h2><a href="http://chocotemplates.com/portal/buzz/">Buzz</a></h2> <p><a href="http://chocotemplates.com/portal/buzz/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/c5d7984acsstemp_12.jpg" alt="Buzz"></a><br<br/> /> <a href="http://chocotemplates.com/portal/buzz/">Buzz Download Page →</a><a href="http://chocotemplates.com/demo/?template=buzz">Live Demo →</a></p> <h2><a href="http://chocotemplates.com/portal/photowall/">PhotoWall</a></h2> <p><a href="http://chocotemplates.com/portal/photowall/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/d9b865c0csstemp_13.jpg" alt="PhotoWall"></a><br<br/> /> <a href="http://chocotemplates.com/portal/photowall/">PhotoWall Download Page →</a><a href="http://chocotemplates.com/demo/?template=photowall">Live Demo →</a></p> <h2><a href="http://indeziner.com/resources/freebies/free-css-templates/product-landing-page-free-css-template/">Product Landing Page</a></h2> <p><a href="http://indeziner.com/resources/freebies/free-css-templates/product-landing-page-free-css-template/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/2fa1bab8csstemp_14.jpg" alt="Product Landing Page"></a><br<br/> /> <a href="http://indeziner.com/resources/freebies/free-css-templates/product-landing-page-free-css-template/">Landing Page Download Page →</a><a href="http://media.indeziner.com:81/freecsstemplates/product-landing-page/">Live Demo →</a></p> <h2><a href="http://www.themelab.com/2010/10/15/corporate-blue-free-template/">Corporate Blue</a></h2> <p><a href="http://www.themelab.com/2010/10/15/corporate-blue-free-template/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/8e54cd8fcsstemp_15.jpg" alt="Corporate Blue"></a><br<br/> /> <a href="http://www.themelab.com/2010/10/15/corporate-blue-free-template/">Corporate Blue Download Page →</a><a href="http://www.themelab.com/previews/corporate-blue/">Live Demo →</a></p> <h2><a href="http://chocotemplates.com/corporate/blogger/">Blogger</a></h2> <p><a href="http://chocotemplates.com/corporate/blogger/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/d0a3aecbcsstemp_16.jpg" alt="Blogger"></a><br<br/> /> <a href="http://chocotemplates.com/corporate/blogger/">Blogger Download Page →</a><a href="http://chocotemplates.com/demo/?template=blogger">Live Demo →</a></p> <h2><a href="http://www.dcarter.co.uk/templates_item.php?template=tree_tops">Tree Tops</a></h2> <p><a href="http://www.dcarter.co.uk/templates_item.php?template=tree_tops"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/3fc229c0csstemp_17.jpg" alt="Tree Tops"></a><br<br/> /> <a href="http://www.dcarter.co.uk/templates_item.php?template=tree_tops">Tree Tops Download Page →</a></p> <h2><a href="http://www.instantshift.com/2010/11/09/dapurkue-free-xhtmlcss-e-commerce-template-for-your-online-business/">Dapurkue E-Commerce Template</a></h2> <p><a href="http://www.instantshift.com/2010/11/09/dapurkue-free-xhtmlcss-e-commerce-template-for-your-online-business/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/3a23c990csstemp_18.jpg" alt="Dapurkue E-Commerce Template"></a><br<br/> /> <a href="http://www.instantshift.com/2010/11/09/dapurkue-free-xhtmlcss-e-commerce-template-for-your-online-business/">Dapurkue Download Page →</a><a href="http://www.instantshift.com/demo/dapurkue/">Live Demo →</a></p> <h2><a href="http://www.instantshift.com/2010/10/13/clean-vcard-a-free-professional-xhtml-css-vcard-template/">Clean vCard</a></h2> <p><a href="http://www.instantshift.com/2010/10/13/clean-vcard-a-free-professional-xhtml-css-vcard-template/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/2060069ecsstemp_19.jpg" alt="Clean vCard"></a><br<br/> /> <a href="http://www.instantshift.com/2010/10/13/clean-vcard-a-free-professional-xhtml-css-vcard-template/">Clean vCard Download Page →</a><a href="http://www.rapidxhtml.com/promotions/vcard/">Live Demo →</a></p> <h2><a href="http://www.os-templates.com/free-css-templates/4/newserific">Newserific</a></h2> <p><a href="http://www.os-templates.com/free-css-templates/4/newserific"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/a604982fcsstemp_20.jpg" alt="Newserific"></a><br<br/> /> <a href="http://www.os-templates.com/free-css-templates/4/newserific">Newserific Download Page →</a><a href="http://www.os-templates.com/assets/files/free-css-templates/demo/4/newserific/">Live Demo →</a></p> <h2><a href="http://www.solucija.com/template/social-community-management">Social Community Management</a></h2> <p><a href="http://www.solucija.com/template/social-community-management"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/f669b5c7csstemp_21.jpg" alt="Social Community Management"></a><br<br/> /> <a href="http://www.solucija.com/template/social-community-management">Social Community Management Download Page →</a></p> <h2><a href="http://csstemplatesmarket.com/freecsstemplates/acallia/">Acallia</a></h2> <p><a href="http://csstemplatesmarket.com/freecsstemplates/acallia/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/5057dcb8csstemp_22.jpg" alt="Acallia"></a><br<br/> /> <a href="http://csstemplatesmarket.com/freecsstemplates/acallia/">Acallia Download Page →</a><a href="http://csstemplatesmarket.com/freecsstemplates/acallia/index.html">Live Demo →</a></p> <h2><a href="http://www.os-templates.com/free-css-templates/4/gallerised">Gallerised</a></h2> <p><a href="http://www.os-templates.com/free-css-templates/4/gallerised"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/f168edb4csstemp_23.jpg" alt="Gallerised"></a><br<br/> /> <a href="http://www.os-templates.com/free-css-templates/4/gallerised">Gallerised Download Page →</a><a href="http://www.os-templates.com/assets/files/free-css-templates/demo/4/gallerised/">Live Demo →</a></p> <h2><a href="http://www.yourinspirationweb.com/en/whitefolio-a-free-template-for-a-portfolio-but-not-only-elegant-and-creative/">WhiteFolio</a></h2> <p><a href="http://www.yourinspirationweb.com/en/whitefolio-a-free-template-for-a-portfolio-but-not-only-elegant-and-creative/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/7ea77438csstemp_24.jpg" alt="WhiteFolio"></a><br<br/> /> <a href="http://www.yourinspirationweb.com/en/whitefolio-a-free-template-for-a-portfolio-but-not-only-elegant-and-creative/">WhiteFolio Download Page →</a><a href="http://www.yourinspirationweb.com/WhiteFolio/">Live Demo →</a></p> <h2><a href="http://designshack.co.uk/articles/css/free-960-gs-css-photography-template-and-tutorial">960.GS CSS Photography Template</a></h2> <p><a href="http://designshack.co.uk/articles/css/free-960-gs-css-photography-template-and-tutorial"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/f2f226d0csstemp_25.jpg" alt="960.GS CSS Photography Template"></a><br<br/> /> <a href="http://designshack.co.uk/articles/css/free-960-gs-css-photography-template-and-tutorial">Photography Template Download Page →</a><a href="http://designshack.co.uk/tutorialexamples/BigPhotoTemplate/index.html">Live Demo →</a></p> <h2><a href="http://visztpeter.me/grayadmin/">Gray Admin Template</a></h2> <p><a href="http://visztpeter.me/grayadmin/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/6fdf2896csstemp_26.jpg" alt="Gray Admin Template"></a><br<br/> /> <a href="http://visztpeter.me/grayadmin/">Gray Admin Template Download Page →</a><a href="http://visztpeter.me/grayadmin/Demo/index.html">Live Demo →</a></p> <h2>You might also like…</h2> <p><a href="http://speckyboy.com/2010/08/29/50-refreshing-css-tutorials-techniques-and-resources/">50 Refreshing CSS Tutorials, Techniques and Resources →</a><br<br/> /> <a href="http://speckyboy.com/2010/08/02/40-high-quality-css-and-xhtml-web-layout-templates/">40 High Quality CSS and XHTML Web Layout Templates →</a><br<br/> /> <a href="http://speckyboy.com/2010/07/23/40-professional-and-detailed-web-layout-psd-templates/">40 Professional and Detailed Web Layout PSD Templates →</a><br<br/> /> <a href="http://speckyboy.com/2010/07/04/25-completely-free-fonts-perfect-for-fontface/">25 Completely Free Fonts Perfect for @fontface →</a><br<br/> /> <a href="http://speckyboy.com/2010/05/30/liquid-fluid-and-elastic-layout-templates-tools-and-frameworks/">Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks →</a><br<br/> /> <a href="http://speckyboy.com/2010/04/26/30-pure-css-alternatives-to-javascript/">30 Pure CSS Alternatives to Javascript →</a><br<br/> /> <a href="http://speckyboy.com/2010/11/08/40-essential-css-templates-resources-and-downloads/">40 Essential CSS Templates, Resources and Downloads →</a></p> <p><a href="http://feedads.g.doubleclick.net/~a/eGLzPSi8C-tiH065L3dMUsNSiqU/0/da"></a><br/><br/> <a href="http://feedads.g.doubleclick.net/~a/eGLzPSi8C-tiH065L3dMUsNSiqU/1/da"></a></p> <p><br/> <br/> Read the original:<br/> <a target="_blank" href="http://speckyboy.com/2011/02/02/25-fresh-and-professional-css-and-html-templates/" title="25 Fresh and Professional CSS and HTML Templates">25 Fresh and Professional CSS and HTML Templates</a></p> </td> </tr> </table> </div> <div class="item"> <table> <tr> <td class="img"><a href="http://yoursourceisopen.com/7312-30-video-tutorials-for-newbie-web-designers-tutorials"><img src="http://yoursourceisopen.com/wp-content/themes/Gadgetine/scripts/timthumb.php?src=/wp-content/uploads/2011/02/cf209f73b-designers.jpg&w=160&h=120&zc=1&q=100" alt="30 Video Tutorials For Newbie Web Designers – Tutorials"/></a></td> <td class="title"> <a href="http://yoursourceisopen.com/7312-30-video-tutorials-for-newbie-web-designers-tutorials">30 Video Tutorials For Newbie Web Designers – Tutorials</a><p class="caps"> <p></p> <p> The best designers never stop learning. Only the mediocre ones think they know it all, that there’s nothing else to learn</p> <p></p> <p>The best designers never stop learning. Only the mediocre ones think they know it all, that there’s nothing else to learn. But you don’t don’t want to be a mediocre designer, do you? That’s right – you want to be a <em>great</em> designer. One that’s always hungry to learn a new technique to make your first web and visual design project slick, cool, user-friendly, and just plain awesome. There is only thing holding you back – How to do it all!</p> <p><a href="http://www.flickr.com/photos/29143375@N05/4016440481/"></a></p> <p>Now, there are no doubt hundreds of thousands of video tutorials for web designers out there. So for the sake of focus, these video tutorials are aimed towards designers who are looking to not only get started in web design but also want to eventually build the best.</p> <p>Without further ado, here are 25 kick ass web design video tutorials:</p> <h2>Essential Coding</h2> <h2><a href="http://www.youtube.com/watch?v=ox9oM1YMkDg">Understanding CSS – Beginners Guide</a></h2> <p>This short video introduces you to CSS, showing you what it can do, how to use it and explains why you should use it.<br<br/> /> <a href="http://www.youtube.com/watch?v=ox9oM1YMkDg">Video URL →</a></p> <h2><a href="http://www.youtube.com/watch?v=YV3gxkXpkno">Beginning HTML (XHTML) Tutorial</a></h2> <p><a href="http://www.youtube.com/watch?v=YV3gxkXpkno">Video URL →</a></p> <h2><a href="http://www.youtube.com/watch?v=aWPtUEQ6FfY">HTML & CSS – Lesson 1 (Tutorials For Beginners)</a></h2> <p>This is a four part video series that delves deeper into CSS and HTML. Here are the links to the second, third and fourth part:<br<br/> /> <strong>•</strong> <a href="http://www.youtube.com/watch?v=aWPtUEQ6FfY">HTML & CSS – Lesson 1 (Tutorials For Beginners) →</a><br<br/> /> <strong>•</strong> <a href="http://www.youtube.com/watch?v=wNWl4WBM9jI">HTML & CSS – Lesson 2 (Create Basic Layout) →</a><br<br/> /> <strong>•</strong> <a href="http://www.youtube.com/watch?v=qznAFMlpGj4">HTML & CSS Lesson 3 (Adding Divisions) →</a><br<br/> /> <strong>•</strong> <a href="http://www.youtube.com/watch?v=WCnvpRp7lnk">HTML & CSS Lesson 4 (Banner/CSS Class) →</a></p> <h2><a href="http://www.youtube.com/watch?v=GwQMnpUsj8I">How To Make a Website from Scratch with Basic HTML and CSS</a></h2> <p>This is an indepth 40 minute video that will take you through the entire process of coding and implementing your first site.<br<br/> /> <a href="http://www.youtube.com/watch?v=GwQMnpUsj8I">Video URL →</a></p> <h2><a href="http://www.youtube.com/watch?v=Hk5oXFtYLwE">jQuery For Absolute Beginners</a></h2> <p>If you want to add some functionality to your site this is an essential video. Just as the title states, it will show beginners exactly how to get started with the marvellous jQuery Javascript Library.<br<br/> /> <a href="http://www.youtube.com/watch?v=Hk5oXFtYLwE">Video URL →</a></p> <h2><a href="http://www.youtube.com/watch?v=7J84jPaUWvw">What is a CMS?</a></h2> <p>What is a CMS describes the uses of content management systems, outlining examples such as Joomla, Magento, Drupal and WordPress, and explains its uses when creating a website.<br<br/> /> <a href="http://www.youtube.com/watch?v=7J84jPaUWvw">Video URL →</a></p> <h2><a href="http://www.youtube.com/watch?v=fjqSoasQmAk">Web Design Using a Content Management System (Joomla)</a></h2> <p>This is a six part video series explaining how to use and design for Joomla.<br<br/> /> <a href="http://www.youtube.com/watch?v=fjqSoasQmAk">Video URL →</a></p> <h2><a href="http://learnbythedrop.com/gettingstarted">Getting Started With Drupal</a></h2> <p>If you are are new to Drupal then this video series is just for you.The 15 lessons linked below provide a step-by-step guide to installing, configuring and creating content with Drupal 6:<br<br/> /> <strong>•</strong> <a href="http://learnbythedrop.com/drop/95">Lesson 1 – Installing Drupal On A Localhost →</a><br<br/> /> <strong>•</strong> <a href="http://learnbythedrop.com/drop/120">Lesson 2 – Basic Site Configuration →</a><br<br/> /> <strong>•</strong> <a href="http://learnbythedrop.com/drop/121">Lesson 3 – Installing A Contributed Theme →</a><br<br/> /> <strong>•</strong> <a href="http://learnbythedrop.com/drop/122">Lesson 4 – Adding Important Contributed Modules →</a><br<br/> /> <strong>•</strong> <a href="http://learnbythedrop.com/drop/124">Lesson 5 – Creating Content On Your Site →</a><br<br/> /> <strong>•</strong> <a href="http://learnbythedrop.com/drop/125">Lesson 6 – Categorizing Content On Your Site →</a><br<br/> /> <strong>•</strong> <a href="http://learnbythedrop.com/drop/129">Lesson 7 – Embedding Rich Media In Your Posts →</a><br<br/> /> <strong>•</strong> <a href="http://learnbythedrop.com/drop/131">Lesson 8 – Customizing The Front Page Of Your Site →</a><br<br/> /> <strong>•</strong> <a href="http://learnbythedrop.com/drop/132">Lesson 9 – Moving A Localhost Site To The Web →</a><br<br/> /> <strong>•</strong> <a href="http://learnbythedrop.com/drop/134">Lesson 10 – Site Administration Basics →</a><br<br/> /> <strong>•</strong> <a href="http://learnbythedrop.com/drop/135">Lesson 11 – Configuring Comments And A Contact Form →</a><br<br/> /> <strong>•</strong> <a href="http://learnbythedrop.com/drop/137">Lesson 12 – Socializing Content With Ratings And Sharing Links →</a><br<br/> /> <strong>•</strong> <a href="http://learnbythedrop.com/drop/140">Lesson 13 – Configuring User Profiles →</a><br<br/> /> <strong>•</strong> <a href="http://learnbythedrop.com/drop/142">Lesson 14 – Multi User Blogging Setup →</a><br<br/> /> <strong>•</strong> <a href="http://learnbythedrop.com/drop/146">Lesson 15 – Adding Community Features To Your Site →</a></p> <h2><a href="http://blog.themeforest.net/screencasts/new-wp-video-series-and-free-rockstar-book/">WordPress Beginners Video Series (via ThemeForest)</a></h2> <p>This is a seven part video series that will show you everything from installing to designing your first WordPress theme.<br<br/> /> <strong>•</strong> <a href="http://blog.themeforest.net/screencasts/new-wp-video-series-and-free-rockstar-book/">WordPress for Designers: Day 1 – Installation →</a><br<br/> /> <strong>•</strong> <a href="http://blog.themeforest.net/wordpress/wordpress-for-designers-day-2/">WordPress for Designers: Day 2 – The Admin Panel →</a><br<br/> /> <strong>•</strong> <a href="http://blog.themeforest.net/wordpress/wordpress-for-designers-day-3/">WordPress for Designers: Day 3 -Creating a Theme From Scratch →</a><br<br/> /> <strong>•</strong> <a href="http://blog.themeforest.net/wordpress/wordpress-for-designers-day-4/">WordPress for Designers: Day 4 – The WordPress Loop →</a><br<br/> /> <strong>•</strong> <a href="http://blog.themeforest.net/wordpress/wordpress-for-designers-day-5/">WordPress for Designers: Day 5 – The Sidebar →</a><br<br/> /> <strong>•</strong> <a href="http://blog.themeforest.net/wordpress/wordpress-for-designers-day-6/">WordPress for Designers: Day 6 – WordPress Template Hierarchy →</a><br<br/> /> <strong>•</strong> <a href="http://blog.themeforest.net/wordpress/wordpress-for-designers-day-7/">WordPress for Designers: Day 7 – Widgetize →</a></p> <h2>Essential HTML5 Features to Use</h2> <p>A tutorial on which essential HTML5 features you should be using right now, which will result in simpler and cleaner code for you.</p> <h2>Create Rounded Corners in CSS3</h2> <p>A web coding tutorial that looks into CSS3′s rounded corners feature and shows how to use “border-radius” to create rounded corners that show up in Firefox, Chrome, and Safari, and any other modern browsers.</p> <h2>How to Work with @font-face</h2> <h2>Create Box Shadows in CSS3</h2> <p>A Dreamweaver tutorial on how to create box shadows for your website elements using a simple CSS3 line of code.</p> <h2>Make Horizontal Drop Down Menus in CSS (Part 1 of 2)</h2> <p>The first part of a Dreamweaver tutorial on how to create horizontal drop down menus using CSS – in a way that the drop down menu is only visible when the mouse cursor hovers over the parent menu item.</p> <h2>Make Tabbed Navigation Menus in CSS (Part 1 of 2)</h2> <p>The first part of a Dreamweaver tutorial on how to create horizontal tabbed navigation menus using CSS and make it fully customizable.</p> <h2>Graphics & Images</h2> <h2><a href="http://www.youtube.com/watch?v=oEgjtx8BBoI">Create an Awesome Website with Photoshop in Less Than 5 Minutes!</a></h2> <p>This video will teach you how to make a basic web design with Photoshop layers (and slices) in less than 5 minutes.<br<br/> /> <a href="http://www.youtube.com/watch?v=oEgjtx8BBoI">Video URL →</a></p> <h2>Slice and Export a Website Layout</h2> <p>A tutorial on how to take a Photoshop-created website layout template, slice it into individual pieces, and export it into an HTML file ready for the web.</p> <h2>Convert Photoshop to HTML (Part 1 of 2)</h2> <p>The first part of another tutorial on how to take a Photoshop-created website layout template and convert it into an HTML file using a table-based approach.</p> <h2>Convert Photoshop to HTML (Part 2 of 2)</h2> <p>The second part of another tutorial on how to take a Photoshop-created website layout template and convert it into an HTML file using a table-based approach.</p> <h2>Make Web 2.0-style Icons</h2> <p>A Photoshop tutorial on how to make Web 2.0-style icons – complete with smooth gradients, highlights, shadows, and reflections.</p> <h2>Convert a JPEG Logo to a Vector</h2> <p>An Illustrator tutorial on how to convert basic JPEG logo images into vector shapes.</p> <h2>Create 3D Text</h2> <p>A Photoshop tutorial on how to create 3D text, including adding color and getting the popping-out effect that makes each letter look like a shaped block.</p> <h2>Create Simple Reflections and Shadows</h2> <p>An Illustrator tutorial on how to create simple image reflections and shadows by using opacity masks, gradients, and transparency.</p> <h2>Add Texture</h2> <p>An Illustrator tutorial on how to add texture to images by using opacity masks.</p> <h2>Create Glossy Shiny Reflective Logos</h2> <p>An Illustrator tutorial on how to create a vector logo with a shiny, glossy, and reflective highlight effect.</p> <h2>Create a Navigation Bar</h2> <p>A Photoshop tutorial on how to create a navigation menu bar for a blog or website.</p> <h2>Create a Image Gallery Frame</h2> <p>A Photoshop tutorial on how to create a reusable frame that you can use with images – perfect for placing in an online portfolio.</p> <h2>What Are Your Most Useful Video Tutorials?</h2> <p>Over to you: what are your favorite video tutorials for getting started in web design? Any glaring omissions that should be on this list? Feel free to share your useful additions in the comments section below.</p> <h2>You might also like…</h2> <p><a href="http://speckyboy.com/2011/01/19/50-free-tools-and-apps-for-web-designers-and-developers/">50 Free Tools and Apps for Web Designers and Developers →</a><br<br/> /> <a href="http://speckyboy.com/2010/09/12/css3-compatabilty-tools-resources-and-references-for-internet-explorer/">CSS3 Compatibility Tools, Resources and References for Internet Explorer →</a><br<br/> /> <a href="http://speckyboy.com/2010/07/02/25-free-color-tools-apps-and-palette-generators/">25 Free Color Tools, Apps and Palette Generators →</a><br<br/> /> <a href="http://speckyboy.com/2010/05/30/liquid-fluid-and-elastic-layout-templates-tools-and-frameworks/">Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks →</a><br<br/> /> <a href="http://speckyboy.com/2010/04/12/mobile-web-and-app-development-testing-and-emulation-tools/">Mobile Web and App Development Testing and Emulation Tools →</a><br<br/> /> <a href="http://speckyboy.com/2010/01/18/useful-web-design-proposal-resources-tools-and-apps/">Useful Web Design Proposal Resources, Tools and Apps →</a><br<br/> /> <a href="http://speckyboy.com/2009/11/20/10-online-tools-and-apps-to-help-optimize-and-format-css/">10 Online Tools and Apps to Help Optimize and Format CSS →</a><br<br/> /> <a href="http://speckyboy.com/2009/07/15/50-useful-tools-and-generators-for-easy-css-development/">50 Useful Tools and Generators for Easy CSS Development →</a></p> <p><a href="http://feedads.g.doubleclick.net/~a/2h5kYci8pp2omw5gmw78bIVPq7A/0/da"></a><br/><br/> <a href="http://feedads.g.doubleclick.net/~a/2h5kYci8pp2omw5gmw78bIVPq7A/1/da"></a></p> <p><br/> <br/> See the rest here:<br/> <a target="_blank" href="http://speckyboy.com/2011/02/07/25-video-tutorials-for-getting-started-in-web-design/" title="25 Video Tutorials for Getting Started in Web Design">25 Video Tutorials for Getting Started in Web Design</a></p> </td> </tr> </table> </div> <div class="item"> <table> <tr> <td class="img"><a href="http://yoursourceisopen.com/7258-cool-japanese-web-design-trends-practices"><img src="http://yoursourceisopen.com/wp-content/themes/Gadgetine/scripts/timthumb.php?src=/wp-content/uploads/2011/02/4919c8aasign-trends.jpg&w=160&h=120&zc=1&q=100" alt="Cool Japanese Web Design Trends & Practices"/></a></td> <td class="title"> <a href="http://yoursourceisopen.com/7258-cool-japanese-web-design-trends-practices">Cool Japanese Web Design Trends & Practices</a><p class="caps"> <p></p> <p> Japan plays host to some very impressive website designers. Their skills in the arts cannot be compared and demonstrate a powerful digital force among Internet readers</p> <p></p> <p>Japan plays host to some very impressive website designers. Their skills in the arts cannot be compared and demonstrate a powerful digital force among Internet readers. Luckily understanding how to read Japanese isn’t required to admire their website graphics and animation effects.</p> <p>We’ll be looking into a few Japanese website designs which have pushed the limits on conventional development. As a designer it’s a refreshing feeling to work with alternate design concepts and build your own unique ideas off these.</p> <h2>The Rise in Flash</h2> <p>Many of the most popular Japanese websites have been built in Flash, and this is no surprise. Although Flash-based websites do not rank very well in Google (at all) they offer a unique user experience which can’t be found anywhere else.</p> <p>In fact, Flash offers so much extensible content you may be surprised at just what is possible. Motion backgrounds and animated menu effects are just the tipping point on many Adobe Flash powered websites. Intricate portfolio layouts and detailed characters almost spring to life off the webpage.</p> <p></p> <p>One overlooked misconception is the loading speed of each page. Because the entire website is Flash-based it will require a large amount of bandwidth to transfer and download all of the page content. This frequently leads to very long loading/splash pages which are a huge loss for potential user experience.</p> <p>Although in the end it’s difficult to provide any judgement on the Flash-based approach. There are also many Japanese websites which are built off HTML5/CSS3 so I’m not categorizing all layouts as Flash-based. However with such a wide range of out-of-box thinking Japan has shown us a new outlook on envisioning the modern day website design.</p> <h2>Animation Ignition</h2> <p>It seems the Japanese community is well renowned for their work in the digital animation arts. Ranging from television to video games it seems the artistic works meld into the islands’ society and culture.</p> <p></p> <p>In many new-age web designs we are seeing much more illustrated artwork and digital graphics. Icon designers have also integrated an enormous amount of hand-drawn effects into their works. Japanese website designs have become much more <strong>branded</strong> by the likes of mascots, illustrated vectors, and small page icons.</p> <p>Similarly artists who offer these graphics showcase their work on many places throughout the web. Twitter backgrounds and Deviant Art accounts are full of some amazing illustrations from past designs.</p> <h2>Custom UI Pattern</h2> <p>This is a common trend amongst web designers and has been growing rapidly. Many Japanese companies which involve their products in the entertainment sector have gone above and beyond to create a dynamic user interface to match their website.</p> <p></p> <p>Many of the websites coming to mind include innovative virtual worlds from video games. <a href="http://katamaridamacy.jp/">Katamari Damacy</a> and <a href="http://www.square-enix.co.jp/kingdom2/">Kingdom Hearts II</a> specifically stand out as offering a very powerful user interface presence. The striking similarity between menu links in-game and on the webpages are resounding.</p> <p>This can be seen not only for these games, but countless other series. The most common approach of course is an entire Flash-based website constructed through ActionScript events. Even so, other Japanese graphics artists are creating unique UI effects outside of just the video game industry.</p> <h2>Elements of Physical Reality</h2> <p>It’s not too often we’ll see images of physical reality built into the most popular websites of today. This is quite the contrary of many popular Japanese artists which in fact specialize in building outstanding modern-day layouts.</p> <p>These include shots of arial birds-eye-view photos from cities and taller buildings. Many times the background or Flash animation on a page will include common everyday natural elements such as cats, trees, cars, and entire human cities. There are neat user effects applied to create a natural mood (e.g. website colors changing from day to night).</p> <p></p> <p>These graphics of buildings and people can sometimes even be built into the website itself. The varied degree of creativity from Japan shows even entire websites using a small land mass as navigation for the entire website. Pages can be accessed via buildings, lawn signs, even blimps flying atop the page heading!</p> <h2>Web Gallery Showcase</h2> <p>Below is a small collection of Japanese website designs. These include mostly Flash pages with animation effects and custom UI elements. If you’re looking for design inspiration this may be one of the most creative and “out-there” galleries.</p> <p>The designs are from a selection of varied topics and niches from a handful of time periods. If you have other suggestions for similar websites feel free to share them in the comments below.</p> <h2><a href="http://nestle.jp/brand/ndc/">Nestle</a></h2> <p><a href="http://nestle.jp/brand/ndc/"></a></p> <h2><a href="http://www.eyetalktown.com/">Eye Talk Town</a></h2> <p><a href="http://www.eyetalktown.com/"></a></p> <h2><a href="http://egao-saku.com/">Egao Saku</a></h2> <p><a href="http://egao-saku.com/"></a></p> <h2><a href="http://www.hiroto-rakusho.com/">Hiroto Rakusho</a></h2> <p><a href="http://www.hiroto-rakusho.com/"></a></p> <h2><a href="http://a.love-happy.com/">Love Happy</a></h2> <p><a href="http://a.love-happy.com/"></a></p> <h2><a href="http://www.mext.go.jp/wonder/">kids wonder project</a></h2> <p><a href="http://www.mext.go.jp/wonder/"></a></p> <h2><a href="http://www.naruhodoagent.com/">Naruhodo Agent</a></h2> <p><a href="http://www.naruhodoagent.com/"></a></p> <h2>You might also like…</h2> <p><a href="http://speckyboy.com/2010/03/25/50-examples-of-large-photography-backgrounds-within-web-design//">50 Examples of Large Photography Backgrounds within Web Design →</a><br<br/> /> <a href="http://speckyboy.com/2010/03/10/50-exanples-of-creative-404-page-not-found-pages/">50 Examples of Creative 404 – Page Not Found Pages →</a><br<br/> /> <a href="http://speckyboy.com/2010/02/25/50-amazing-personal-blog-web-designs/">A Showcase of 50 Amazing Personal Blog Web Designs →</a><br<br/> /> <a href="http://speckyboy.com/2009/12/28/50-creative-examples-of-illustrations-in-web-design/">50 Creative Examples of Illustrations in Web Design →</a><br<br/> /> <a href="http://speckyboy.com/2009/12/16/50-professional-web-design-agency-web-sites/">50 Professional Web Design Agency Web Sites →</a><br<br/> /> <a href="http://speckyboy.com/2009/12/02/50-bright-and-vibrant-web-designs-color-inspiration/">50 Bright and Vibrant Web Designs – Color Inspiration →</a><br<br/> /> <a href="http://speckyboy.com/2009/11/18/50-impressive-magazine-and-newspaper-styled-web-designs/">50 Impressive Magazine and Newspaper Styled Web Designs →</a><br<br/> /> <a href="http://speckyboy.com/2009/11/11/50-inspirational-and-fresh-minimally-designed-web-sites/">50 Inspirational and Fresh Minimally Designed Web Sites →</a><br<br/> /> <a href="http://speckyboy.com/2009/07/07/50-creative-and-inspirational-personal-portfolio-websites/">50 Creative and Inspirational Personal Portfolio Websites →</a><br<br/> /> <a href="http://speckyboy.com/2009/09/02/50-inspiring-web-application-and-service-web-site-designs/">50 Inspiring Web Application and Service Web Site Designs →</a><br<br/> /> <a href="http://speckyboy.com/2009/11/04/50-examples-of-effective-uses-of-typography-within-web-design/">50 Examples of Effective Uses of Typography Within Web Design →</a><br<br/> /> <a href="http://speckyboy.com/2010/02/11/50-beautifully-crafted-corporate-ecommerce-web-designs/">50 Beautifully Crafted Corporate Ecommerce Web Designs →</a><br<br/> /> <a href="http://speckyboy.com/2010/01/15/50-creative-examples-of-vintage-and-retro-in-web-design/">50 Creative Examples of Vintage and Retro in Web Design →</a></p> <p><a href="http://feedads.g.doubleclick.net/~a/doBrw2k7mfCqAfObk836NScmIQQ/0/da"></a><br/><br/> <a href="http://feedads.g.doubleclick.net/~a/doBrw2k7mfCqAfObk836NScmIQQ/1/da"></a></p> <p><br/> <br/> See original here:<br/> <a target="_blank" href="http://speckyboy.com/2011/02/09/examination-of-japanese-website-design-trends/" title="Examination of Japanese Website Design Trends">Examination of Japanese Website Design Trends</a></p> </td> </tr> </table> </div> <div class="item"> <table> <tr> <td class="img"><a href="http://yoursourceisopen.com/7211-20-free-icon-sets-for-web-designers"><img src="http://yoursourceisopen.com/wp-content/themes/Gadgetine/scripts/timthumb.php?src=/wp-content/uploads/2011/02/77b5cdccnewicons_01.jpg&w=160&h=120&zc=1&q=100" alt="20+ Free Icon Sets For Web Designers"/></a></td> <td class="title"> <a href="http://yoursourceisopen.com/7211-20-free-icon-sets-for-web-designers">20+ Free Icon Sets For Web Designers</a><p class="caps"> <p></p> <p> Once or twice a year we like to take a look at what new icon sets are freely available for designers and developers. We have found a nice selection for you covering most aspects of web, mobile and app devlopment</p> <p></p> <p>Once or twice a year we like to take a look at what new icon sets are freely available for designers and developers. We have found a nice selection for you covering most aspects of web, mobile and app devlopment. You will love them!</p> <h2><a href="http://remitrom73.deviantart.com/gallery/#/d31a9a0">Stock Icon Set</a></h2> <p><a href="http://remitrom73.deviantart.com/gallery/#/d31a9a0"></a><br<br/> /> <strong>Number of Icons:</strong> 154<br<br/> /> <strong>Format(s):</strong> .ico<br<br/> /> <strong>Size(s):</strong> 16px 32px, 64px & 128px<br<br/> /> <a href="http://remitrom73.deviantart.com/gallery/#/d31a9a0">Stock Icon Set →</a></p> <h2><a href="http://iconsweets2.com/">iconSweets 2</a></h2> <p><a href="http://iconsweets2.com/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/4a8043d1newicons_02.jpg" alt="iconSweets 2"></a><br<br/> /> <strong>Number of Icons:</strong> 400+<br<br/> /> <strong>Format(s):</strong> .psd<br<br/> /> <strong>Size(s):</strong> 16px, 32px & 64px<br<br/> /> <a href="http://iconsweets2.com/">iconSweets 2 →</a></p> <h2><a href="http://blog.twg.ca/2010/11/retina-display-icon-set/">Retina Display Icon Set</a></h2> <p><a href="http://blog.twg.ca/2010/11/retina-display-icon-set/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/76932a1anewicons_03.jpg" alt="Retina Display Icon Set"></a><br<br/> /> <strong>Number of Icons:</strong> 400+<br<br/> /> <strong>Format(s):</strong> .png<br<br/> /> <strong>Size(s):</strong> 24px, 48px & 64px<br<br/> /> <a href="http://blog.twg.ca/2010/11/retina-display-icon-set/">Retina Display Icon Set →</a><a href="http://yoursourceisopen.com/wp-content/uploads/2011/02/a9ea2f13a_preview-1.png">Full Preview →</a></p> <h2><a href="http://www.coskundeniz.com.tr/android-icons-shape-package.html">Android Icons – Shape Package</a></h2> <p><a href="http://www.coskundeniz.com.tr/android-icons-shape-package.html"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/4640b0d9newicons_04.jpg" alt="Android Icons – Shape Package"></a><br<br/> /> <strong>Number of Icons:</strong> 40+<br<br/> /> <strong>Format(s):</strong> .png, .psh<br<br/> /> <a href="http://www.coskundeniz.com.tr/android-icons-shape-package.html">Android Icons – Shape Package →</a></p> <h2><a href="http://rachel1009.deviantart.com/art/Free-simple-icon-193921716">Simple Icon Set</a></h2> <p><a href="http://rachel1009.deviantart.com/art/Free-simple-icon-193921716"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/46591093newicons_05.jpg" alt="Simple Icon Set"></a><br<br/> /> <strong>Number of Icons:</strong> 16<br<br/> /> <strong>Format(s):</strong> .psd & .png<br<br/> /> <a href="http://rachel1009.deviantart.com/art/Free-simple-icon-193921716">Simple Icon Set →</a></p> <h2><a href="http://www.thenounproject.com/">NounProject</a></h2> <p><a href="http://www.thenounproject.com/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/54089414newicons_06.jpg" alt="NounProject"></a><br<br/> /> <strong>Number of Icons:</strong> 500+<br<br/> /> <strong>Format(s):</strong> .svg<br<br/> /> <a href="http://www.thenounproject.com/">NounProject →</a></p> <h2><a href="http://gestureworks.com/features/open-source-gestures/">Open Source Multitouch Gesture Library</a></h2> <p><a href="http://gestureworks.com/features/open-source-gestures/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/b005ace4newicons_07.jpg" alt="Open Source Multitouch Gesture Library"></a><br<br/> /> <strong>Number of Icons:</strong><br<br/> /> <strong>Format(s):</strong> .png & .eps<br<br/> /> <strong>License:</strong> Released under a FreeBSD license<br<br/> /> <a href="http://gestureworks.com/features/open-source-gestures/">Open Source Multitouch Gesture Library →</a></p> <h2><a href="http://www.agiletech.ie/blog/128x16x16">Agile Toolkit Icon Set</a></h2> <p><a href="http://www.agiletech.ie/blog/128x16x16"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/54d75831newicons_08.jpg" alt="Agile Toolkit Icon Set"></a><strong>Number of Icons:</strong> 128<br<br/> /> <strong>Format(s):</strong> .png<br<br/> /> <strong>Size(s):</strong> 16px<br<br/> /> <a href="http://www.agiletech.ie/blog/128x16x16">Agile Toolkit Icon Set →</a></p> <h2><a href="http://remitrom73.deviantart.com/gallery/#/d31a9tp">Micro Icons</a></h2> <p><a href="http://remitrom73.deviantart.com/gallery/#/d31a9tp"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/736568dfnewicons_09.jpg" alt="Micro Icons"></a><strong>Number of Icons:</strong> 32<br<br/> /> <strong>Format(s):</strong> .ico<br<br/> /> <strong>Size(s):</strong> 16px<br<br/> /> <a href="http://remitrom73.deviantart.com/gallery/#/d31a9tp">Micro Icons →</a></p> <h2><a href="http://dribbble.com/shots/96779-Strabo-A-Free-Icon-Set?offset=5">Strabo Icon Set</a></h2> <p><a href="http://dribbble.com/shots/96779-Strabo-A-Free-Icon-Set?offset=5"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/22854973newicons_10.jpg" alt="Strabo Icon Set"></a><strong>Number of Icons:</strong> 16<br<br/> /> <strong>Format(s):</strong> .png<br<br/> /> <strong>Size(s):</strong> 24px<br<br/> /> <a href="http://dribbble.com/shots/96779-Strabo-A-Free-Icon-Set?offset=5">Strabo Icon Set →</a></p> <h2><a href="http://www.behance.net/gallery/Pixim-icon-set/932131">Pixim Icon Set</a></h2> <p><a href="http://www.behance.net/gallery/Pixim-icon-set/932131"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/89efa2bdnewicons_11.jpg" alt="Pixim Icon Set"></a><strong>Number of Icons:</strong> 54<br<br/> /> <strong>Format(s):</strong> .gif<br<br/> /> <strong>Size(s):</strong> 12px<br<br/> /> <a href="http://www.behance.net/gallery/Pixim-icon-set/932131">Pixim Icon Set →</a></p> <h2><a href="http://www.tutorial9.net/downloads/48px-icon-pack-pixel-perfect-collection/">Pixel Perfect Collection</a></h2> <p><a href="http://www.tutorial9.net/downloads/48px-icon-pack-pixel-perfect-collection/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/39e98a64newicons_12.jpg" alt="Pixel Perfect Collection"></a><br<br/> /> <strong>Number of Icons:</strong> 33<br<br/> /> <strong>Format(s):</strong> .png, .ico & .icns<br<br/> /> <strong>Size(s):</strong> 48px<br<br/> /> <a href="http://www.tutorial9.net/downloads/48px-icon-pack-pixel-perfect-collection/">Pixel Perfect Collection →</a></p> <h2><a href="http://www.behance.net/gallery/Basic-Rounded-Free-Iconset/567000">Basic Rounded</a></h2> <p><a href="http://www.behance.net/gallery/Basic-Rounded-Free-Iconset/567000"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/227755fenewicons_13.jpg" alt="Basic Rounded"></a><br<br/> /> <strong>Number of Icons:</strong> 27<br<br/> /> <strong>Format(s):</strong> .psd<br<br/> /> <a href="http://www.behance.net/gallery/Basic-Rounded-Free-Iconset/567000">Basic Rounded →</a></p> <h2><a href="http://www.danieleckermann.com/linkdeck/">LinkDeck Social Bookmark Icon Pack</a></h2> <p><a href="http://www.danieleckermann.com/linkdeck/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/ab231d4fnewicons_14.jpg" alt="LinkDeck Social Bookmark Icon Pack"></a><br<br/> /> <strong>Number of Icons:</strong> 45<br<br/> /> <strong>Format(s):</strong> .psd<br<br/> /> <strong>Size(s):</strong> 16px, 32px, 64px, 128px & 256px<br<br/> /> <a href="http://www.danieleckermann.com/linkdeck/">LinkDeck Social Bookmark Icon Pack →</a></p> <h2><a href="http://www.premiumpixels.com/buddycons-126-free-vector-based-social-media-icons/">Buddycon – Vector-Based Social Media Icons</a></h2> <p><a href="http://www.premiumpixels.com/buddycons-126-free-vector-based-social-media-icons/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/7c0069c6newicons_15.jpg" alt="Buddycon - Vector-Based Social Media Icons"></a><br<br/> /> <strong>Number of Icons:</strong> 126<br<br/> /> <strong>Format(s):</strong> .ai & .png<br<br/> /> <strong>Size(s):</strong> 32px<br<br/> /> <a href="http://www.premiumpixels.com/buddycons-126-free-vector-based-social-media-icons/">Buddycon →</a></p> <h2><a href="http://www.wpzoom.com/wpzoom/new-freebie-wpzoom-developer-icon-set-154-free-icons/">WPZOOM Developer Icon Set</a></h2> <p><a href="http://www.wpzoom.com/wpzoom/new-freebie-wpzoom-developer-icon-set-154-free-icons/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/2a616d06newicons_16.jpg" alt="WPZOOM Developer Icon Set"></a><br<br/> /> <strong>Number of Icons:</strong> 154<br<br/> /> <strong>Format(s):</strong> .png, .ai & .psd<br<br/> /> <strong>Size(s):</strong> 48px<br<br/> /> <a href="http://www.wpzoom.com/wpzoom/new-freebie-wpzoom-developer-icon-set-154-free-icons/">WPZOOM Developer Icon Set →</a></p> <h2><a href="http://sixrevisions.com/freebies/icons/30-e-commerce-icons/">E-Commerce Icons</a></h2> <p><a href="http://sixrevisions.com/freebies/icons/30-e-commerce-icons/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/0fbed6ccnewicons_17.jpg" alt="E-Commerce Icons"></a><br<br/> /> <strong>Number of Icons:</strong><br<br/> /> <strong>Format(s):</strong> .psd<br<br/> /> <strong>Size(s):</strong> 48px, 64px & 128px<br<br/> /> <a href="http://sixrevisions.com/freebies/icons/30-e-commerce-icons/">E-Commerce Icons →</a></p> <h2><a href="http://www.webdesignerdepot.com/2011/01/kaching-exclusive-free-ecommerce-icons/">Kaching eCommerce Icons</a></h2> <p><a href="http://www.webdesignerdepot.com/2011/01/kaching-exclusive-free-ecommerce-icons/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/1d5da6eanewicons_18.jpg" alt="Kaching eCommerce Icons"></a><br<br/> /> <strong>Number of Icons:</strong> 24<br<br/> /> <strong>Format(s):</strong> .png, .ai & .psd<br<br/> /> <strong>Size(s):</strong> 48px & 400px<br<br/> /> <a href="http://www.webdesignerdepot.com/2011/01/kaching-exclusive-free-ecommerce-icons/">Kaching eCommerce Icons →</a></p> <h2><a href="http://www.smashingmagazine.com/2010/10/21/free-png-credit-card-debit-card-and-payment-icons-set-18-icons/">Credit Card, Debit Card and Payment Icons Set</a></h2> <p><a href="http://www.smashingmagazine.com/2010/10/21/free-png-credit-card-debit-card-and-payment-icons-set-18-icons/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/ccb403a7newicons_19.jpg" alt="Credit Card, Debit Card and Payment Icons Set"></a><br<br/> /> <strong>Number of Icons:</strong> 18<br<br/> /> <strong>Format(s):</strong> .png<br<br/> /> <strong>Size(s):</strong> 32px, 64px & 128px<br<br/> /> <a href="http://www.smashingmagazine.com/2010/10/21/free-png-credit-card-debit-card-and-payment-icons-set-18-icons/">Credit Card, Debit Card and Payment Icons Set →</a></p> <h2><a href="http://blog.graphicpeel.com/post/1316078665/credit-card-icon-pack">Credit Card Icon Pack</a></h2> <p><a href="http://blog.graphicpeel.com/post/1316078665/credit-card-icon-pack"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/bdc5c7bfnewicons_20.jpg" alt="Credit Card Icon Pack"></a><br<br/> /> <strong>Number of Icons:</strong> 35<br<br/> /> <strong>Format(s):</strong> .png<br<br/> /> <strong>Size(s):</strong> 32px<br<br/> /> <a href="http://blog.graphicpeel.com/post/1316078665/credit-card-icon-pack">Credit Card Icon Pack →</a></p> <h2><a href="http://www.iconshock.com/html5-icons/">…and finally … HTML5 Icons</a></h2> <p><a href="http://www.iconshock.com/html5-icons/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/6daff0b4newicons_21.jpg" alt="HTML5 Icons"></a><br<br/> /> <strong>Number of Icons:</strong> 10<br<br/> /> <strong>Format(s):</strong> .png & .ai<br<br/> /> <strong>Size(s):</strong> 512px<br<br/> /> <a href="http://www.iconshock.com/html5-icons/">HTML5 Icons →</a></p> <h2><a href="http://www.w3.org/html/logo/">Original W3C HTML5 Icons</a></h2> <p><a href="http://www.w3.org/html/logo/"> src="http://yoursourceisopen.com/wp-content/uploads/2011/02/669ff30enewicons_22.jpg" alt="Original W3C HTML5 Icons"></a><br<br/> /> <strong>Format(s):</strong> .png & .svg<br<br/> /> <strong>Size(s):</strong> 32px, 64px, 128px, 256px & 512px<br<br/> /> <a href="http://www.w3.org/html/logo/">Original W3C HTML5 Icons →</a></p> <h2>You might also like…</h2> <p><a href="http://speckyboy.com/2009/12/21/the-top-50-web-development-icon-sets-from-2009/">The Top 50 Web Development Icon Sets from 2009 →</a><br<br/> /> <a href="http://speckyboy.com/2010/12/06/top-50-web-development-design-and-application-icon-sets-from-2010/">Top 50 Web Development, Design and Application Icon Sets from 2010 →</a><br<br/> /> <a href="http://speckyboy.com/2009/02/02/50-of-the-best-ever-web-development-design-and-application-icon-sets/">50 of the Best Ever Web Development, Design and Application Icon Sets →</a><br<br/> /> <a href="http://speckyboy.com/2009/07/20/50-social-service-and-bookmarking-icon-sets-for-bloggers/">50 Social Service and Bookmarking Icon Sets for Bloggers Part 1 →</a> & <a href="http://speckyboy.com/2010/04/14/50-social-bookmarking-icon-sets-for-bloggers-part-2/">Part 2 →</a><br<br/> /> <a href="http://speckyboy.com/2010/06/20/30-of-the-best-web-development-and-design-mini-icon-sets/">30 of the Best Web Development and Design MINI Icon Sets →</a><br<br/> /> <a href="http://speckyboy.com/2010/04/19/15-uniform-payment-options-icon-sets-for-ecommerce-design/">15 Uniform Payment Options Icon Sets for Ecommerce Design →</a><br<br/> /> <a href="http://speckyboy.com/2010/03/08/14-free-mobile-app-development-icon-sets/">14 Free Mobile Application Development Icon Sets →</a><br<br/> /> <a href="http://speckyboy.com/2009/11/30/8-free-pictogram-icon-libraries-and-collections/">8 Free Pictogram Icon Libraries and Collections →</a><br<br/> /> <a href="http://speckyboy.com/2009/11/02/40-fresh-and-free-icon-sets-for-web-designers-and-bloggers/">40 Fresh and Free Icon Sets for Web Designers and Bloggers →</a></p> <p><a href="http://feedads.g.doubleclick.net/~a/CrYzLGG9zNXhjyqg8GxSfpc4LQ0/0/da"></a><br/><br/> <a href="http://feedads.g.doubleclick.net/~a/CrYzLGG9zNXhjyqg8GxSfpc4LQ0/1/da"></a></p> <p><br/> <br/> See more here:<br/> <a target="_blank" href="http://speckyboy.com/2011/02/10/20-new-free-icon-sets-for-web-designers-and-developers/" title="20 New Free Icon Sets for Web Designers and Developers">20 New Free Icon Sets for Web Designers and Developers</a></p> <h4>Incoming search terms:</h4><ul><li>whats new icon</li><li>new icon for web</li></ul><!-- SEO SearchTerms Tagging 2 Plugin --> </td> </tr> </table> </div> <div class="item"> <table> <tr> <td class="img"><a href="http://yoursourceisopen.com/7208-vintage-pocket-watch-compass-free-vector-download"><img src="http://yoursourceisopen.com/wp-content/themes/Gadgetine/scripts/timthumb.php?src=/wp-content/uploads/2011/02/d1f7ee62small.jpg&w=160&h=120&zc=1&q=100" alt="Vintage Pocket Watch & Compass – Free Vector Download"/></a></td> <td class="title"> <a href="http://yoursourceisopen.com/7208-vintage-pocket-watch-compass-free-vector-download">Vintage Pocket Watch & Compass – Free Vector Download</a><p class="caps"> <p></p> <p> Hi guys!  Today’s free vectors will travel us back in time.  A vintage antique pocket watch and an old compass in AI & EPS format.  Hope you like them Related posts: Chistmas free vector set vol.2! </p> <p></p> <p><a href="http://yoursourceisopen.com/wp-content/uploads/2011/02/d1f7ee62small.jpg"></a></p> <p>Hi guys!  Today’s free vectors will travel us back in time.  A vintage antique pocket watch and an old compass in AI & EPS format.  Hope you like them </p> <p>Related posts: <ol> <li><a href="http://www.pinkmoustache.net/chistmas-free-vector-set-vol-2/" rel="bookmark" title="Permanent Link: Chistmas free vector set vol.2!">Chistmas free vector set vol.2!</a></li> </ol> <p><a href="http://feedads.g.doubleclick.net/~a/8Bk0inyMkIgXWTKwugFtbgj23YE/0/da"></a><br/><br/> <a href="http://feedads.g.doubleclick.net/~a/8Bk0inyMkIgXWTKwugFtbgj23YE/1/da"></a></p> <p><br/> <br/> See original here:<br/> <a target="_blank" href="http://feedproxy.google.com/~r/pinkmoustachenet/~3/KOUf_c2CAE0/" title="Vintage vector pocket watch & compass!">Vintage vector pocket watch & compass!</a></p> <h4>Incoming search terms:</h4><ul><li>vector vintage free</li><li>free vector watch</li><li>watch vector free download</li><li>vintage vector download</li><li>yhs-mystartdefault</li><li>free pocket watch vector</li><li>pocket watch vector free download</li><li>watch vector free</li><li>vintage compass psd</li><li>watch vectors free download</li><li>vintage pocket watch photoshop brush set</li><li>vector free watch</li><li>pocket watch vintage brush</li><li>pocket watch vector psd files</li><li>watches vector free</li><li>pocket watch vector</li><li>pocket watch psd files free</li><li>backs vintage vector free</li><li>compass vector free</li><li>download free pocket watch photoshop brush</li><li>free brushes for photoshop pocket watch</li><li>free vector vintage design watch</li><li>free vintage compass vector</li><li>free vintage compasses psd</li><li>old watch vector desygn</li><li>photoshop old pocketwatch</li><li>photoshop pocket watch brushes free download</li><li>pocket watch photoshop shape</li><li>antique pocket watch psd file</li></ul><!-- SEO SearchTerms Tagging 2 Plugin --> </td> </tr> </table> </div> <div class="item"> <table> <tr> <td class="img"><a href="http://yoursourceisopen.com/7205-free-september-calendar-wallpaper"><img src="http://yoursourceisopen.com/wp-content/themes/Gadgetine/scripts/timthumb.php?src=/wp-content/uploads/2011/02/96b235e1small.png&w=160&h=120&zc=1&q=100" alt="Free September Calendar Wallpaper"/></a></td> <td class="title"> <a href="http://yoursourceisopen.com/7205-free-september-calendar-wallpaper">Free September Calendar Wallpaper</a><p class="caps"> <p></p> <p> Hello everybody! Let’s all have a great month Related posts: Free October’s wallpaper! </p> <p></p> <p><a href="http://yoursourceisopen.com/wp-content/uploads/2011/02/96b235e1small.png"></a></p> <p>Hello everybody! Let’s all have a great month </p> <p>Related posts: <ol> <li><a href="http://www.pinkmoustache.net/free-octobers-wallpaper/" rel="bookmark" title="Permanent Link: Free October’s wallpaper!">Free October’s wallpaper!</a></li> </ol> <p><a href="http://feedads.g.doubleclick.net/~a/xRLeiQQyTRoysYiaPZ3snM5t5t0/0/da"></a><br/><br/> <a href="http://feedads.g.doubleclick.net/~a/xRLeiQQyTRoysYiaPZ3snM5t5t0/1/da"></a></p> <p><br/> <br/> Read the original post:<br/> <a target="_blank" href="http://feedproxy.google.com/~r/pinkmoustachenet/~3/fNruRrc4slY/" title="September’s wallpaper">September’s wallpaper</a></p> <h4>Incoming search terms:</h4><ul><li>have a great month</li></ul><!-- SEO SearchTerms Tagging 2 Plugin --> </td> </tr> </table> </div> <div class="pages"> <table> <tr> <td> <a class="prev" href="http://yoursourceisopen.com/date/2011/02/page/16">« Previous</a> <a href="http://yoursourceisopen.com/date/2011/02/page/14">14</a><a href="http://yoursourceisopen.com/date/2011/02/page/15">15</a><a href="http://yoursourceisopen.com/date/2011/02/page/16">16</a><a class="act" href="http://yoursourceisopen.com/date/2011/02/page/17">17</a><a href="http://yoursourceisopen.com/date/2011/02/page/18">18</a><a href="http://yoursourceisopen.com/date/2011/02/page/19">19</a><a href="http://yoursourceisopen.com/date/2011/02/page/20">20</a> <a class="next" href="http://yoursourceisopen.com/date/2011/02/page/18">Next »</a> </td> </tr> </table> </div> </div> <div class="block_7"> <h2><span>Web Design PSDs, Vectors & Resources</span></h2> <table> <tr> <td class="title"> <a href="http://yoursourceisopen.com/72583-forest-wallpaper-free-psd-download"><img src="http://yoursourceisopen.com/wp-content/themes/Gadgetine/scripts/timthumb.php?src=/wp-content/uploads/2013/04/b0bea1fbrror-forest.jpg&w=160&h=120&zc=1&q=100" alt="Forest Wallpaper – Free PSD Download"/></a> <a href="http://yoursourceisopen.com/72583-forest-wallpaper-free-psd-download">Forest Wallpaper – Free PSD Download</a> </td> </tr> <tr><td class="spacer"></td></tr> <tr> <td class="title"> <a href="http://yoursourceisopen.com/72106-champagne-free-vector-art-download"><img src="http://yoursourceisopen.com/wp-content/themes/Gadgetine/scripts/timthumb.php?src=/wp-content/uploads/2013/04/c85099banload-links.jpg&w=160&h=120&zc=1&q=100" alt="Champagne – Free Vector Art Download"/></a> <a href="http://yoursourceisopen.com/72106-champagne-free-vector-art-download">Champagne – Free Vector Art Download</a> </td> </tr> <tr><td class="spacer"></td></tr> <tr> <td class="title"> <a href="http://yoursourceisopen.com/72068-polka-dots-free-vectors-download"><img src="http://yoursourceisopen.com/wp-content/themes/Gadgetine/img/no_image_160x120.png" alt="Polka Dots – Free Vectors Download"/></a> <a href="http://yoursourceisopen.com/72068-polka-dots-free-vectors-download">Polka Dots – Free Vectors Download</a> </td> </tr> <tr><td class="spacer"></td></tr> <tr> <td class="title"> <a href="http://yoursourceisopen.com/72044-four-leaf-clover-free-psd-download"><img src="http://yoursourceisopen.com/wp-content/themes/Gadgetine/scripts/timthumb.php?src=/wp-content/uploads/2013/04/b64a9cdcclover.jpg&w=160&h=120&zc=1&q=100" alt="Four Leaf Clover – Free PSD Download"/></a> <a href="http://yoursourceisopen.com/72044-four-leaf-clover-free-psd-download">Four Leaf Clover – Free PSD Download</a> </td> </tr> <tr><td class="spacer"></td></tr> </table> <a href="http://yoursourceisopen.com/category/web-design-psds-resources-vectors/" class="readmore"><span>See More</span></a> </div> </div> <div class="ct_c3"> <div class="block_4"> <div class="textwidget"><center><!-- BEGIN UAT - 160x600 - YourSourceIsOpen: YourSourceIsOpen - DO NOT MODIFY --> <script type="text/javascript" src="http://ad-cdn.technoratimedia.com/00/13/80/uat_18013.js?ad_size=160x600"></script> <!-- END TAG --></center></div> </div> </div> </div> </div> <div class="clearft"></div> </div> <div class="ft_w"> <div class="t"></div> <div class="c"> <table> <tr> <td class="c1"> <center> <!-- BEGIN UAT - 300x250 - YourSourceIsOpen: YourSourceIsOpen - DO NOT MODIFY --> <script type="text/javascript" src="http://ad-cdn.technoratimedia.com/00/13/80/uat_18013.js?ad_size=300x250"></script> <!-- END TAG --> </center> <p></p> <p><span></span></p> </td> <td class="spacer_1"></td> <td class="c2"> <h2>Recent Posts</h2> <ul> <li><a href="http://yoursourceisopen.com/?p=73405" title="Look Create a 3D Typographic Illustration">Create a 3D Typographic Illustration</a> </li> <li><a href="http://yoursourceisopen.com/?p=73341" title="Look Create a StarCraft-Inspired Firestorm in Photoshop">Create a StarCraft-Inspired Firestorm in Photoshop</a> </li> <li><a href="http://yoursourceisopen.com/?p=73324" title="Look Video: Psdtuts+ Design Challenge #2 Review">Video: Psdtuts+ Design Challenge #2 Review</a> </li> <li><a href="http://yoursourceisopen.com/?p=73317" title="Look Design Challenge #3: Create a Typographic Illustration">Design Challenge #3: Create a Typographic Illustration</a> </li> <li><a href="http://yoursourceisopen.com/?p=73316" title="Look Photoshop’s Best Friends – InDesign and Illustrator">Photoshop’s Best Friends – InDesign and Illustrator</a> </li> </ul> </td> <td class="spacer_2"></td> <td class="c3"> <h2>Most popular categories</h2> <ul> <li><a href="http://yoursourceisopen.com/category/web-design-psds-resources-vectors">Web Design PSDs, Vectors & Resources</a></li><li><a href="http://yoursourceisopen.com/category/open-source-free-php-scripts-software">Open Source Scripts & Software</a></li><li><a href="http://yoursourceisopen.com/category/web-design-tips-how-tos-tutorials">Web Design Tips & Tutorials</a></li><li><a href="http://yoursourceisopen.com/category/free-wordpress-themes">Free WordPress Themes</a></li><li><a href="http://yoursourceisopen.com/category/web-design-tips-how-tos-tutorials">Web Design Tips & Tutorials</a></li> </ul> </td> </tr> </table> <div class="ft"> <!--<span>© 2011 YourSourceIsOpen.com<br /><br />All content listed on YourSourceIsOpen.com is aggregated from third party websites. As such, YourSourceIsOpen.com retains no responsibility for said content.</span>--> </div> </div> </div> <script type="text/javascript">ggv2id='fde92367';</script> <script type="text/javascript" src="http://g2.gumgum.com/javascripts/ggv2.js"></script> </body> </html> <!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/ Page Caching using disk: enhanced Served from: yoursourceisopen.com @ 2013-05-20 17:17:52 -->