10 Great Photoshop tutorials for WordPress themes

Apr 02
2013

Screen Shot 2013-04-01 at 7.58.39 PM

Wordpress has long been one of the most favored blogging platforms, our very own Design Reviver runs on WordPress. Every web designer knows that whether you are creating a mock up for a website or for a blog, Adobe Photoshop is the most used program. Today we have collected some of the best Photoshop tutorials for creating stunning WordPress themes.

How to create a unique WordPress theme

Screen Shot 2013-04-01 at 7.58.39 PM

How to create a WordPress theme in Photoshop

Screen Shot 2013-04-01 at 7.50.53 PM

How To Create WordPress Themes From Scratch Part 1

large

Minimal WordPress Theme Photoshop Tutorial

Screen Shot 2013-04-01 at 7.54.44 PM

How to build a custom WordPress theme

photoshop-mockup

Design a creative WordPress theme

image

 

How to Build a Custom WordPress Theme from Scratch

sticky

 

Create a Typography bases WordPress theme

typo-wordpress-theme-sm

 

Create an Elegant Photoshop (PSD) Template for WordPress

wordpress_photoshop_template

 

http://www.webdevtuts.net/photoshop/create-a-nice-clean-blog-layout-in-photoshop/

Corporate WordPress Style Layout

Screen Shot 2013-04-01 at 8.07.29 PM

The post 10 Great Photoshop tutorials for WordPress themes appeared first on Design Reviver - Web Design Blog.

Weekly News Roundup – 29 March 2013

Mar 29
2013

image
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 CSS and HTML tutorials, vintage and retro design, great globe logos and much more.

Practical Tips From Top WordPress Pros

Recently I shared with you some advice from the WordPress community to beginners. But what about if starting out is already a dim and distant memory? What if you’re already so immersed in the world of WordPress that you dream of trac and bore your partner with talk of the latest thing you’ve achieved with custom post types?image

Cool Globe Logo designs

Without further a due, we share to you 45 Cool Examples of Globe Logo Design that can help you sail to your vast imagination and maybe arrive at land of great ideas for your next project.


image

15 websites with vintage and retro design

Vintage and retro themes in web development are becoming extremely popular these days. However, this doesn’t suggest particularly complex elements in design. On the contrary a simple use of old black & white photos or some old fashioned music played in the background may do the trick. It will also make sense to play with a color palette and with its help add a retro feel to your design.

image

Awesome 3D Photoshop CS6 tutorials

Before the release of adobe Photoshop cs6, many designers have suffered from the 3d conception in the program, something that pushes adobe improve these functionalities in its latest version, they have made a handful of tweaks that will significantly improve your workflow and enhance your tool set. Theses new features include a way to generate bump map textures from flat artwork, smoother previewing of soft shadows and more. Fortunately, there are already a number of online tutorials that will help you to learn more about 3d features. Today, we will take you through some of the exciting Photoshop CS6 tutorials that illustrate how to use these brand new tools to create amazing 3D effects.

image

20 Free business HTML and CSS Templates

Business templates are commonly used for business/company related websites as they are quite decent, minimalistic and chic. The Free Business HTML/CSS Templates.

image

15 Great CSS Tutorials

15 of the best hand picked CSS tutorials for you to get your hands dirty.

image

AngelHack announces worldwide hackathon

AngelHack, the organiser of “largest hackathon startup competition”, has announced the project has “just got bigger”. The next AngelHack kicks off in a month’s time, with events on April 27 and 28, in both Los Angeles and London. Global events will continue until mid-June in destinations including Paris, Moscow, Sydney, Seoul, Guadalajara, Santiago and many other cities.

image

Getting started with Edge Animate

In this tutorial, we’ll be getting started with Adobe’s new animation tool, Adobe Edge Animate. Edge Animate harnesses the power of HTML5 animation, and allows the user to create dynamic, exciting web-based animations in a quick, easy and fun way, using a user-friendly timeline-based interface as opposed to blocks of daunting code.

image

5 simple tips to SEO optimize WordPress

WordPress themes are a terrific solution for clients with smaller budgets. They give these clients the ability to make ongoing changes to their site using the #1 CMS in the world. They give you, the developer, the ability to deliver a website that looks great and has a quality user experience at a budget price point. Everybody wins. But what if you could deliver even more value to these clients? You can by doing some simple SEO optimization of the theme you customize and develop for your client. Here are 5 simple steps you can take to optimize any WordPress theme template.

image

The post Weekly News Roundup – 29 March 2013 appeared first on Design Reviver - Web Design Blog.

20 Great fonts you should have in your collection.

Mar 20
2013

Screen Shot 2013-03-20 at 10.43.28 AM

Every good web designer knows that if there is one thing you can never have enough of then it’s Fonts! As some of you might know we are great fans of different wonky fonts, therefore we have collected 20 of the most interesting fonts currerntly available on the internet. Most of these fonts are free, however a few of them are for personal use only, with the option of purchase for professional use.

Redwood Creek

Screen Shot 2013-03-20 at 10.04.18 AM

Simple Print

Screen Shot 2013-03-20 at 10.08.25 AM

Chopin Script

Screen Shot 2013-03-20 at 10.11.51 AM

Angry Birds

Screen Shot 2013-03-20 at 10.20.34 AM

Optimus Princeps

Screen Shot 2013-03-20 at 10.12.06 AM

Waltograph

Screen Shot 2013-03-20 at 10.13.54 AMScreen Shot 2013-03-20 at 10.14.05 AM

Champagne & Limousines

Screen Shot 2013-03-20 at 10.12.20 AM

Pacifico

Screen Shot 2013-03-20 at 10.16.29 AM

Frankentype

Screen Shot 2013-03-20 at 10.17.58 AM

Flesh Wound

Screen Shot 2013-03-20 at 10.22.04 AM

Intaglio

Screen Shot 2013-03-20 at 10.23.54 AM

Prism

Screen Shot 2013-03-20 at 10.28.48 AM

CF I want to believe

Screen Shot 2013-03-20 at 10.30.38 AM

Abracadabrahocusspokuz

Screen Shot 2013-03-20 at 10.32.02 AM

 

Tartlers End

Screen Shot 2013-03-20 at 10.29.39 AM

Warpai

Screen Shot 2013-03-20 at 10.33.08 AM

Coburn

Screen Shot 2013-03-20 at 10.27.39 AM

Stripes

Screen Shot 2013-03-20 at 10.36.22 AM

CF Jack Story

Screen Shot 2013-03-20 at 10.36.36 AM

Crash Crash

Screen Shot 2013-03-20 at 10.36.48 AM

 

 

The post 20 Great fonts you should have in your collection. appeared first on Design Reviver - Web Design Blog.

Weekly News Roundup – 15 March 2013

Mar 15
2013

Timberland-Women

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 CSS3 and HTML5 tutorials, what journalists need to know about web design, jQuery mobile for beginners, as well as great examples of typeface combinations in web design.


30 Really Useful HTML5 Tutorials

Almost everybody is talking about latest enhancement in web industry. Yes, it’s HTML5 and CSS3. Really these languages expanded the possibilities of web design. There are lots of web designer s and developers who have started using HTML5 into their designs. Here we’ve rounded up 30 really useful HTML5 tutorials that will definitely help.

html5-tutorial-18

Vexing Viewports · An A List Apart Article

“The Web is Agreement.” Jeremy Keith’s eloquent statement neatly summarizes the balance that makes it possible for us to build amazing things. Each week, new devices appear with varying screen sizes, pixel densities, input types, and more. As developers and designers, we agree to use standards to mark up, style, and program what we create.

1_ipad-vs-mini_540

What journalists need to know about Web design

Fifty milliseconds. That’s how quickly visitors can form strong, long-lasting impressions about your news or information website. But they aren’t sizing up the quality of your content or the sophistication of your code. They’re making nearly instantaneous, mostly subconscious judgments about how your work has been designed.

verge-1024x610

50 Helpful Typography Tools And Resources

We love beautiful typography, and we appreciate the efforts of designers who come up with great typographic techniques and tools or who just share their knowledge with fellow designers. We are always looking for such resources. We compile them, carefully select the best ones and then prepare them for our round-ups.

typography-119

25 Web development resources to help you create better websites

As a developer I am always on the hunt for time saving resources, anything that can save me just a few minutes of time is a great help in an already hectic schedule. Compiled here is a list of 25 resources that are bound to make your life a little bit easier

Screen-Shot-2013-03-11-at-10.36.56-AM

Top 10 Free Online Tools for Creative Minds

In case you missed it, WordPress release 3.4 included a very exciting new development: the Theme Customizer. This allows users to tweak theme settings using a WYSIWYG interface and customize the theme so it includes the colors, fonts, text — and pretty much anything else — they want.

themes_screen_showing_customiser

50+ Examples Of Drawings and Illustrations in Web Design

For a quite some time, web designers have used hand drawn illustrations and typography to give websites a non-digital look and feel and a more human touch. Right now, however, there is a strong web design trend coming with focus on keeping interface design minimalistic and flat.

justdot_thumb2

A Complete Guide of jQuery Mobile for Beginners

There’s no doubt about it. Wherever developers look and whoever they talk to, mobile is at the top of the list. Talk to a C-level executive, and the conversation turns to mobile, and the question “How do I get me some of that?” comes up. Talk to other developers, and they tell you they’re targeting mobile devices. Mobile has become a big deal as smartphones have taken hold in the consumer marketplace.

jquery-mobile

10 Superb CSS3 Tutorials for Awesome Design

Many designers all over the world believe that CSS3 is a technique which has unbelievable potential which will in the future be used to create wonderful designed websites. At present, it is not being used variedly all over the world due to a number of limitations – obsolete browsers being one of them. In this post we’ve collected 10 Superb CSS3 Tutorials for Awesome Design, this can be proficiently functioned using markup, HTML, and some improved properties of CSS3.

CSS3-Animated-Bubble-Buttons

40 Best Typeface Combinations in Web Design

When it comes to prints or Web Design, typography is one of the most important part. So selectng the right type of typography for your web design is one of the most crucial part. Keeping the small textured detail in mind while designing a website can sometimes be enough to get amazing results.


Timberland-Women

Providing responsive images with Drupal

In this tutorial, we’ll be solving this problem four times, thanks to the latest version of the Drupal CMS, 7, and its vast, user contributed module library. We’ll be looking at the adaptive image module, the adaptive image styles module, the client-side adaptive image module and, finally, the responsive images and styles module. These represent great solutions to optimising your Drupal website for bandwidth starved mobile devices; all modules used employ the techniques listed above.

net232devdrupal

 

The post Weekly News Roundup – 15 March 2013 appeared first on Design Reviver - Web Design Blog.

Weekly News Roundup – 8 March 2013

Mar 08
2013

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 jQuery plugins, how best to create a responsive design, the worst UX mistakes made, we take a look at the new Facebook design, and offer 30 free fonts.

 

How To Design Effective Website Wireframes

Website wireframes are basic illustrations of the structure and components of a web page. This is generally the first step in the web design process also known as a page flow or website blueprint. It is also a guide that represents the skeletal framework of a website.

wireframe_not_sketch-1024x425

16 CSS3 & HTML5 Tutorials For Responsive Web Design

Responsive design is one of the most useful web techniques to appear during the past few years. A website layout can adapt to a device’s screen and look beautiful no matter what resolution is used. So here are 15 awesome tutorials for building and enhancing a responsive web design with HTML5 and CSS3.

csstutsbsh-5

The Five Worst UX Mistakes Websites Make

The user experience of websites has improved by leaps and bounds over the years, but I still run into sites that make me ask, “What were they thinking?!” From a design perspective, it’s easy to get caught up in internal squabbles (“No, no, THIS is the content that has to be front and center”) or distracted by tools or methods (“I say we use lean UX on this project”).

website-mistakes-banner

15 Useful Websites For Testing Code Snippets

In this collection, we have collected 15 helpful websites for testing code snippets. These websites will be of great importance for the web developers as they constantly need to check and verify their codes in order to make sure that everything is working fine.

testingcodesnippets5

A Deep Dive Into Facebook’s News Feed Redesign

If you’ve been online today, you probably heard the news already: Facebook announced a completely redesigned News Feed, featuring larger images, a mobile-inspired design that’s consistent across devices, and specialized feeds focusing on music, photos, games, people you follow and all of your friends.

Zow4kBU1-730x364

Web Designer Tools – The Most Useful And Recent Ones

There was a time when most of the contracts that were for web designers were to create portfolio websites. Things have changed a little and although people are still asking for portfolios, they are also asking designers to create big and serious projects with complex functionality, multi-browser and multi-platform support and a lot of complicated functions incorporated.

groundwork_sidereel_com

10 magically meticulous design style guides

We’ll admit it – we’re heading into geek territory here. But we are self-confessed geeks, particularly when it comes to logo design, typography and pictograms. And that leads us to the meticulously regulated world of brand style manuals… A style manual, or style guide, is a set of standards for the design of documents, signage, and any other form of other brand identifier.

skype

Download the 30 Free Clean Fonts

Fonts are one of the most important elements for any design. It is one of the things that differentiate a bad design from a good design, or a good design for a brilliant design is the font used. A font has the ability to make or break the deal. Fonts have to suit the design properly, and enhance its look and feel. A font that is not suitable for the design would totally ruin its entire look and result in a tacky overall design.

free-clean-fonts-1

Five killer ways to use Mental Models

Understanding a website visitor’s thought process for how they uncover your content, and studying their reasons for doing things on your site, are wonderful ways to start out planning for its architecture. The main concept behind this type of study is called a Mental Model.

01

User Experience Design

“User Experience (abbreviated: UX) is the quality of experience a person has when interacting with a specific design. This can range from a specific artifact, such as a cup, toy or website, up to larger, integrated experiences such as a museum or an airport.”

jjg-elements-ux

Building A Better Responsive Website

Earlier this year, I was in the beginning stages of a redesign for our company’s website. We had already been planning to use a straightforward responsive approach to Web design, which is our preferred solution for multi-device support. After hearing some frank discussions at An Event Apart conference in Boston about the limitations and challenges of responsive Web design, I realized that our solution needed a bit of adjustment

phones-500

30 most useful jQuery plugins

It seems as if the internet is filled with hundreds, if not thousands of jQuery plugins, sometimes it can be a little hard to keep track of all the new plugins, and therefore we have decided to bring you some of our favorite plugins, here is a list of 30 must see plugins. They cover all areas such as Form & Validation Plugins, Plugins for Responsive Layouts, as well as Web Typography Plugins, Animation Plugins and all sorts of other plugins. Do you think we have forgotten any plugins? If so then feel free to share them in the comments section.

Screen-Shot-2013-03-04-at-10.32.32-AM

The post Weekly News Roundup – 8 March 2013 appeared first on Design Reviver - Web Design Blog.

20 Beautiful and Free PSD files

Mar 04
2013

There is nothing more important for a designer than having the tools they need to create a great looking website. For those of you unfamiliar with Dribbble it really is a great community, and go-to place if you need inspiration for a new design. Today we have compiled a list of 20 great psd files found on Dribbble. From icons to UI elements and menus, we have some nice files here to give your library a boost.

Mini Clouds Set

psdfiles13

Derailed Ui Set

psdfiles12

Bella UI

psdfiles10

Share Buttons

psdfiles07

Ui Elements

psdfiles05

Sticky Butterscotch UI Kit 

psdfiles02

Sliding Tags

psdfiles01

Communication Dropdown

psds12

Weather Pop-up

psds10

Light UI Kit (PSD)

psds09

Twitter UI

psds08

Quick Menu

psds07

Tooltips (PSD)

psds06

Upload Button (PSD)

psds05

Search Box

Screen Shot 2013-03-04 at 12.45.31 PM

Toolbar (PSD)

psds02

Search UI

psds01

Dropdown Menu UI

dropdown_menu_ui

Push Notification UI

push_notification_ui_-_dribbble_preview

Buttons, Lights & Shadows

buttons_-shadows-_-lights

 

 

The post 20 Beautiful and Free PSD files appeared first on Design Reviver - Web Design Blog.

Let’s take a look at Adobe Edge Reflow

Feb 20
2013

Throughout the past two years web designers have become more and more aware of the importance of responsive web design, in other words making their sites viewable on different devices, as well as at different resolutions, in other words whether you are on an iPad Mini or a MacBook Pro with Retina Display the site must work just as well. Last week was the first release of the public preview for Adobe’s latest Edge tool, Edge Reflow.

For those unfamiliar with the newest addition to the Adobe family, Edge Reflow is a tool specifically built around helping designers create responsive designs.

In our post about Web Design trends you can’t ignore in 2013, responsive design was the number ONE design trend you really can’t ignore.

That was the whole purpose behind Adobe creating Edge Reflow, through the layout of the program, designers are able to create a mockup for various layouts, whether they want to optimize their design for mobile devices or desktop computers the possibilities are endless.

You need to understand however that Edge Reflow isn’t supposed to be the end-to-end design solution. It is important to know that the program will not work as a one step solution, instead it is for those who wish to see  what the design will look like at various sizes and on different devices.

Features of Edge Reflow:

      • Flexible design approach
      • Edge Web Font integration
      • Visual media-query breakpoints
      • Multiple background layers
      • Multiple drop shadows
      • Border styles and customization
      • Fluid customizable grid system
      • Previewing your design

 

What makes Edge Reflow great is that users can preview what their design will look like in a browser, furthermore the CSS is extractable for future developments, you can then copy that code into Dreamweaver and continue working on it from there.

edge_reflow_feature_style

As Adobe product manager, Jacob Surber, says the aim behind Reflow is:

“to help designers design within the constraints of the web to communicate their intent, but not to tell developers how to build the site.” He then adds that that what Reflow generates “is not production code.” Reflow is a design tool, and it bridges the gap between raster image editors like Photoshop and bare code. It lets you design your site on a flexible grid, utilizing break points with CSS media queries.

edge_reflow_feature_preview

If you want to try Edge Reflow you need to be a Creative Cloud subscriber. While the Dreamweaver update does require a paid Creative Cloud subscription you can try Edge Reflow, Animate and Code for free.

The post Let’s take a look at Adobe Edge Reflow appeared first on Design Reviver - Web Design Blog.

10 Web Design Cheat Sheets You Can’t Live Without

Feb 18
2013

Every web designer knows that today it is almost impossible to create a website with just one program. Sometimes it can get a little confusing to remember which code goes with which language, furthermore sometimes you forget the shortcuts that make your life much easier. This is where cheat sheets come into handy. A cheat sheet is simply a printable reference or guide to a particular software package, language, framework, etc.

Here are 10 of my favorite cheat sheets.

HTML 5 Cheat Sheet

html5cheatsheets2

HTML5 Tags Cheat Sheet

Screen Shot 2013-02-18 at 11.11.46 AM

HTML 5 Visual Cheat Sheet

 Screen Shot 2013-02-18 at 11.12.46 AM

HTML5 id/class name cheat sheet

 Screen Shot 2013-02-18 at 11.13.49 AM

HTML5 Canvas Cheat Sheet

Screen Shot 2013-02-18 at 11.14.40 AM

 

HTML 5 Visual Cheat Sheet

html5cheatsheet

CSS CHEAT SHEET

Screen Shot 2013-02-18 at 11.16.28 AM

(X)HTML Elements and Attributes

Screen Shot 2013-02-18 at 11.17.02 AM

HTML5 Browser compatibility

Screen Shot 2013-02-18 at 11.17.41 AM

CSS3 Cheat Sheet

css3

The post 10 Web Design Cheat Sheets You Can’t Live Without appeared first on Design Reviver - Web Design Blog.

6 Color Mistakes Made By Web Designers

Jan 23
2013

Screen Shot 2013-01-23 at 1.16.26 PM

For designers color is perhaps one of the most important aspects of web design, some might find it a bit intimidating, some might simply go over the top with color while others just use a horrible mishmash of color that makes no sense. Check out this article for five of the most common mistakes web designers make when it comes to color choice.

Using Colors that don’t Enhance the Overall Message

When choosing a color scheme for a design, there are several questions that should be asked: What does this brand represent? What is the over all theme of this site? What is the target audience? Answers to these questions can help a designer choose colors that not only look good, but enhance the brand and make it easier for visitors to identify with the overall message.

Using Colors that are “Trendy”

I am a strong believer in looking at other designs for inspiration, but this shouldn’t be a primary method for choosing colors. If you frequent enough design galleries, you will definitely notice color trends. At the beginning of this decade, you may remember that it was difficult to find a site that wasn’t using blue and white. Then shortly after, we experienced the “web 2.0″ color palette. Be original with your color selection. Instead of extending the life of a trend, try to set the next one.

Forgetting that People Actually Need to Read the Text

Sometimes web designers can get so caught up in trying to make a site look cool, that they forget content is king. When designing for text, keep in mind that contrast is key. You don’t always have to use black text on white, but keep the contrast high and avoid using colored text on a colored background. Remember if visitors can’t even read your text then how are they supposed to understand your message.

Having a Crutch Color

Yes, choosing a good color scheme is tough, but when you hit that designer’s block, fight the urge to pull out “ole faithful”, that color that you used on your last three designs. Sure, it looks great, but chances are it doesn’t work for every product, service, or company. So, in order to avoid temptation, it may be a good idea to remove this color from your design repertoire all together.

Using too Many Different Colors

Yes color is a good idea, however too many colors will not make a website better. If a designer goes way overboard with color, this can cause a sensory overload, and the visitors are more unlikely to never return. Honestly there is no reason why you should use more than three to four, this is not only more oversee able, but it also shows that you have just some idea of where you are going with the design.

Targeting the Wrong Audience

One of the most important things to remember when designing is your target audience, if you are creating a website selling children’s toys then your color scheme should fit that, bold primary colors would be important for this project, however if you are selling furniture for retirement homes then you should pick colors are more laid back.

The post 6 Color Mistakes Made By Web Designers appeared first on Design Reviver.

16 Inspirational Creative Web Designs

Jan 14
2013

Over the past few years more and more web designers have tried to create a very individual web design, often the designers will use everyday objects as a part of their design. When used in the correct way such elements can help give a website a more personal note, as well as help communicate the content in a great and memorable way.

Below we present inspirational creative web designs that we think are different than the everyday 2 and 3 columned boring layout that many websites have.

Tri-Win

layouts-27

Playstop

playstop

Tamron Island

Screen Shot 2013-01-14 at 1.25.37 PM

Local Wisdom

localwisdom

Pieoneers

pieoneers

Tap Tap Tap

layouts-42

Swiths

swiths

Cycle Love

 

minimal04

Circle 21 Candles

minimal20

Ecoki

30-ecoki.com-iphone

Zen Desk

14-www.zendesk.com_

Dagui

38-www.daguia.com_.br_

Tea Round

tea-round

Mail Bakery

mail-bakery

GRK Fresh Greek

clean20

La Wine Agency

lawineagency_com

The post 16 Inspirational Creative Web Designs appeared first on Design Reviver.