Simple Yet Important Cross-Browser Styling Tips Everyone Should Know

Posted in Coding, Coding, HTML & CSS, Tutorials • Posted on 7 Comments

Many have been searching for cross-browser styling tips that can help them solve their browser compatibility problems. After all, creating a website can be easy but developing one that looks the same on all browsers can be tough. For many years, browser compatibility is one of the hardest parts of web development.

Simple Yet Important Cross-Browser Styling Tips Everyone Should Know Read More

Get ‘Layed’: What You Need to Know about Photoshop Layers

Posted in Photo Effects, Quick Tips, Text Effects, Tutorials, Web Interface • Posted on

Photoshop is revered as one of the best digital multimedia solutions software. So there is no question on what you need to know about Photoshop layers because there is always something to be learnt about this amazing software. It basically encompasses every design need there is. Artists consider using it because of its flexibility. It can be utilized by any artist notwithstanding their design inclinations. Most photographers use the software in editing their photos. Some digital artists use Photoshop, (if not, Illustrator) in their designs. Meanwhile, most web designers use this software in building the visuals of their designs. Truly, with these uses, Adobe’s carrier software has been the one-man-wrecking-machine software that solved most of our digital problems.

Get ‘Layed’: What You Need to Know about Photoshop Layers Read More

10 Easy To Understand Photoshop Tutorials on Lighting Effects

Posted in Illustration, Inspiration, Photo Effects, Photography, Text Effects, Typography • Posted on 4 Comments

Most designers find Photoshop very versatile. Photoshop tutorials on lighting effects is highly sought after. Although mainly used in photography, this favorite software of designers bridges different kinds of needs, from typography to web design.

Not to exaggerate, Photoshop can supply all your design needs. Today, we will be highlighting a very particular need. This article is directed mainly to graphic designers and photo enthusiasts but could be a very good springboard to web designers too. With lightning effects added in your photos, you will be able to add more dynamism and professionalism in your designs. In short, it would make your awesome website more awesome. How cool is that?

10 Easy To Understand Photoshop Tutorials on Lighting Effects Read More

70 Best Web Design Tutorials of 2013

Posted in Coding, Quick Tips, Tutorials, Web Interface • Posted on 28 Comments

2013 has ended with a great blast and I’m pretty sure that everyone has done their countdowns and throwback blog posts, tweets and even status updates. It’s a pretty cool thing to do because you get to remember all the awesome things 2013 has given you. You look back at how bad you were design-wise last year and how well you’ve improved. With this, you get to assess yourself how much more you could exert and, in turn, how much more money you could earn. Retrospection also tells you what more could you learn. Seeing what you’re weak at will also allow you to see where you could trained. That is why self-correction and openness to new things is a great habit for a designer.

70 Best Web Design Tutorials of 2013 Read More

How to Create Flat Icons in Photoshop

Posted in Icons, Tutorials, Web Interface • Posted on 13 Comments

Okay, let’s face it. Flat design is the new ‘thing’ for web interface. With iOS and even Windows now adapting this design scheme, it will not be any longer when almost (if not all) all websites in the World Wide Web adapt this design scheme. You would just be baffled to know one morning that as you woke up, opened your browser and typed in your favorite website (we hope it is 1stwebdesigner, just kidding!) and be surprised to see that it followed with the trend of flat design! So you would immediately re-code your website or blog, for that matter, to be ‘in’ with the trend, and that would entail a lot of grueling hours again.

So why not start today? Why not start your web motif revamp today? Try to be there before it happens. Try to be cool before being cool is cool. Be a hipster!

You may be thinking, “Where will I start?” Of course, revamping your website design is hellish as hell is. But that’s why we are here – so that you’ll have a helping hand in going with the flow of design. Right?

How to Create Flat Icons in Photoshop Read More

Ultimate 6-Part Web Design Video Course: How To Build a Website From Scratch

Posted in Coding, Tutorials, Web Interface • Posted on 29 Comments

Hey guys, we’re really excited to release this resource for you. If you’re following my previous tutorials, I started with the basic one, which is boring for some of you and might be helpful for the beginners who just started learning. If you’ve missed it, check Basic Web Design Video Course.

In this web design video course, I will show you the processes involved on creating a landing page – from planning, searching for inspiration in the top design community, choosing fonts, colour scheme, wire framing and finally transferring the wireframe into Photoshop and rocking it out there. Once we have our PSD design ready, we will convert it into a working website using Twitter Bootstrap. We will be also covering how Bootstrap, scaffolding, base CSS, and JavaScripts work!

Get ready and let’s get started!

Ultimate 6-Part Web Design Video Course: How To Build a Website From Scratch Read More

Beginners Guide to Working with jQuery Animation

Posted in JS & AJAX, Photo Effects, Quick Tips, Tutorials • Posted on 42 Comments

In this tutorial, we are going explore the basics of jQuery animations for you to get prepared for advanced designs. Animations is the core functionality behind the interactive elements in web design.

The design of a website plays a major role in attracting visitors on a consistent basis. Interactive designs get more attention compared to the plain old static designs.

Technology is improving at a rapid pace to cater the advanced modern web designs. As a result, CSS3 offers the animations without the help of JavaScript. Even though CSS3 and HTML5 are improving in leaps and bounds, jQuery seems to be the popular choice for creating interactive designs.

Let’s get started!

Beginners Guide to Working with jQuery Animation Read More

Working with Types: Typography Design Tutorial for Beginners

Posted in Text Effects, Tutorials • Posted on 14 Comments

In this typography design tutorial, I will guide you on how to transform boring texts to your advantage. You will learn how to utilize typography for your website, or even for your print needs. This article will extend from web page design, to printing to graphic images.

They say letters are boring. Unlike videos and music, text is static. It does not move or tickle other senses besides the eyes. Texts are usually placed as information-dissemination tools which convey the detailed message of the media being used. For example, if you upload a YouTube video tutorial, the video is the dynamic medium which will aid the viewer to achieve the goal. On the other hand, the text will provide all the details needed in case something is not clear.

This fact might give you an impression that texts are really boring. But what if they are really not? What if texts, which are used mainly to detail, are used for the design function? How is that possible? Of course, through typography.

Typography has existed for a long time. It originated from a time we all couldn’t remember. Basically, typography is the technique of putting texts or types in an orderly manner to make it visible, attractive and readable. Simply put, typography is the art of working with texts, graphically.

The tutorial is divided into five parts:

  1. Creating Typographies Using Photoshop
  2. Choosing the Perfect Fonts for Every Occasion
  3. Where to Download Fonts (Free and Premium)
  4. How to Consider the Perfect Colors Fit for Your Design
  5. Sample Finished Product on a Website
Working with Types: Typography Design Tutorial for Beginners Read More

Flat Web Design Tutorial – Portfolio Landing Page [FREE Download]

Posted in Tutorials, Web Interface • Posted on 35 Comments

Some people may find flat web design boring while others totally love it. I find flat design interesting and more user friendly. It puts more emphasis on the content. It’s also very flexible, which is really ideal for responsive web design. If you, like me, love flat design, make sure to check out 40+ Flat Web Design Inspiration. I’m pretty sure you will get goosebumps after seeing several flat designs.

Feeling inspired seeing those designs? Good! Today I will teach you how to design a portfolio landing page- an almost an hour long free video tutorial!

Flat Web Design Tutorial – Portfolio Landing Page [FREE Download] Read More

Create a Flat Countdown Timer in Photoshop – iOS 7 Inspired

Posted in Quick Tips, Tutorials, Web Interface • Posted on 13 Comments

In this tutorial I am going to show you how to create a simple countdown timer, iOS 7 inspired!

Flat design is dominating the web and I’m sure you all know that Apple created a new look and feel for their OS. I’m really happy seeing the minimal look of the user interface and I know Apple fans are eagerly waiting to test iOS7 this fall. So, while we’re waiting I’m going to show you some great wallpapers and we’ll create a countdown timer in Photoshop. The look and the colour scheme will be based on the iOS 7 wallpapers that have been released. This tutorial will be very quick and beginners will find this Photoshop tutorial helpful in understanding the power of Free Transform.

Create a Flat Countdown Timer in Photoshop – iOS 7 Inspired Read More
54.196.62.132 - unknown - unknown - US