9 Grungy Website Design Tutorials
Last month, I showed you 60+ grunge effect tutorials using Photoshop or Illustrator. This time, you’ll learn how to use some of the grunge techniques to create a full page website design. Create a Grungy Web Design in Photoshop You’ll learn how to create a grungy home page design from head to toe. You’ll learn how to put together the header, sidebar, body and footer in heavily textured and grungy design. 2nd Grungy Website Layout using Photoshop This tutorial shows you how to create a grungy layout using some common techniques. 3rd Grungy Web Design with Photoshop You’ll learn the steps of designing the clean grungy blog design from scratch. 4th Grungy Web Layout with Photoshop With this tutorial, you’ll learn how easy it is to create a great layout with a simple old paper grungy image. 5th Grungy Web Design using Photoshop A grungy web layout designed by Loreleiweb. 6th Grungy Web Design using Photoshop This tutorial has 3 articles guiding you through the process of designing a worn looking website. It’ll cover the preparation of wireframes and resources, the process of adding texture and detail. 7th Grungy Web Layout in Photoshop Discover the power of brushes to create this grungy layout 8th Grungy Web layout in Photoshop 9th Grungy Website Layout with Photoshop In this tutorial, you’ll know how to design a professional grungy website layout using Photoshop general design...
Read MoreWow! My themes are on Hongkiat.com
I am so thrilled that this time, my effort has been acknowledged by this super blog, Hongkiat.com! They just created a new WordPress theme entry and my Red Light theme is on top of the list! Why do I say that Hongkiat.com is a super blog? In my definition, a super blog needs to have 10,000+ subscribers, 10,000+ daily visitors and thousands of useful posts. And these are the stats of Hongkiat.com * Feed Subscribers: 12,000+ * Daily Visitors: 35,000+ * No. of Posts: 1100+ What is this site about? Hongkiat.com is a mega directory for designers, tech users, and bloggers. It covers a wide range of design and IT topics from design ideas, tutorials to applications. You can find almost everything that is design-related. Visit Hongkiat now and you’ll know what I mean. It is the one blog that I can’t do without. I incorporate a lot of ideas that I get from this blog in my theme design. To a big extent, I owe the success of my themes to this blog. And now this wonderful site featured my themes. I am so excited that what I have been doing so diligently are getting some credits from this big guy. Nothing can express my excitement now. Thanks Hongkiat :Big...
Read More100 Popular jQuery Examples, Plugins and Tutorials
1. jQuery Lavalamp Menu – It is the jQuery plugin that is based of Guillermo Rauch plugins for mootools and Ganesh Mawwaha’s jQuery 1.1.x plugins. Through the Sliding Doors CSS/Javascript method, you are able to add a background hover effect on HTML link lists with Lavalamp by utilizing the Eazing library. 2. Superfish Menus – Suckerfish on ‘roids, This jQuery plugin allows the development of improved Suckerfish style of dropdown menus from the existing pure CSS type of dropdown menu. The features that are added as a result of these include: a timed-delay on mouseout, automatic utilization of hoverIntent plugin when present; obligatory IE6 –hover capability; animated sub-menu; accessibility through keyboard tab key; generation of arrows to indicate the submenus; use of drop shadows for browsers that are capable; and many others. 3. jQuery Context Menu – This jQuery plugin provides easy implementation, CSS styling, keyboard shortcuts and control methods. 4. Kwicks for jQuery – This highly versatile and customizable widget had started as just a port for Mootools framework. 5. jQuery iPod-style Drilldown Menu – jQuery has an iPod-style drilldown menu that helps users traverse hierarchical data with relative ease and control. This feature is very useful in organizing large data structures that don’t translate well into the traditional fly-out or dropdown menus. 6. jQuery File Tree – This jQuery plugin is a configurable AJAX file-browser plugin where you use to create a fully interactive and customized file tree as little as one of the Javascript code. 7. Recreate Mootools Home Page-Inspired Navigation Effect – Users of jQuery can recreate the same effects that you see in a Mootools. 8. CSS Sprites2 using jQuery – One can use jQuery to implement CSS Sprites2. One distinct advantage of jQuery over the other javascript libraries is that it allows users to select elements on a pages using CSS-like syntax that we are already familiar with. 9. jQuery Accordion – It is the jQuery plugin that allows the creation of the accordion menu. It can be used for nested lists, nested divs and definition lists. This plugin has options for structure specification, active element, when necessary, and animation customization. IMAGE MANIPULATION 10. jQZoom – It is the jQuery plugin that easily allows the creation a small magnifier window near an image or group of images on the web page. You decide to build jQZoom to embed big images in your B2B. This creates the jQZoom in your eCommerce websites or any other websites. 11. jCrop – This jQuery plugin allows an easy and quick way of adding image-cropping functionality to web application. This functionality combines the use of typical plug in with a powerful cross-platform DHTML cropping engine that is compatible to common desktop graphics applications. 12. Captify 1.1.0 – It is a jQuery plugin that creates short and beautiful image captions that appear every time a user’s mouse passes over an image. IMAGE GALLERIES AND VIEWERS 13. Simple Controls Gallery – This jQuery tools displays and rotates images by fading it into view over the previous images using navigation controls that pop up when the mouse moves over the gallery. 14. Agile Carousel – It is a jQuery plugin that provides for the easy creation of a custom carousel. This plugin makes use of PHP to call images from the folder that is specified by the user. Users can configure different options including slide timer length, controls, transition type, easing type and more. TRANSITION EFFECTS 15. InnerFade – It is a small jQuery plugin used in the jQuery Javascript Library. This plugin allows using fade effects on any element found...
Read MoreFeed Icons Collection You Will Never Miss – Part 2
I promised to provide more quality feed button designs for you and here is part 2 of the list. Will there be part 3 coming up? I don’t know. But I’ll constantly look out for the best feed icon designs for you. Remember to bookmark this page and hope you’ll appreciate my effort by sharing it via Digg, Delicious, Stumbleupon, Technorati and Twitter. Vector 3-D Feed Icon Feedicons Offer standard RSS Icons in many image formats including PSD ZeusboxStudio Feedicon -2 Human Feed Icon Grunge Feed Buttons Circle Feed Icon Vector Feed Icons Orange Feed Icons Vector Translucent 3-D Feed Button 3 D Side Feed Buttons Green Horse Feed Icon Alien Feed Button Exclamation Mark Feed Buttons High Quality Feed Icon from Rssicons.ru Robot Feed Button Design Sexy Girl Feed Icon Feed Icon Design Set More Feed Icon Set Magnifying Glass Feed Icon Rhombus Feed Logo Design Another Rhombus Feed Button Feed Sketching Logo More Sign Feed Icon Designs Money Feed Button 3D Feed Button Design Another 3D Button Glittering Feed Button Designs Animated Feed Icons More Animated Feed Icons Animated Feed Button Feed Icon with Clip Life Feed Logo No Border Feed Logo Feed Icon Ball Design More Feed Icon Balls More Feed Icon Balls Feed Button Pin Electronic Feed Button 3D Color Feed Button Designs More 3D Color Buttons 6 Corners Feed Icons Design Non-Conventional Feed Design Jeans Feed Icon Sunflower Feed Icon Drink Feed Icon Feed Icon Pack Tiger Feed Button Paper Feed Buttons Not Getting enough of this? Click here for the Part 1 of the RSS Icon...
Read MorePro Black
Latest Version: 3.00 Updated on: 2015/04/15 This is the first theme with black background that I have ever created. The Pro Black theme is also one of my few themes that is not image heavy. Compare to my other themes, the Pro Black theme lacks personality but gains professional look. Click on the “Free Download” link above to get the theme now! By using this theme for FREE, you agree to accept the external links. Gain access to the fully layered Photoshop file for quick and easy tweakage. PSD files included for both the main and the sub themes. Ad-Free PackageRemoving the credit links will make the theme to not function properly. Unencrypted main and sub theme files can be purchased at $20. Theme CustomizationDo you want to customize this theme to include images that suit your blog's topic? I can help you with the graphical customization. For more details, please visit the theme customization service page. Color Schemes The Pro Black theme comes with 3 color schemes below: To activate your desired color scheme, follow 2 simple steps below: Step 1 Go to the theme Options page in WP admin => Appearance => Pro Black Step 2 Under “Theme Style”, select your color scheme in brown, green or blue. Main Features – Free forum support. visit Pro Black forum – 3 different color schemes – User-friendly Options page – Drop-Down Menu – Automatic Thumbnails – Different design for sticky post feature – Compatible with IE7, IE8, Firefox, Chrome, Safari, Opera – W3C XHTML and CSS compliant – SEO ready – Gravatar enable Translation Help Needed This is my first theme that allows localization. If you wish to translate this theme into your own language, you can do so with the use of the Poedit program. To find out how this works, please refer to this comprehensive guide. When you have completed the localization, kindly send me the translated files so I can share your work (with your credit) with other users. Automatic Thumbnails Please refer to this page for the details of how the automatic thumbnails work. Drop-down Menu The Pro Black theme has a multi-level drop-down menu that is using the latest function in WP 3.0. There are two ways to create the drop-down menu. 1) When you create hierarchical pages, the drop-down menu will show up automatically in the header navigation. 2) You can manually define the header links using the custom menu. To do it, first, click on the “Menus” link found under the “Appearance” tab in WP admin. Then follow the instruction on the page to add your custom menu. This feature only works with WP 3+. Plugin There is a featured content section below the header link. This feature is built in using the Featured Content Gallery (FCG) plugin. Please download the latest version and follow the instruction found in “Readme.txt” to do the setup. If you do not want to show this feature, just don’t install the plugin. Blog Title and Description The demo is showing a special font as below: By default, after you install the theme, the blog title and description are showing the Arial font. You can change the font style by following this instruction: Part 1: Modifying Font Style – Download this PSD zip file (also included the font that I use) – Extract and open the PSD file in the Photoshop/ImageReady/Gimp/PaintShop program – Change the title and description using your desired font (you are free to modify the header image if you want) – Save the image using this name: bg_header.jpg – Upload the image to your...
Read More
