In this month Web Courses Bangkok Photography blog post I would like to share photographers frequently asked questions and provide you answers to those questions. There are some misunderstandings about photography among beginners which you will see in question forms. Each question can give you a good tip in photography.

In this month Web Courses Bangkok Photography blog post I would like to share photographers frequently asked questions and provide you answers to those questions. There are some misunderstandings about photography among beginners which you will see in question forms. Each question can give you a good tip in photography.

Does an expensive camera make you a good photographer?

The answer is “No”. An expensive camera doesn’t make you a good photographer. First, How many people do you know who have spent thousands of dollars on cameras and lenses but they still do shooting on automate mode? So I ask them “Why do you spend this much money on a camera while you do not know how to get the best of your camera? Isn’t it better to go for a digital compact camera which is lighter to carry and save some money?” When you pay for a DSLR camera means that you must be able to control your camera and not let your camera controlling you.

Second, camera is a tool or device in photographer’s hand. Camera does not take pictures but photographers do. The term “Photography” is a Greek term and means “drawing with light”, but the question is what do you want draw with light and how professionally draw with light? Becoming a good photographer needs knowledge, skill and creativity. If you achieve these elements then you can take a great and compelling photograph with just a cheap compact camera or mobile phone.

The right equipment just makes your shooting faster and maybe more convenient.

Which file format should you shoot “Jpeg or Raw”?

When you get such an expensive camera means that you want to learn photography or work as a photographer. So this is a good tip “Always shoot in Raw”. In DSLR camera, you can set the image quality to Jpeg, Raw or RAW+JPEG.  I don’t have intention to get in to technical details and explain the advantage and disadvantage of each file format. But it’s important to know that Raw files suits the best for post production, especially when you work with Photoshop Camera Raw feature in CS5. Raw will give you much more control over how your image looks and even be able to correct several mistakes you may have committed when you took the photograph such as exposure, white balance and noise reduction.

Do you need to edit your photograph after shooting?

Photo editing is the process of altering images in post production which can be done in either Digital or analogue photography.  You need to enhance or adjust your photographs after shooting.  In photo editing you are able to adjust the brightness, contrast, white balance, color, saturation, sharpen and many more.  Even if you have the best or the most expensive camera still you need to edit your photographs. But photo editing needs practicing and skills. Here are some before and after editing examples:

Before:

After:

Do you always have to follow “The rule of thirds”?

For beginners is essential to practice and follow the rule of thirds. I always encourage my trainees to practice. It makes the photographs look better and acceptable. However, this rule can be broken later. It’s a good tip “Follow the rules and then break them”.

How much time do you need to spend on shooting as a beginner?

I strongly recommend my trainees to do photography whenever they have free time without any excuse.  You can’t improve your skill just by sitting and looking at photographers’ work on facebook.

We need to avoid the way we used to see the world before and learn how to see it differently. Even if you are sitting and waiting for a cup of coffee in a coffee shop (without your camera), challenge yourself, look around carefully and find the best composition and angles.

Camera doesn’t make magic but you do and the more photographs you get, the better photographer you get. So here is another tip: “Do not stop taking photographs “. Photography must become a routine in your life. Photography is not a hobby, it is life.

Want to Learn Photography?

If you are in Bangkok or you have planned to visit Thailand, do not miss Web Courses Bangkok Photography classes. You will enjoy the classes and learn how to start your trip in photography world.

Click here to learn about our Photography Courses

Learning HTML is easy because it is logical and it makes sense. It is the life blood that courses through the veins of billions of web pages, intranets and applications. So learning HTML it is a must.

Learning HTML is easy because it is logical and it makes sense. It is the life blood that courses through the veins of billions of web pages, intranets and applications. So learning HTML it is a must.

Stages of Learning HTML

• Learn what it means, I mean in relation to the real world. I find that applying techy stuff to the real world helps me learn. So in this article we will be using the idea of literacy to teach you what this HTML lark is all about.
• Get your hands dirty and try out the different tags
• Copy an existing web page without looking at their code
• Design your own web page and code it by hand (or foot if you are ambidextrous)

HTML as Words

HTML is a meta-language meaning it describes the content you see in the browser. Languages need words and so each tag can be thought of as a word. Example: <p> means paragraph, if I want to see a paragraph on the page then I speak the word <p>, if I want to see a heading then the word is <h1> and if I need to list something in order then <ol> and <li> are my chosen words.

If I say “think of a cool beer”, in your mind you see a cool beer. If I code <h1>Cool Beers</h1>, in your browser you see Cool Beers.

Simple, no? Let’s move onto the grammar.

Think of HTML as a Story

Over the years of teaching HTML I found that thinking of it as a story really helps you remember not only the structure but to help you look thousands of lines of code and see how it all fits together.

Let us take, for example, the humble <p> tag/word. When I am writing a paragraph the story has a beginning middle and an end. So we get <p>this is the middle</p>, did you spot the parts that say beginning and end?

Now some stories are short and self-contained. We can see that a paragraph will potentially have more than one word between its <start> and </end>. What about images? Well these are the neat self-contained stories. Ready, if you`re not paying attention you might just miss this story…<img />.

Images, line breaks, horizontal lines, form input fields all have this same self-contained story (also known as self-terminating tags). The difference is that their middle is in the opening tag itself. Example <img src=”picture.jpg” alt=”Web Courses Bangkok Logo” />. Why? Because that word/tag does not contain anything, it is self-contained.

Ohh I see a link!

Build Your Vocabulary

So now we know what a word is and the story behind writing most tags, now we need to know the vocabulary i.e. what different words do we have available to describe this fantastic world, contained in a browser, that we want to create.

Here are a few cheat sheets containing all the useful tags web designers use.

• Yes, You Can Use HTML 5 Today!
• A Selection of Supported Features in HTML5
• 4 Useful HTML5 Browser Support Overviews
• HTML 5 Gallery

The Importance of a Good Vocabulary

As your mother and teachers always said, it is important to have a good vocabulary. Why? So you can be understood. The better you are understood the better important people like Google will like your story.

When telling the story of your web page use the best words possible i.e. when writing your HTML code choose the best tags to describe your content.

Make It Easy for Yourself with Good Handwriting

HTML gets long! You can potentially, and often do even for medium size pages, have thousands of lines of code. Following our theme of literacy, think of this as your handwriting. To help you learn HTML quicker use tabs to indent nested tags e.g.

<ul>

<li>the ul is the start</li>

<li>so this is the middle</li>

<li>which is easy to see because of the tabs</li>

</ul>
Now trust me when I say this helps! If you have potentially hundreds to thousands of lines to search through then tabs will really help you identify the start, middle and end of all the sub stories.

Another thing I do is to put two or three lines between sections. For example the heading and the navigation I will put some line spaces between their stories.

Structure

A good book will have you weaving in and out of plots to knit together the whole story. Another way to think of the HTML structural elements like <header>, <article> and <footer> is like folders on your computer. You can`t actually open and read a folder but you can see its contents. HTML has these structural elements to group tags together to give extra meaning aka semantic value.

For example let’s look at two sets of headings that could appear on the same webpage:

<header>

<h1>Your Website</h2>

<p>this is taglinetastic</p>

</header>

Then we have

<article>

<h1>Manchester United Loose Against Cardif City</h1>

<p>The Welsh win! In a grooling match the Cardif boys stuck it to the English 2 . 0</p>

</article>

We are using the same tags but they belong to completely different sections. By using structural elements we give extra meaning to our HTML tags and stories. Learning this is the final stage and leads us onto the next article which will be about learning CSS, the code behind the design of your web pages.

Learn HTML at Web Courses Bangkok

I love teaching HTML to beginners. The look on their face as they realize this web design business is not that hard and you instantly get to see a web page be created with just a few simple tags.

We run group courses every month and you can learn online at a time that suits you. Contact us today for more information on our web design for beginner’s courses.

Sometimes when you’re running an ad in Google adwords you will find that your ad has been rejected and Google isn’t always forthcoming about just why that is. So here is a little guide to use when writing your ad, just to make sure that passes with flying colours.

Sometimes when you’re running an ad in Google adwords you will find that your ad has been rejected and Google isn’t always forthcoming about just why that is. So here is a little guide to use when writing your ad, just to make sure that passes with flying colours.

1)  Your campaign shouldn’t have excessive punctuation

Punctuation is a fantastic thing and can save you from a great deal of embarrassment. It’s the difference between ‘Helping your uncle Jack, off his horse’ and Helping your uncle jack off his horse!’. As far as Google is concerned you want to ensure that are following best grammatical practices and ensure that you only ever have one exclamation point in an ad, no matter how excited you might be about your product!!!

2)  Don’t include trademarked terms or brand names in ad titles or text.

You will generally come up against issues if you add the big brands in your add eg: Coke, Nike, Ford and others. It’s not always the case however it has happened more often than not so it’s just better to not add them if you can. Sometimes the smaller brands will not matter however I recently used the brand ‘Wordpress’ in the copy of an ad and it was disapproved so better to just not do it no matter what the brand.

3)  Do not include unnecessary symbols

Using * or { or[ or \ and so on is a sure fire way to get your ad disapproved so it’s in your interests to just not add them also, you have such limited space in Google ad text that filling your microcopy with symbols is just a waste of good sales real estate!

4)  Make sure the destination URL is the same as the Diplay URL

Guaranteed, if your Display URL is www.webcoursesbangkok.com.au and your destination URL is www.webcoursesbangkok.comyou’re going to have your ad penalised, so just double check that it’s exactly the same. You don’t need to worry about the http:// and you can (and it’s recommended) have capitalisation in your URL eg: www.WebCoursesBangkok.com but apart from those differences you need to be exacting.

5)  Make sure all URL’s are active

If you’re sending a potential customer to a URL that isn’t on your site not only are you going to annoy that customer you’re going to annoy Google as well. If your sending people to deep links on your site (sometimes it’s better to send someone to your ‘About us’ page for your quality score) you must ensure that they are working and if you change the URL at all you must change it in your Google a as it won’t dynamically update.

6)  Do not direct ads to Bridge Sites

Google outlines that a ‘Bridge Page, also known as a Doorway/Gateway page, is a web page created for the mail purpose of sending visitors to a different site. Bridge pages offer little or no unique content and are considered low value to users. Affiliates that display the same characteristics may also be considered a bridge page’. If you’re selling widgets don’t send people to a site that is all about bikini girls with a click here for more and then send them to your widget page.. yes it happens… no it is not effective… yes it also stupid.

 In Summary

So there you have it, 6 tips to ensure that when you are creating your next Google ad campaign your ad will pass the Google best practices guide and that it’s going to go live quickly. When your ad goes live you start getting traffic and traffic means visitors!

Take the Web Courses Online Marketing Course

Being a Web Designer is either difficult and fun.I have been working as an Internship in Web Courses Bangkok last 3 months. After learning much from here, i decided to write this article which will help you to solve lots of problem when you design web.

Being a Web Designer is either difficult and fun.I have been working as an Internship in Web Courses Bangkok last 3 months. After learning much from here, i decided to write this article which will help you to solve lots of problem when you design web.

Desandro

The Pixelator is the application contributed by David Desandro, John Schulz. The scripts converts an image into a pixelated version using HTML5. There is a whole built-up UI called “The Pixelator”. It enables you to import your own image url that you want to use for web design and pixelate it into the shape you want. I think it could be cool to make background or slider using this app for your website.

Visitmix

I was really excited to find this website, because this is the awesome plug-in for Adobe Illustrator. What it does is that it lets you export vector or bitmap from Adobe illustrator to HTML5 canvas and animate it. Good luck with it. It’s awesome seriously.

Addyosmani

 Are you still looking for the way to study Jquery? Are you confused about Jquery?This is the best guide for you to learn Jquery offline.What it does is that there is a package which you can download free.It has an all prefered printable materials that you can stick while working, jquery fundamental, even books about basics, offline learning documentation which has the best content.

365psd

I, as a web designer, always had a problem with designing nice buttons even I watch tutorial.But here is the great source where I download free psd files for web free. This is one of the most helpful websites where you can download free psd files like button, icons,widgets for your webdesign.Or you can just learn from psd file how designs were made.

Socialmention

Want to know how often you are mentioned by others?Interesting feature of this website is that you can find our how famous your website is and what keywords people use to find out of your website. Especially if you are Social Media Specialist then you have to check it out definitely.

Woorank

After having your own website, we have lots of competitors online. We need to do SEO to rank high on the Google and tap into competitors marketing area like how many visitors visit each month, how famous, which other websites they are related and more and more. Seriously it really helps for the marketing side. We are running our package maintenance service soon and we are using this website to tap other companies. You won’t regret it. It worth greatly.

Tympanus

Gallery slideshow is one of the most important core of website. As we know trend is cracking with HTML5,CSS3,JQUERY. Here is awesome Interactive Gallery’s explanation of how it’s made with Demo Version and Source Files. Hope you enjoy it.

Devbridge

Ajax Autocomplete for jQuery allows you to easily create autocomplete/autosuggest boxes for text input fields. Built with focus on performance – results for every query are cached and pulled from local cache for the same repeating query. If there are no results for particular query it stops sending requests to the server for other queries with the same root.

Layerstyles

Writing CSS is fun and tiring, because sometimes I do have a problem styling background nicely or some boxes. Fortunately, this layerstyle website saves lots of time for me. Magic of this thing is that you can stylize your layer first and it gives css coding for your layer.Especially if you are beginner web designer like me and having problem with CSS coding.It will definitely save your time.

CSS-Sprites

Another one amazing CSS style helper. You don’t know how to make rollover images in css?I know how to make CSS rollover images, but sometimes I am too lazy that I just want to copy coding. This website allows you to upload your own image and making a rollover effects then you copy that code for your web designing codes.

CSS Lint

Coding CSS that meets requirement is really important. I generally code CSS fine, but still I have to code in a better way to make myself better. If you want to make sure that your CSS is good enough, visit this website and copy/paste your code. It will show all the errors and warning. Incredible huh?

Punchcut

Technology is advancing more. Because of that only few years ago Responsive Design started becoming trend. I am web designer and still don’t know how to really make Responsive Design. When you visit link here, awesome article about screen resolution and download files are there. It guides you how to divide in standard ratio when you design for each device.

CSS Warp

CSS wrap is cool tool which lets you generate text in the form of curve and circle. Once you make your form of curve and circle, next step is to generate HTML&CSS of your curved or circled Text. I am glad that I can make text like this without having headache anymore.

GT Metrix

I have been working with Web Courses Bangkok and wanted to check performance of Web Courses Bangkok website. For example: check loading speed of website images,server,content and so on.At the same time I could compare loading speed with other website’s speed.Our website speed was kinda ok and it was graded as a 70%.Well at least better than average.

Generate Privacy Policy

If you are either web designer or developer and especially uses service of third party ads google, processing payment you need to have privacy policy for sure. I haven’t done any website project related to privacy policy, but I am sure that I will have problem to generate privacy policy from scratch in the future.Eventually I have found solution here.It will save lots of time for you.

Clueapp

This is fun app which helps you to analyze what guests notice from your website design at first sight. I tried it first time and submitted our Web Courses Bangkok website.I took a test and what I really noticed at first was something green.My idea is maybe you can use this tool to design your homepage based on where you want guests focus on at first.

Marketing Grader

Learn how well you are doing acroos 3 critical areas of your marketing.

Rsizr

Simple easy application for resizing your images.We can do exactly same thing in Photoshop, but difference is that Photoshop is quite heavy at loading. This application is much lighter.

Vegas Background

Awesome background j-query plugin. I was using j-query plugin in the past for the slideshow gallery twice, but never knew that j-query plugin for the background existed. Especially if you are good at photography, this plug-in is best for your website background.

Zoomy

Pretty plug-in that enables users to zoom in images. It could be something new for your website. Me as a WordPress User,I like to use Plug-ins, because I am not that good at programming. Developers know how to code really well and can come up with something similar. But I always want my website to look professional. This ZOOM-IN plug-in is outstanding plug-in. Check it out.

Mosaic Plugin

Another one cool Plug-in called Mosaic which is for Sliding Boxes and Caption. I think this plug-in is good for portfolio, because when I do my internship at Web Courses Bangkok. I will have my own Portfolio website. And I am sure that I can use this plug-in for more definition of my each work.

Zlayers Parallax Plugin

Zlayer is a jQuery parallax plugin that allows you to orientate an element based on position of your mouse to the page’s window. As a web designer if you like cheesy stuff then it’s nice effect on any images.Best part about zLayer is how easy, lightweight, and the quick the plug-in is.

Kuler

So here is my general analysis about making website.First of all,you will have content and then wirframing after that lots of people fail to choose right colors.It was one of the biggest headache that I ever had.I know color theory,but which is not enough.There are large quantity of color sets .Good luck.you will be blown away.

Minus

Want to share in private and public, anywhere you go? Start your Minus today. It’s so simple you can upload your files to this website then there is a short link for your uploads. You can just send that link to your friend or clients while working for your website project. It’s fast and convenient.

Placehold

Making design look simple and keep in order is one of the most crucial factors for web designer. While we design, sometimes we don’t have enough content, images from customers. That’s when we replace with something else, but when we replace by whatever images it just looks ugly. Eventually now solution is with placehold.it…What you have to do is that just type your size and get link and put it in your design.You will love it.

CSS GUI Icons

Awesome Pure CSS GUI Icons. An experiments that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not  “Production Ready” CSS icon set.

Brushlovers

I am web designer , but I am not that artistic.I suppose that lots of web designer are good at technical deisgn like wireframing and choosing right color,designing button.Art is definitely part of website.You don’t have to worry anymore.I have been customer of brushlovers.com for a long time.You can download any brushes that you want and convert design little bit in photoshop .There we go…

Zurb Foundation

Zurb Foundation is the Framework which provides Responsive Design. Sounds cheesy yeah? As we know, design trend is changed since people started accessing to internet by Iphone and Ipad. I am sure that Responsive Design will be more trend in the future. Now you don’t have to be afraid that you cannot design Responsive Design. Solution is only this website. I am doing website using this Framework for my Dissertation Project.

Bootstrap

Bootstrap is simple and flexible HTML, CSS, and JAVASCRIPT for popular user interface components and interactions. Bootstrap is designed to help people of all skill levels-designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

Fitttexjs

Jquery plug-in that enables designers to control the size of text depends on screen size. FitTextjs makes font-size flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

FitVids

A lightweight, easy-to-use jquery plugin for fluid with video embeds.

Responsivepx

If you are designing Responsive Website then you need exact size for your design. You can just easily put your websites link in responsivepx.com and can set your responsive size. I think it’s necessary for website. Otherwise you would make mistake in size. Recently I check webcoursesbangkok.com website.

Responsinator

Google Webstore

 Did We Miss Anything?

Today’s interview is with Bess Ho who is a mobile instructor, adviser of early-stage startups and member of Archimedes Labs.

Hello Bess Ho thank you for participating in this interview! Would you like to introduce yourself and tell us what you do?

I’m a mobile instructor, adviser of early-stage startups and member of Archimedes Labs. I am also a book author, lecturer and conference speaker.

Did you go to any college to learn the skills you are using now or did you teach yourself?

I’m a self-starter teaching myself in early web and mobile days. In fact I self taught myself in programming at age of 10 when I was given my first personal computer. Back then none of my friends in elementary school was into computer. I did finish graduate school that helped me in building my foundation in engineering research, statistical analysis, and consumer behavior.

Could you tell us what’s in your personal “toolbox”? Software, apps, hardware, books. Mac or Pc user?

I am running both Window & OSX on Mac book pro using virtual machine software such as Parallel and Fusion. I use Xcode for iOS, Eclipse for Android, TextMate for web app, Adobe Creative Suite for graphic design, Pixelmator for simple pixel work, many open source frameworks and libraries.

Can you tell us about some of the projects you did?

Many past projects are under NDA. I couldn’t comment too much on the work I’m doing for startup I’m advising. I finish my first round of book tour as contributing author for the featured developer book “Sams Teach Yourself the Twitter API in 24 Hours” by Pearson, largest book publisher in the world. I complete my adviser role for Engineering class at Stanford University on a course focusing in using mobile technology for global health projects. I’m getting ready to prepare my lecture at Stanford University in Spring. I’m also preparing to release an eBook.

I would ask your audience to check out AfterShip, LumoBack, Eligible, these startup I am advising.

If someone reading this has an interest in getting involved in the same line of work, what sort of advice would you offer them?

It’s difficult to get started in mobile in early days. It’s getting easier these days with growing amount of resources for developers. It’s all start with a simple idea. It’s all start with Taking Your First Step. Check out music video I produced “Take Your First Step”

Want to learn how to create your own app?

Web Courses Bangkok is developing a new course where you can learn to make apps. Course is to be launched in June this year. Do you want to know more? Please contact us.

This blog post describes different forms of lines and how lines can transfer different feelings and emotions.

Lines are one of the interesting subjects in photography. At first, most of beginners think that lines are boring subjects in photography but later on when they start having experience, then they find it quite hard.
This blog post describes different forms of lines and how lines can transfer different feelings and emotions.

“There is only you and your camera.

The limitations in your photography are in yourself, for what we see is what we are.”Ernst Haas

Line forms

Lines are one the most important graphic elements.  They have dynamic impact and convey moods and feelings. Using lines in photography will create also a nice composition and dynamic image. Lines also can be referred as “Leading Lines” which means a photographer uses lines as a tool to lead viewer eyes to the focal point or the point of interest. So in another word, if you don’t know how to use the lines then it can lead your viewer’s eye away of the focal point of image.

Learning how to use lines need practicing and it also takes time. We teach lines in our Bangkok Photography Course and much more including composition and how to get the best out of you and your camera. 

1- Horizontal line

Where do you usually see horizon? Well you may say; landscapes or on the beach. It’s true but horizontal lines are more than this and you can find them anywhere especially in cities and buildings. This type of line conveys peace, calmness, stability and rest.

Generally speaking, avoid of placing the horizon line in the middle of your frame. It will make your photograph boring.

2- Vertical Line

Think about trees and skyscrapers. The feelings that vertical lines convey are power, growth, dignity and strength.  Please do not forget the Rule of Third in composition. Again avoid to place the vertical line in the middle of your photograph because it divides the photograph in two equal parts. But keep in mind that you can also break the rules after learning the rules.

3-Diagonal Line

Diagonal lines transfer instability, movement, depth and dynamic into your photographs. Perspective is the best example for this form of lines which they converge in one or two points.  Based on the studies, people tend to look at photograph from left to right. So one of the best ways of using these lines is placing them in the bottom left and ends them with the top right while considering the Rule of Third.

4- Curved Line

Curved lines also have been known as S curves, but S curves are more Symmetrical and balanced while curve lines can be more asymmetry. Rivers, roads and streams are good examples. Curved lines have ability to convert romantic, beauty and drama.

The Use of lines

You can use lines as the actual “theme” in your photography. In this case lines will be used as pattern. Lines also can be a good subject in minimal photography. Always try to composite your photograph properly in order to convey your message to your viewers. Put a line in the wrong place and you risk blocking the viewer from feeling your message. Here are more examples for lines in photography: http://www.betterphoto.com/gallery/dynoGall2.asp?catID=361

Photography Course Bangkok

If you are interested in photography but you don’t know how to start, then Web Courses Bangkok is the right place for you. We help beginners and teach them with simple and powerful method. So take your time and improve photography talents today.

We run two courses in Photography: One month full group course or the One Day Photography trip around Bangkok.

Here’s a roundup of some cool responsive web design tools that have appeared over the last month.

Responsive web design is a new web design technique where a site’s design adapts it’s width and height according to the current browser size. This is perfect for designing sites to look good on the iPhone, iPad or Android devices. Design one website and it works on most mobile devices!

Here’s a roundup of some cool responsive web design tools that have appeared over the last month.

Responsive web design is a new web design technique where a site’s design adapts it’s width and height according to the current browser size. This is perfect for designing sites to look good on the iPhone, iPad or Android devices. Design a website once and it works on most mobile devices!

1. Adobe Shadow

This is by far the most impressive responsive web design tool to have come out over the past month. Shadow lets you simultaneously view and test your website on multiple devices.

For example, you download the Google Chrome browser plugin, you then download the iPad app and the iPhone app and install them on your devices; then you start browsing in Chrome and all your devices will automatically change as you test your website.

I have seen setups with over six devices connected and automatically updating at the same time, its pretty impressive.

Visit the official Adobe site to learn more about Shadow and to download the software.

Also, check out this introduction video from the Adobe team:

2. Gridpak

Gridpak has become an invaluable tool for me over the past month, similar to other online grid system generators you can choose a number of columns, column padding and gutter width, but then you can add responsive web design break points.

A simple setup would be adding a 960px break point, then a 320px break point for the iPhone; then when you download the Gridpak the CSS would automatically be setup using CSS3 media queries for a website that’s 960px wide and for an iPhone sized screen.

Check out Gridpak for yourself.

3. responsivepx

This tool helps you find that tricky breakpoint in a design, use the scrollbars along the top to adjust the view port width and height, once you have the correct settings you can easily copy-and-paste the URL to be sent as a link. This is great if you need someone else to see your site at an exact size!

Check out responsivepx for yourself.

4. Responsive.is

This tool is similar to responsivepx although slightly slicker in its presentation, instead of using scrollbars to adjust the view port you can simply click a device icon to see how your site will look.

Check out Responsive.is for yourself.

5. Responsinator

The Responsinator is also similar to responsivepx and Responsive.is, although here you can view all the devices (in their actual size) all on the same page.

Check out the Responsinator for yourself.

Bonus Tool – Gridset

This is another potentially interesting responsive web design tool that I came across. They describe their tool as:

Gridset is a tool for making grids. It lets you create whatever type of grid you want: columnar, asymmetrical, ratio, compound, fixed, fluid, responsive and more. It serves multiple grids to your site based on breakpoints for different devices. Using it is as simple as embedding a link.

Sounds interesting, and they say its due to be released Summer 2012. Visit their site for more info on this one.

Web Design Course

If you’re interested in learning more about responsive web design then you can do so at Web Courses Bangkok, we use all the latest software from Adobe such as Adobe Photoshop, Adobe Dreamweaver and now Adobe Shadow! Use any contact form on our site and we will get back to you.

HDR stands for High Dynamic Range and is a technique or style of photography which can create stunning high contrast and highly detailed images which convey drama and strong emotions.

What Is HDR Photography?

HDR stands for High Dynamic Range and is a technique or style of photography which can create stunning high contrast and highly detailed images which convey drama and strong emotions.

HDR photography is neither completely true to reality or your imagination, I like to think of it as the juncture between the two. HDR imaging techniques allow for a greater dynamic range of exposures than usually possible by taking just one photo at one exposure.

What’s exposure? Exposure simply refers to the total amount of light that falls on to the image sensor in your digital camera. This is something which you can control manually and determines whether a photo is under or over exposed. Although exposure preferences are completely subjective to each photographer and can be used creatively to get interesting effects.

The amount of detail cameras can record are limited when the sensor is exposed to light.  For example when trying to capture a photograph of a Lake with mountains and skies also present in the shot you have a very large range of exposures with strong shadows, highlights and mid tones  from the various elements in the composition. This often results in the loss of detail from one range or the other.

In other words, either your skies will be ‘blown out’ and over exposed with little contrast or your shadows will be extremely dark with little or no detail and variance. An example of this can be seen below when taken with only one exposure.

HDR techniques aim to maximize the detail in all areas of the image (both highlights and shadows), representing the wide ranges of exposures in the photograph accurately. HDR photography can be achieved in many different ways, and usually involves post processing using digital editing software or plugins for Adobe Photoshop or Lightroom.

‘New’ Art Form

HDR photography although some see it as a “new and emerging art form” has in fact been around for much longer, just without the label HDR! Photographers like Ansel Adams and W Eugene Smith used burning and dodging techniques in the dark room when printing to manipulate the exposure of an isolated area on a photographic print as far back as the 1950’s. You can see an example of one Ansel Adams landscape photographs below whereby he used these techniques to adjust the tonality of the picture from shadows to highlights and get superb clarity and detail in all parts of the photograph.

Don’t you have to be a professional?

Many people immediately dismiss the possibility of being able to shoot HDR photography as a beginner or amateur photographer. This simply isn’t the case! Anyone can capture and process HDR images and now with so much software available that practically does it for you it takes only a few minutes!

I won’t elaborate on how the software works in this blog post but below are 10 popular software programs and plugins for HDR photography which you can check out if you want to find out more. If you do want a review of the HDR software’s available and which ones I would recommend please let me know and I will write a blog post for this!

You can truly create stunning and compelling images through HDR techniques and turn an ordinary photo in to something quite spectacular full of life, contrast, color and clarity otherwise not possible!

1. Photomatix Pro HDR
2. Adobe Photoshop CS5 HDR Pro
3. HDR Express
4. Artizan HDR
5. EasyHDR
6. HDR Darkroom
7. Luminance HDR
8. Essential HDR
9. HDR Photo Studio
10. Dynamic Photo HDR

I Want to Shoot HDR, How Do I Start?

As I said before, there are lots of different methods photographers can utilize to create HDR images. Usually modern HDR imaging combines 3 or more images of the same composition (same subject, usually taken on a tripod for accuracy) taken at 3 or more different exposures to create one photograph in post processing, using one of the software programs listed above. This is done through the EV Compensation/AEB setting controls on your digital camera which is illustrated below. This technique is called Auto Exposure Bracketing.

Auto Exposure Bracketing combined with post production HDR software,  produces a single HDR image from the 3 differently exposed shots that results in extreme clarity, detail and vibrant contrasts otherwise not possible. Some HDR photographers use up to 9 different exposures for more complex scenes to ensure precise detail and clarity in the final image!

In HDR Photography Part 2 I will tell you my top 10 tips for HDR photography.

If you want to learn more about your camera and photography, Web Courses Bangkok have a variety of Photography Courses to suit your goals in both group or private settings. If you are interested, contact us and we will provide you with a great photography course with plenty of support.

Creating quality ads online can sometimes be a little bit tricky and as an advertiser, you are always trying to get as much value from your ads as you possibly can. No one wants to throw money down the drain on an advertising campaign that sees no ROI. So here are 6 tips to help you when you’re next creating your killer campaign to boost traffic and sales to your website.

Creating quality ads online can sometimes be a little bit tricky and as an advertiser you are always trying to get as much value from your ads as you possibly can. No one wants to throw money down the drain on an advertising campaign that sees no ROI. So here are 6 tips to help you when you’re next creating your killer campaign to boost traffic and sales to your website.

There are a plethora of tools online that can help you with your campaign writing however, without having the best practices as your guide, no matter how good the tool, the ads just will not perform to their peak efficiency.

Keywords

Your keywords are the lifeblood to your campaign, so you need to make sure that you are putting a decent amount of effort into the building of your keyword list. How do you then get the best keywords and what are you looking for in a keyword?

Firstly it’s not always best to be looking for a single word that describes your product of service. For example, if you are a designer, what sort of designer are you? a web designer? a graphic designer? an interior designer? the options can go on and on, so if your looking at a single keyword like ‘designer’ it’s not in your best interest.

So then, using the designer example you’re a service provider, can you use ‘design services’? well again you’re hitting the same obstacles, so lets drill down a little. lets say that you are a graphic designer, what sort of graphic designer are you? an illustrative or a layout designer?

Now we can start to see how you should be looking at your keywords.

‘Logo graphic design services’.
‘Graphic design services for logos’.

And so on, but can we get even better keywords that? can we be more descriptive about your business? how about cheap or fast or stylized? The more descriptive you can be about your business, the better start you will have to your keyword list.

Once you have your keyword list you then need to go the online tools like the Google Keyword Tool, keyword samurai or others (some paid some free) and put your list in. Are there any people searching for your keywords? If so, then you are on a winner and you may be able to find other descriptive phrases and words that people are searching for that you may not have thought of.

So now we have a keyword list…

Negative Keywords

Having a negative keyword list is almost as essential as having positive keywords. This is pretty simple to achieve as all you have to do is put a – in front of a word that you don’t want to have associated with your search terms. For example your trying to get your ad shown for the search ‘graphic designer’ and your services are charged at a premium you would use the negative -cheap -discount -budget. Adding those sort of words will help ensure that you’re not going to get clicks on your ad that will not convert.

An easy way to find common negative keywords is by using the google keyword tool, put in your desired search term and run a broad match, then phrase match search and take note of what additional words come up. Those are the ones that you want to utilize in your keyword list.

Editorial groups

Developing some basic groupings to your keywords is essential to having a well rounded campaign. Let’s take the designer example again, you have built your keyword list but that list is 150 words long and it covers everything from ‘color logo design’ to ‘black and white photo manipulation’.

Now you can’t have one ad that has all the different keywords in it (I’ll explain more on that in the quality score) so you have to break your list into seperate components, different niche areas if you will. This will allow you to firstly, go back to your keyword research and see if there are more keywords that you can find that are more specific to the individual product you are offering and secondly, it will help you target your ads to the searcher much more effectivly.

Titles

The first selling point of your campaign has to be a good one. It needs to be snappy, to the point and give enough information to tell the user what your trying to get across. There are a few things you can do here.

1. Use DKI, this will dynamically insert a matching keyword into the title
2. A question
3. A statement of the product

As this is the very first point of sale that you have with your customer, it’s very important to make it hit home and be as relevant to your product as you can. If you’re selling Jumping castles and your emphasis is on Jumping castles make your title ‘Buy Jumping Castles Here!’. it’s a little better than ‘Party Fun Rides’

The title also has a big effect on your quality score so make sure that the title has keywords that are also found in your ad copy and on the landing page that your ad is going to. Remember, the better the quality sore the cheaper the keyword and higher up the page your ad will go!

Just a little note on writing Google Micro-copy, Always Capitalise The First Letter Or Every Word, Even In Your Display URL. It Looks Better.

Ad variations

You should never just have one ad and hope for the best as you’re only going to be selling yourself short and possibly end up not selling anything at all! By writing a few variations on the same theme in each ad, you can do a simple test and see what style of ad is resounding better with your customers.

For example, is a question based ad having a lot of click through but resulting in less sales compared to a lower CTR, but better sales for a statement ad?

Quality score

This is a pretty important piece of the adwords pie here, as the quality score will determine how much you are paying per click, how often your ad will get shown and how high up on the list your ad will display.

Tips to a good quality score…

• As mentioned before, the keywords in your title matching the copy and landing page
• Relevance of the keywords to the product you’re selling on site
• Same keywords and tone of voice across all your ads and site
• The quality of the landing page that your ad is going to
• Depth of pages, how deep the link is that your ad goes to
• Traffic to your site
• Social indicators of your site (Facebook likes and the ilk)
• The amount of copy and image alt tagging your landing page has
• The click through rate of your ads will also affect your score

Quality score is the key to having an effective ad campaign, the better the Google quality score, the less you pay for the clicks and the higher up the page your ad will go. The higher up the page, the better your campaign will run!

Budgeting

Managing your spend is of course pretty important, as you want to see some sort of return on your investment as well as to not spend everything you have in the first week!

Think about your customers and your offering, are you selling b2b only? Then think about having your ad not show after-hours and on weekends, that will ensure that you get less, less relevant clicks.

Research

The most important part of your entire campaign is measurement of its effectiveness. Doing plenty of testing is the best way to ensure that your ad is the most relevant and appealing to your customers, changing the title, changing the copy, having variations of the ad with the same title and variations of the same title with the same ad.

Using a selection of keywords for an ad and then running the same ad with a different set of keywords. Unless you test and change you will never know the optimal combination of ad to keyword selection that you can get. And of course, finding what is going to return you the most amount of customer click through’s and spend, to the money your spending on your ad!

Do you want to learn more about Online Marketing?

Check out the Online Marketing training that Web Courses Bangkok offers. Our private tuition will give you the skills to harness the cost effectiveness of the internet and develop your market to drive traffic and create conversions. If you want to know more you contact us.

This is a simple tutorial to show you how to create a grid from scratch visually it’s an easy way to avoid doing doing to much maths cause I hate maths! There are many other ways, but this is my preferred method.

OK, so you’ve been asked to design a website for a great company, you’ve sketched some ideas down in your sketch book, and now your about to jump into your favorite design package but how do you go about taking your lovely scribble into something you can present to your client here’s how I start.

This is a simple tutorial to show you how to create a grid from scratch visually it’s an easy way to avoid doing doing to much maths cause I hate maths! There are many other ways, but this is my preferred method.

For this tutorial, I’m going to create a 960 pixels grid, but you could do it for any size document, the process is the same. Create a new file in fireworks or photoshop, I’ll be using fireworks for this tutorial, but the tools are very similar. I’m creating a document 1200 pixels by 1200 pixels so I will have plenty of room on my screen.

Setting the Base measurement

The first thing I do is set my base units. go to preferences > units and guides, I set my grid settings to 10 pixels by 10 pixels, that means, every 10 pixels we will get a guide, both horizontally and vertically, and set my snap distance to 10, this means any objects I place in my canvas will snap every 10 pixels giving me lots of control to keep things lined up nicely later on while designing.

I then go to view > grid > show grid, we can now see our base grid.

Step 1

The next step is to create a vector box the size I want my main grid to be. Remember, I said this was going to be a visual way to create a grid. I create a box 960 pixels wide (as this is the width I want my grid) and 1200 pixels high the height of the document. If you hold down the “shift” key then play with you arrow keys, you’ll see the box you just created moving in increments of 10 pixels.

Step 2

Next I use my align tools to center the box on the canvas and align it to the very top. Go to window > align and make sure its checked, you should get the align tool box appear. Check the relative to canvas button, the align to center and align to top. This puts our box dead center of the canvas and at aligned to the top of the doc.

Step 3

Next if your rulers aren’t already visible, go to view > rulers, the drag a guide out to both sides of your box. The guides should snap to both sides, At this point we can turn off our base grid for now.

Step 4

From my thumbnail design, I know I need at least 3 columns in my grid, and in between each column i want 10 pixels each side, so that gives me a bit of breathing space. Here comes the worst bit the scary math!

OK we’ve got a 960 pixels area to work with, I need to divide that up by 3; 960 / 3 = 320, so we now have 3 x 320. We want 10 pixels either side of each column so that 320 – 20 = 300. Phew, you can relax, thats the scary part out the way. So we now know we need to create 3 columns of 300 pixels each with 10 pixels either side.

Step 5

First thing I do is drag the very top corner of the rulers out to the top left edge of our box, that sets the rulers to 0,0 at the top left of our box, next drag a new guide out to 10 pixels within our box.

Step 6

Next, select the box and change its width to 300 pixels and snap it the the edge of the guide we jus created, then drag a new guide out and snap it to the right edge of that box, and add another new guide 10 pixels to the right of that (all your guides should be snapping 10 pixels). That is our first 300 pixels column with 10 pixels margin either side created. Now we just repeat the process.

Step 7

Now we’ll create our second column. Drag a new guide out and place it 10 pixels to the right of our last guide, Copy and paste the 300 pixels box, and snap it to our last guide, add a new guide to the right edge of that box, add a new guide 10 pixels to the right of that. now Just copy and paste the box to create the last column, and position it into the remaining space.

We can now just repeat the process to create a 6 column, 12 column, by starting dividing each column by two for each step.

Now turn that thumbnail into something a bit more like a website!

Do you want to learn more about designing websites?

Check out our Webdesign Beginner and Webdesign Intermediate courses. You will learn about making wireframes, sitemaps, CSS, Html, SEO, WordPress and so on. Contact us here to ask any questions about our courses.