Michael John Burns
Role: Designer / Design Guru
Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. See his works at burnstudio. Other than that he loves Coffee and his Girl.
Howdy Folks! In this tutorial you will learn how to convert Artthatworks (if you want to know how to create this design in Photoshop check here!) from PSD to HTML using Skeleton Boilerplate and make it responsive with media queries. As I mentioned in my last tutorial, I hadn’t tried using a framework until recently. I found the Skeleton Boilerplate Framework which makes it very easy to convert PSD files into HTML, by calling the right classes you can create a quick responsive layout. Sounds great right? Well then get ready and let’s get started.Read More
In case you didn’t know, websites about games are becoming a thing, and it’s one of the most profitable niches out there. If you are passionate about gaming and you want to share news, stories, and opinons about your favorite console and games, then this roundup is perfect for you. Whether you want to design one or you’re simply looking for great designs, have fun!Read More
Howdy Folks! If you’re following the series, we have converted Burnstudio Design Agency from PSD to working HTML/CSS. We have discussed how we will markup the HTML and how we will style it using CSS. Now, in this tutorial I will teach you how to make it Responsive by using Media Queries. Media Queries will change the look of the website depending on the screen resolution of the device: desktop to a mobile resolution by tweaking the CSS for a variety of viewports.
By the end of this media queries tutorial you will learn how to convert any website into a responsive website.
Let’s get started!Read More
Howdy, folks! In this PSD to HTML tutorial you will learn how to code the Quick and Easy Stylish Design Agency Landing Page In Adobe Photoshop. I’m not really into coding, more of a design person and this is my first coding tutorial. I will try my best to guide you through the whole thing. We will be coding this from scratch and by the end you will have an awesome and fully functional agency layout.
Are you ready? Let’s get started!Read More
Hey Guys! Were you ever asked to design a Design Agency website and you’d run out of ideas? Well, this tutorial is just for you. I will show you how to create a stylish looking landing page using Adobe Photoshop. Don’t worry, this design will not take too long and don’t be afraid of doing this if you are a beginner I promise to guide you all the way through. So what are we waiting for? Let’s get started!Read More
Google Plus fans out there all know that Google+ got a redesign that makes it prettier and simpler to navigate. We are going to recreate the whole design. Imitating a design is a way to learn new things and apply it to future projects. What beginner’s will learn from this are how useful Direct Selection Tool(A), Pen Tool(P) and Shape Tool(U) can be in making a website design in Photoshop. If you haven’t added yet 1stwebdesigner into your Google+ circles add it now!.Read More
In this week’s tutorial we are going to create a Web Hosting Landing Page layout for Besthost as an example. The template will have a simple logo, navigation, slider gallery, package, about us, services, testimonials and footer. Let’s combine these all together to make an awesome template. I will try my best to make it easy for you to follow this tutorial.
So let’s get started!Read More
Good day! Today we will be designing a modern business template in Adobe Photoshop.. This template will contain a header, slide show, service area, video, about us, testimonials, and footer. What you will be learning from this tutorial are how to achieve that 3D looking interface in just a few simple steps, creating patterns, combining textures, colors, alignments and many more. So get ready and let’s get started!Read More
In this week’s tutorial we are going to create an eCommerce landing page using Adobe Photoshop. This tutorial is intended for new designers who are planning on designing an eCommerce template. So what are we waiting for? Ready your workspace and let’s get started.Read More