Archive for the ‘Tutorials’ Category
The use of slideshow imagery on a homepage design is very common. We have all seen magazines and blogs and companies which use photo slideshows to express ideas. And newer Internet startups are also very commonly found exhibiting these trends. But how can you build a simple yet effective slideshow for your own website?
In this tutorial I want to explain how we can use jQuery to setup a sliding photos panel. I am using the SlidesJS plugin which is completely free and open source. There are many different settings within the plugin options for display style and icons. Check out the documentation if you want to learn a bit more. Otherwise let’s delve right into the code!
Live Demo – Download Source Code
Getting Started
First we need to download a copy of Slides from the Github repo. You can also find a direct link on the plugin’s homepage. The internal files contain a smaller copy of jQuery but I have downloaded the latest version directly from their website. This jQuery library along with the jquery.slides.min.js script is all the JS we need to get everything running properly.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < !doctype html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Digital Page Slideshow Viewer Demo</title> </meta><meta name="author" content="Jake Rocheleau"> <link rel="shortcut icon" href="http://www.templatemonster.com/favicon.ico"> </link><link rel="icon" href="http://www.templatemonster.com/favicon.ico"> </link><link rel="stylesheet" type="text/css" media="all" href="style.css"> </link><link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700"> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery.slides.min.js"></script> </link></meta></head> </html> |
When putting together a solid website layout there are a number of factors you need to consider. The header section above-the-fold is always a key portion of the webpage. Along with the common user navigation and basic typography styles. But the footer is an often overlooked area of your website which can add tremendous value to the user experience.
I want to present a few examples and ideas for building a usable footer interface. The modern day website layout is constantly changing and adapting to new trends in the market. This also means generating feedback from visitors and putting together an idea of what works, and also what doesn’t work. I cannot say that I have all the answers but I do hope to address many common ideas for laying a foundation of design precedents.
Easily Readable Links
A big concept in user experience is readability and obviously within hyperlinks. This idea should become an ingrained asset for all areas on the page. But obviously in the footer it will greatly affect how users traverse your link structure – regardless of how many links you have listed.
The footer design of GiftRocket has a clever swing to colors and design influence. Above the links you can find a list of companies which have written articles on GiftRocket. Then a follow-up section of related website links and popular cities. But even more interesting is how the links are split up by headline titles. You should notice a myriad of topics from user information to legal jargon. But the important piece is that all the text is legible.
Design trends please us with their variety. Just choose any you like and make the most of it. No boundaries for your creativity. But which one to choose…Well, let’s take Skeuomorphism, for example. This trend is not the newest one, still, it hasn’t lost its popularity and can be observed on multitude websites. Skeuomorphic elements are easy on the eyes and can add any design some habitual charm.
Still hesitate or just want to learn more about the trend? You are welcome to follow the link – a cool Interactive Infographic will help you clarify all its pros and cons.
And if you have nothing against and want to start your own skeuomorphic experience, let me offer you this tutorial which will show you how to create a leather header with navigational menu.
Final Result
This a starter-intermediate level tutorial that will show you some simple tricks which can lead you to the desired result. So, let’s start!
1. First of all, let’s create a new document with a size of 1071×263. The Background color is white.
2. Now we go to our tools and choose a rounded rectangle tool. Set the radius to 15px and create a rectangle similar to the following. The color is set to #f98909.
3. It is time to add some blending options to the layer. Right click the layer with the rounded rectangle and choose Blending Options and insert following:
Some website layouts will take advantage of a big header and use this to fit a logo design. Generally you can place text above or below banners or logo images. But for specific layouts we can actually design a single header bar with the navigation and logo items side-by-side.
In this tutorial I will demonstrate the CSS and HTML required to build a centered logo header design. The webpage body is fairly bland since we are focusing on the core header. But definitely check out my live demo example to get an idea of what we are trying to build. The best solution is to incorporate transparent PNG images for your logo design, which will provide no background and sits directly in the middle of navigation links.
Live Demo – Download Source Code
Helpful Resources
To begin I want to share a reference to the freebie PSD kit I will be using. This is called the Kitchy UI Kit and it is a free download on Blugraphic. The PSD includes a series of buttons, dropdowns, forms, and other helpful interface features. But more specifically we can find a rounded logo banner which would be perfect in our functional layout.
You do not need a full copy of the UI kit since my downloadable source code will have the logo cropped into a PNG. But if you want to check out their full set I definitely recommend it. There are lots of cool free items you may customize and setup with very little understanding of Adobe Photoshop.
These days not a single piece of design can live without Photoshop. Even the slightest banner ad or a creative userpic is worked on in creative suite. This software is extremely popular all over the world. And each day hundreds of people buy a licensed copy of Photoshop. So what to do after you’ve installed your copy? Rush around the menu and various effects? No way, you need to find some tutorials that will teach how to use it. Today we’ve prepared for you a Photoshop tutorial timed to St. Patrick’s Day.
Upon completed on the tutorial you will learn how to create stylish banner unencumbered with design elements within minimal amount of steps.
This is a starter-intermediate level tutorial that’s full of really useful tricks and techniques. We are going to show you how combining simple things you will create a cool artwork. You’ll need any Photoshop version.
***
Final result:
***
1. Create new layer Ctrl+N, and fill it with green color using the Basket Tool (G), also you need to rename it, either some of the following effects cannot be applied to the Background layer.
eCommerce is a lucrative yet a tricky business for online retailers. It offers better options for cross-selling and up-selling whereas on the other hand, it can drive you nuts with a variety of customer grievances. eCommerce web design must therefore be thoughtful of their customers of their preferences and about what will drive them to make purchases.
Let’s take a look at the 6 crucial elements to keep in mind for building reliable eCommerce web design:
Elaborate on Product Details
With an eCommerce site it becomes almost impossible to touch or feel the actual product. Online retailers must always provide descriptive yet interesting information about the product on their web pages. Offer competitive descriptions about the range, color, shape, size, weight and the value that the particular product can provide to its users. Though this sounds extra work for the product writers, there is a simple way to achieve this. Use product demos like videos or include 3D imagery to emphasize on the dimensions of the products especially for apparel.
Instead of one add four or five images of the same product with different colors, background or models. Offering multiple views will allow your customers to get a taste of the product beforehand. Put up 1024 x 768 pixels size images as smaller than this will withdraw user attention from your product.
It is a known fact that readers only scan through the web pages while looking for products. Thus make the descriptions more vivid by using better quality images and other graphics. Present your content in an active voice just like the way you would talk to your friends or colleagues. Do not over burden the page with unnecessary details like historical background of the product or an elaborate manufacturing process. It will simply bore your users to death! Use descriptive words rather than confusing adjectives. The best way is to place the information about several products in the form of a comparison chart. This will appear more professional and will be quick to scan through.
Eh? Security? Yes! All this fuss about WordPress security. Having a WordPress site is great, blogging at it makes you feel like you own an Empire. But somehow, it never remains safe when intruders get in. When they try to dethrone you. No matter what happens, you got to do what is necessary for your rule. This is a funny way to put our common life words in analogy with WordPress.
Securing your WordPress blog from the bad guys is the goal of every blogger these days. That is an issue with ultimate importance as well. But, most of the bloggers do it wrong way. They are not quite sure about choosing the best WordPress template or a plugin, where they end up with messed up blogging career with screwed up blog.
Certainly, leaving these issues behind is not an option for us anymore. So, getting to point, in this WordPress tutorial you will be learning a lot about WordPress security, how to DO IT YOURSELF and harden it to the core. Let’s kick in Yay? Nay?
Step#1 – LOG IN HACKS
Step #1 is all about how to save your blog from being hacked, by notorious login hacks.
Admin username is your doomsday
One should never have Admin or admin as the username of Administrator account. Change it while you install the WordPress. If you don’t change your username from Admin to anything else while installing, then there is a little trick that will do just good. Make a new user with different username and set its role as Administrator, then log out. Log in with the new user, you just created, go to Users >> All Users and delete the user Admin.
Some Plugins that help
In case of login hacks there are several plugins that help a lot.
With a lot of other stuff this plugin takes care of removing login notice.
I have seen a lot of great tutorials centered around building unique WordPress plugins. Unfortunately many of these ideas are fairly complicated or still require external PHP function calls. Also many of the simpler ideas can simply be copied into your theme functions which will save a lot of time.
But for this tutorial I want to focus on building a plugin using shortcodes. My example will be an e-mail contact form using CAPTCHA for spam protection. We simply install the plugin codes and then add the small shortcode tag [tmcontact] onto any page. This will instantly append the simple contact form into your WordPress content.
Building a Simple Template
When getting started we are going to make the plugin’s main directory which is called shortcodes-contact. Inside I have placed a CSS file, along with some images and a unique TTF font which is used in generating the CAPTCHA. All of these resources pertain specifically to this tutorial so you will not always need custom styles or images. But keep in mind that it is a good idea to store all these resources in your own folder, just in case.
Now we need to create the main plugin file which has the same name as its containing folder. This will be called shortcodes-contact.php and the very first lines of code must delineate some meta information. WordPress will scan the top comments and display this information on the plugin admin menu page. Here is my sample code:
1 2 3 4 5 6 7 8 9 | /*
Plugin Name: TM Shortcodes Contact Form
Plugin URI: http://blog.templatemonster.com/
Description: Basic WP plugin for adding a contact form using shortcodes in Wordpress. Original source from Template Monster Blog to be used in a demo tutorial.
Version: 1.0
Author: Jake Rocheleau
Author URI: http://byjakewithlove.com/
License: Free(no license)
*/ |
Computers have routed so deeply into our lives that every step we make is accompanied with some app, or any other electronic thing…even sticky notes are created on a desktop of your screen…duh. Some days ago I had to fill in the form…with a pen…but I found out that I forgot how to write. I guess I’m not the only one who has similar problem. Previous activities like writing are on the wayside, people don’t write they type…
These days similar thing happened to books, almost no one reads books made of paper, cause it’s much easier to read an eBook that costs mostly like a book cover, or comes free to download. But if we touch upon prices; eBooks are way cheaper than paper books, some eBook reader cost less than a whole paper book. Anyways buying eBook is much better, just think about all those trees cut to print your favorite Twilight series 
But if you are one of those old-school guys who still read paper books, has a subscription to the newspaper and runs a website…Maybe you’d want to give it more familiar and convenient form? Than you need to consider pageflip effect. This thing is from those skeuomorphic tricks that imitate well-known objects. In this case it’s the imitation of a book. Below you will find some tutorials, plugins and examples of pageflip effect. So let’s start with some plugins.
Plugins
jQuery pageflip plugins are ideal for websites with large amount of text and images. Instead of displaying all your text, links and images on a long boring page, you can make your presentation more interactive and animated with flip page effects.
1. WowBook
WowBook is jQuery plugin that allows you to create a online publication (like a book or magazine) with 2 different page flipping effects.
jQuery Flipbook Slider is a lightweight jQuery plugin for flipping pages effect. It can be used with any content: text, html, iframes, videos, flash (swf) etc. You can customize it easily with CSS (background images, font family and color etc.). The plugin can be used for albums, presentations, books and notepads.
Drawing in Photoshop is a favorite topic for many of people, as it can reveal all bright individuality of the “knight of the brush”.
If you do not own classic techniques of drawing with paint, coal, watercolor, oil or whatever people draw with – Photoshop can really help you. In this cool interface, with your own hands, you’ll be able to draw such a masterpiece that even Leonardo da Vinci will envy you. All you need is a good Photoshop tutorial.
Today we’ve prepared one for you, if you are just starting with Photoshop, it will definitely help you get acquainted with a basic set of tools. We are going to add extra elements to TemplateMonster logo, making it more lovable since St. Valentine’s Day is right around the corner. In 1997 Savage Garden wrote the song “I’ll be your dream, I’ll be your wish I’ll be your fantasy“…today, Photoshop can make it all come true-to-life, unfortunately only in digital space.
***
Tutorial
Level – starter![18 Steps to Falling in Love [St. Valentines Photoshop Tutorial]](http://blog.tmimgcdn.com/wp-content/uploads/2013/02/03.jpg?9d7bd4 "03"){kind=small}
Soon we’ll release another tutorial, a bit more complex, for you to develop good Photoshop skills.
![18 Steps to Falling in Love [St. Valentines Photoshop Tutorial]](http://blog.tmimgcdn.com/wp-content/uploads/2013/02/01.jpg?9d7bd4 "01")
Here is an image of TemplateMonster’s logo. Today we’re going to make some slight customization of the mascot timed to St. Valentine’s Day. Click your Photoshop icon to start (to create this customization you can use any version of Photoshop).
1. The first step we are going to do is to wipe the pupils from the eyes of the Monster using the Eraser tool (E).
![18 Steps to Falling in Love [St. Valentines Photoshop Tutorial]](http://blog.tmimgcdn.com/wp-content/uploads/2013/02/02.jpg?9d7bd4 "02")
2. Time to download some hearts. Use google to find a volumetric heart, like the one you see below.
3. Create new layer (Ctrl+Shift+N) and paste the heart into. Use free transform tool (Ctrl+T) to resize it and place right where the eye’s pupil is supposed to be.
![18 Steps to Falling in Love [St. Valentines Photoshop Tutorial]](http://blog.tmimgcdn.com/wp-content/uploads/2013/02/04.jpg?9d7bd4 "04")
4. Duplicate previous layer with the heart and make it a bit smaller or larger or the same size, use free transform tool (Ctrl+T) and move tool (V).
Featured Templates
Advertisement
Follow TemplateMonster Updates
Rss Feed:Recent Comments
- Now a Days Its Most effective platform in mobile app...
- That’s correct! – by the way, Thanks Alex...
- Transfering @ 4kb/s ???
- But where are all these templates?? Do exist them? I’d like...
- Sure I would. Life is like a movie so why not a site? I bet...