In part ONE we presented the first 10 in a collection of 20 great HTML5 and CSS3 tutorials.  Everyone agrees that tutorials are the best way to learn something new and stay up to date with the latest changes in the industry, so we have compiled a list of can’t miss tutorials. Let us know if you think we forgot a cool tutorial!

How to Create an Upload Form using jQuery, CSS3 and HTML5

An HTML5 Slideshow w/ Canvas & jQuery

Learn CreateJS by Building an HTML5 Pong Game

How To Create a Pure CSS Dropdown Menu

What You Need To Know About The HTML5 Slider Element

HTML5 Tutorial: How to Build a Single Product Page

Create HTML5 audio visualizations

Full CSS3 HTML5 Contact Form with No Images

Create Your Portfolio Gallery Using HTML5 Canvas

Create an HTML5 Canvas Tile Swapping Puzzle

The post 10 Can’t Miss HTML5 and CSS3 Tutorials – Part 2 appeared first on Design Reviver - Web Design Blog.

Welcome to our new series Photoshop 101.

Each post will feature a new photoshop tutorial. This week we will focus on Layer Masking ability and what it can do to your designs, inspiration and work flow.

For every beginner working with Photoshop it can at first seem quite daunting. However, this doesn’t have to be the case. Photoshop is one of the most powerful pixel pushing tools you can ever put your hands on. The tools available is more then enough for anyone to be able to create, modify and transform whatever you want into anything you can think of.

Layer masks can be found in software’s like Illustrator and Flash to name a couple but it’s really in Photoshop that you can really utilize its full power and technique.

Situations where you would be using Layer Masks instead of altering your images is everything from simple content management and interface design where you want to hide or manage a constructive design or a complex compilations where you don’t want to destroy, alter or delete parts of the images you are working with.

In this article we’re going to take a closer look at one example where we’ll be using Layer Masking to create a compilation of images in a really simple and effective way.

Tutorial

Let’s start by creating a work area measuring: Width: 300 and Height: 300 and set the background color to Black (#000000).

Create a new layer on top of the background layer and name it ”Orb”. In the new layer and in the middle of the work area create a circle measuring Width: 200 and Height: 200 using the ”Elliptical Marquee Tool”. Fill it with a Dark Purple color (#8600AC) using the “Paint Bucket Tool“.

Let’s go ahead and add some orb looking effect to the circle we’ve just created. With the ”Orb” layer selected right click the layer and select ”Blending Options…”

In the list to your left select ”Bevel and Emboss” and enter the following settings:

Alright, so we now have an orb that we can now start to work with. Before we start adding gloss and glow details to our orb we are going to use ”Layer Masking” to create some lightning/electricity rods inside the orb for a much more unique effect.

Create a new layer and call it ”Lightning”. Choose the ”Brush Tool” and select the ”Fuzzball” brush in the list at the top of the screen. Also make it size ”340 px” so that we get a good sized lightning effect.

**If you don’t have the Fuzzball brush you can download it here.**

In the newly created ”Lightning” layer put the ”Fuzzball” imprint at the top of our ”Orb” using the color White (#FFFFFF). Don’t worry about the streaks outside the ”Orb”. This is what we will be using ”Layer Masking” for in the next step.

After adding the ”Fuzzball” and before we’ve converted the layer into a ”Mask” layer you should have something looking like this:

Now right click the ”Lightning” layer and select ”Create Clipping Mask”. As you can see the layer now hides whatever is outside of the circle underneath it. We will now be able to move around our ”Lightning” layer to adjust it to the ”Orb” without having to delete, alter or damage any of the content in the layer.

Move the ”Lightning” layer around until you feel satisfied with the location of it at the top of the ”Orb”. After aligning it you should now have something looking like this:

As you can see masking has a huge advantage over altering your image. This way you can always be sure that your image is preserved even though everything is not showing.

To wrap it up, let’s add some gloss and glow to the orb just to make it a little bit more advanced.

Create a new layer above all the other layers and name it ”Gloss”. In the new layer and at the top of the orb create an oval circle measuring Width: 110 and Height: 70 using the ”Elliptical Marquee Tool” and fill it using the ”Gradient Tool”. Use the color White (#FFFFFF) and make sure you have the gradient selected to ”Foreground to Transparent” in the menu at the top of the screen.

We should also go ahead and add an effect making our orb look somewhat transparent and we can accomplish that by adding another oval circle to the bottom of the orb.

Create a new layer above the ”Gloss” layer and call it ”Bottom Gloss”. Again using the ”Elliptical Marquee Tool” go ahead and create an oval circle slightly above the bottom with the measures Width: 60 and Height: 30. Fill it using the ”Gradient Tool” again with the White color and the ”Foreground to Transparent” setting. We need to set the ”Opacity” of this smaller circle so go ahead and change it to ”40%”.

We also need to create a kind of a ”Surface” to the orb making it look like it is made out of glass. We can achieve this by adding yet another layer with some glossy features.

Create a new layer above the ”Gloss” layer and call it ”Glass”. In the new layer create a circle measuring Width: 200 and Height: 200 (the exact size of our orb) using the ”Elliptical Marquee Tool”.

With the selection still active, hold down the ”ALT” key and deselect 2/3 of the top of the selection. You should end up with a selection looking something like this:

Fill the selection you now have with the same ”Gradient Tool” and the color White, just like we did when we added the Gloss to the orb. This time begin from the bottom just like you did with the smaller oval circle at the bottom of the orb. We need to change the ”Opacity” of this layer as well so go ahead and change it to ”25%”.

Now we have a slightly glossy transparent surface of the orb and to top it off we can just go ahead and add some glow to it as well.

Select the ”Orb” layer and right click it. Choose ”Blending Options…” and then choose ”Outer Glow” in the menu to the left. With it selected insert these settings:

After adding it and after you’ve gone ahead and fine tuned your settings you should now have something looking like this:

There! Well, as you can see the Masking is pretty powerful and it makes for a great time saver. Instead of altering your images you can go ahead and just add masking and move around your images within those masking layers until you are completely satisfied and have the look that you are after.

I hope you have enjoyed this tutorial on how to use some of the tools in Photoshop especially the “Masking” feature.

The post Photoshop 101 – How to Work with Layer Masks – From Beginner to Pro appeared first on Design Reviver - Web Design Blog.

Today and next Wednesday we will be presenting a collection of 20 great HTML5 and CSS3 tutorials, 10 each week. Everyone agrees that tutorials are the best way to learn something new and stay up to date with the latest changes in the industry, so we have compiled a list of can’t miss tutorials. Let us know if you think we forgot a cool tutorial!

Design & Code a Cool iPhone App Website in HTML5

Orman Clark’s Vertical Navigation Menu: The CSS3 Version

How To Build a Handwritten Letter Style Contact Form

An HTML5 Slideshow w/ Canvas & jQuery

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements

Apple-like Login Form with CSS 3D Transforms

How to Create an Image Slider using jQuery and CSS3

HTML5 Clocks Tutorial

Circle Hover Effects with CSS Transitions

Creative Web Typography Styles

The post 10 Can’t Miss HTML5 and CSS3 Tutorials – Part 1 appeared first on Design Reviver - Web Design Blog.

The week is coming to an end and that means it is time for us to look back on the week that passed, the best design news, resources and other goodies. This week we look at how you can use any font with CSS3, how you can have multiple backgrounds, why not all websites look the same in all browsers, as well as how you can add your website to the iOS home screen. 

How to use any font you like with CSS3

Custom fonts are among the most potentially appealing aspects of CSS3 for designers. With the font-face rule, you can render any font you have online within your web page text, regardless of whether the user has it installed or not. As with most CSS3 techniques, the basic code is pretty simple, but the practical reality is a little more complex. In this short tutorial, we will run through the basics of including custom fonts in your pages.

Build a basic responsive site with CSS

This article first appeared in issue 231 of .net magazine – the world’s best-selling magazine for web designers and developers. Everyone’s talking about responsive web design. But does everyone understand what it’s for? I’m not sure. Many web designers and developers seem to me to have misunderstood the problem it’s trying to solve. Put simply, it’s not about making sites for mobile devices, it’s about adapting layouts to viewport sizes.

Multiple Backgrounds with CSS3

Adding background image with CSS is nothing new, this feature has been there since its inception. But we were limited to only add one image in one declaration block. Now, CSS3 is raising the stakes by proiding you the option of adding multiple backgrounds.

Why some websites don’t work properly in your favorite browser

It never fails: No matter which browser you use, and how well you keep up with its updates, sooner or later you end up finding a website that doesn’t quite work the right way. Even more frustratingly, bugs and defects always seem to crop up more often on sites that tend to push the limits of what can be done with a browser, with activities like printing, interactivity, and complex animations frequent targets of malfunctions and misfirings.

15 Awesome Infinite Scrolling jQuery Plugins

In this post, we are sharing with you a jQuery scrolling plugin collection that can help you implement endless scrolling system on your website. Most of these infinite scrolling scripts are free, but I also added a premium product. If you have more infinite scrolling jQuery plugins we could add, please give us a link in a comment. We will also be happy to hear your opinion about this article and about infinite scrolling in general. Enjoy!

10 brilliant examples of responsive design in ecommerce

There is no longer a debate over whether online retailers need a mobile site, as consumer demand dictates that brands need to optimised for small screens. However there are still several different options facing brands that want to create a mobile optimised site. Responsive design is seen by many as being the future of web design, and we previously looked at 11 gorgeous examples of the technology and asked several experts whether site owners need to adopt it. But the examples we’ve seen suggest that responsive design is currently more popular among design agencies and artists, while major ecommerce retailers have been slow on the uptake. So to show how responsive design can be applied in retail, here are 10 examples of ecommerce sites built using responsive design.

The importance of proper site structure and organization

The structure and organization of your site is so important and it doesn’t get as much attention as things like copywriting and link building (don’t get me wrong, those are crucial, I just think we need to look at the structure too, we don’t want it feeling left out!)If you haven’t recently evaluated the structure of your site, now is a good time to do that.

10 CSS3 Pricing Tables For Professional Websites

CSS3 is the latest version of this amazing stylish language called Cascading Style Sheet. In this post you will find the perfect solution for placing pricing tables on your websites with style of CSS3. This post features the best 10 CSS3 Pricing Tables for professional websites. All the pricing tables are professional and created by the best designers of the world. Do share this post with your friends to help us spread the word.

Top Web Apps for Web Designers

Whether you are a freelance web designer, or have a position with a company, having some help never hurt. There are tons of apps on the web that can help web designers learn new techniques, design, and coding. Using these apps you will be able create a stunning web design without a problem.

Quick Tip: Give Your Website an iOS Home Screen Icon

With more mobile web users than ever, it’s important to keep your branding strong. Let’s go one step further than the standard favicon and help your website stand out by creating icons for use on iOS and Android home screens.

The post Weekly News Roundup – 11 January 2013 appeared first on Design Reviver.

The week is coming to an end and that means it is time for us to look back on the week that passed, the best design news, resources and other goodies. This week we look at 30 Stunning User Interface examples, how you can provide unique value to your clients, 9 pitfalls of of web hosting and how to avoid them, furthermore we take a look at how you can make your website more tablet friendly as well as great ways to use the website footer.

30 Stunning User Interface Examples

User interface is extremely important for any type of application because without an intuitive design, the user will probably try to find an alternative to that app. The success of web applications and websites depends in how effective the user interface design is. Designing a good user interface however is a very challenging task. According to Apple, a great application has the focus on content. Simply, it must be realistic and must take full advantage of device capabilities to enable enhanced interaction. A user interface that is unattractive, convoluted, or illogical can make even a great application seem like a chore to use, so when you design the UI, you must have in mind how your users think, act and work. In this article you can see 30 gorgeous examples of user interface design for various types of applications.

6 Easy Ways to Make Your Website Tablet Friendly

There are nearly 70 million tablet users in the U.S. alone, a figure that has doubled from the year before. This means that nearly 30% of the country’s Internet users are browsing on a tablet device. Tablet traffic to e-commerce sites grew by 348% from 2011 to 2012, overtaking smartphone traffic for the first time. With the tablet market as young as it is, its footprint is only going to expand. This trend sends a strong message: If you haven’t already, now is the time to prioritize your website’s design considerations for tablet functionality. Ignoring this could negatively impact your website’s overall conversion rate, return visits, sales and more.

21 Inspiring Examples of Illustrated Elements in Web Design

For our last web design inspiration list of 2012 we decided to gather examples of beautiful illustrated elements in web design. We believe that illustrated elements can give a nice touch and personality to a design. From subtle illustrated details to complete colorful sketched pages, the key is finding the right amount to use for each project. So today we have several different approaches on how to incorporate illustrated elements in a website. Enjoy!

The device-agnostic approach to responsive design

Techniques, technology and terminology change constantly in web design, and keeping up with them is crucial to your success in online design and development. Device-agnostic and responsive design are two of the current hot terms being bandied around in technology circles, and often in the same sentence. With the increasing use of a wide variety of internet-enabled mobile devices, web designers and developers are encouraged to keep work responsive; adapting content and design elements to the limitations of whichever device is being used. However, labelling responsive design as a technique using the device agnostic approach is a tricky business. What exactly is the device-agnostic approach, and is it even necessary to identify it as an approach to responsive design?

3 Ways Designers Can Provide Unique Value To Clients

If you’ve ever purchased organic food from a grocery store or farmer’s market, you know that it can be, well, pricey. Some people report as much as a 300% increase in their grocery bill when they buy organic versions of their regular groceries. And is it worth it? Staunch fans of organic living claim that it is.

38 Modern List Styles in Website Designs

I want to use this showcase as a peek into modern list styles and design trends. Web designers can be found all around the world who have been studying the creating the newest market trends. These designers are the molders and shapers of our future design community. It is exciting to see how these ideas take shape and form into larger archetypes over time.

9 Web Hosting Pitfalls and How to Avoid Them

If you’re ready to move off Blogge and onto a web hosting service, you’ve probably got a lot of other things on your plate as well. The world of web hosting can be complex and confusing, but we’re looking out for you.  We know you want a simple solution tailored to your needs, and with great support services. We all do. But great web hosting is really different for every client. We’ve done the research and found nine scenarios that are either red flags, or should be avoided altogether.

16 great examples of website footer design

When starting any website project, it’s natural to want to concentrate your design efforts on the homepage and the header. As a result, the footer often becomes an afterthought – relegated to a poorly designed dumping ground for copyright information, legal disclaimers and spammy SEO links. But it shouldn’t be this way.

Workless: A Clean & Classy HTML5, CSS3 Framework

Workless is a clean & classy HTML5, CSS3 framework that helps you to get your project up and running as fast as possible and helps prevent repetitive tasks. It standardizes CSS, improves usability and interaction, sets base typography to help vertical rhythm and readability and adds helper classes to style elements easily. You can either start with the base setup, or drop the files and assets into your current project and simply reference the CSS and Javascript files in your source. Once you’ve done this you can then begin adding your own application specific CSS.

Creating WordPress Themes That Sell – 5 Guidelines You Should Know

Considering the fact that WordPress is the most popular Content Management System out there and serves many users, it’s no wonder that developers feel encouraged and motivated to create themes for WordPress. After all, the gigantic size of the WordPress’ user base simply means that themes created for WordPress are likely to be used by many people, thereby giving developers good returns for their hard work.

The post Weekly News Roundup – 4 January 2013 appeared first on Design Reviver.

Photo Manipulation is an art which makes a photo totally different and amazing. Most graphic designers love to do photo manipulation. And whenever we talk about photo editing or manipulation, the first thing which comes in our mind is Photoshop. Yeah, Photoshop is the best software for photo manipulation. It has lots of incredible features which are very tough to learn and tougher to be mastered. But you don’t need to worry for that because there are lots of amazing tutorials about photo manipulation on net. And you can easily enhance your techniques in photo manipulation.

These tutorials are most wanted and full of creativity. After learning these, you can use your creativity and can make something extraordinary and different.

(...)
Read the rest of 49 Most Wanted Photo Manipulation Tutorials in Photoshop for the download links!

© 2007 - 2012 Web Design Blog, 2012. | Permalink | No comment
Post tags: image editing, manipulation, Photo, tutorial

The post 49 Most Wanted Photo Manipulation Tutorials in Photoshop appeared first on Web Design Blog.

It doesn’t matter whether you are a seasoned Photoshop pro or a novice, there are two things both levels have in common – a passion for learning new techniques and a huge desire to improve their skills. And as far as Photoshop tutorials go, text effects are one of the most popular techniques designers choose to follow, and in this round-up we have chosen five in which we are sure you will love.

Create a Retro Sci-Fi Movie Poster in Photoshop

If you are a fan of of sci-fi movie art, then you will love this intermediate Photoshop tutorial.
Create a Retro Sci-Fi Movie Poster in Photoshop

Urban Type Art – Photoshop & Illustrator Tutorial

London is hip again, and in this tutorial Holland-based designer Bram Vanhaeren shows you how he created a new piece that draws on all that’s great about the city – taking inspiration from the Olympics, underground club scenes and the city vista from up high.
Urban Type Art – Photoshop & Illustrator Tutorial

Create a Cosmic Scene with Photoshop and Cinema 4D

In this Photoshop and Cineme 4D tutorial, you will be shown how to create a space composition, exploring techniques for creating 3D text in Cinema 4D, a glass effect in Photoshop and a slew of different light effects.
Create a Cosmic Scene with Photoshop and Cinema 4D

Create an Awesome 3D Text Effect with Abstract Brush Decoration in Photoshop

In the tutorial, you will shown the processes used to Create an Awesome 3D Text Effect with Abstract Brush Decoration in Photoshop. This is an intermediate tutorial so some steps can be tricky.
Create an Awesome 3D Text Effect with Abstract Brush Decoration in Photoshop

Make a 3D Colorful Abstract Text Effect

Make a 3D Colorful Abstract Text Effect

By Paul Andrew (Speckyboyand speckyboy@twitter).

Sometimes to get your development juices flowing you just need a meaty project or an in-depth tutorial that you can sink your teeth into and lose yourself for a few hours in coding bliss. And that’s what we have for you today, three tutorials that will satisfy your code craving! They are not only roll-up-your-sleeves and put-on-a-pot-of-coffee good but they will also introduce you to some of the latest CSS3, HTML5 and jQuery techniques.

A jQuery, CSS3 & HTML5 Hover-Based Interface

In this awesome tutorial you will learn how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. The project you’ll be creating could easily be used for a portfolio or business site and the concepts you’ll learn could certainly be used to expand the idea further.
A jQuery, CSS3 & HTML5 Hover-Based Interface

Dynamic FAQ Section w/ jQuery, YQL & Google Docs

In this tutorial, you will build a dynamic FAQ section. The script, with the help of jQuery & YQL, will pull the contents of a shared spreadsheet in your Google Docs account, and use the data to populate the FAQ section with questions and answers.
Dynamic FAQ Section w/ jQuery, YQL & Google Docs

How to easily create charts using jQuery and HTML5

For years, Flash was the only solution to display a dynamic chart on a website. But thanks to modern techniques, the dying Flash isn't needed anymore. In this tutorial,you'll be shown how easy it is to transform a basic HTML table into a profesionnal looking chart using visualize.js, a very useful jQuery plugin.
How to easily create charts using jQuery and HTML5

By Paul Andrew (Speckyboyand speckyboy@twitter).

There really is no limit to what can be achieved with jQuery. And when it is in the right hands those limits are challenged all the time, constantly pushing back its seemingly endless boundaries by developing fresh and creative techniques. In this design news round-up we have collected our favorite recent jQuery tutorials.

Super Ajax Polling/Voting System using JQuery, Ajax, PHP and MySQL

Super Ajax Polling/Voting System using JQuery, Ajax, PHP and MySQL →

jQuery Quickie: Slot Machine Style Navigation

jQuery Quickie: Slot Machine Style Navigation →

How To Create A Great Contact Form

How To Create A Great Contact Form →

Music Portfolio Template with HTML5 and jQuery

Music Portfolio Template with HTML5 and jQuery →

A Simple Movie Search App w/ jQuery UI

A Simple Movie Search App w/ jQuery UI →

By Paul Andrew (Speckyboyand speckyboy@twitter).