Google Adwords

January 17th, 2010

So, as much as I would like to have Google Adsense making me millions, I see the likelyhood of that happening being very small (I’m struggling my darndest to figure out how to add it to a WordPress Blog with no luck!)  So, if I’m going to make a million dollars, I might have to do it the old-fashioned way – by working for it!

This leads me to another issue – one that plagues all business owners – how to generate more revenue!

Ultimately, a PAYING CUSTOMER comes from two things: 1) a lead, and 2) your ability to convert that lead and sell them on your product/service.  I am generally fairly confident in my ability to convert my leads (not all of them, but a significant amount), so I figure that I need to work on the first part, generating the leads (whether it be for web design, graphic design, photography, or videography!)

I have signed up for Google Adwords.  Adwords is where business owners PAY to have their ads (either text ads, or picture ads) show up on Adsense pages.  Essentially, you want to create an ad that is attractive, both physically and with what is being offered.  This is where I am at!  I figure, if I can pay a few hundred dollars a year to generate a leads, who hopefully I can convert to clients, I will make back what I have spent in advertising.  It sounds good in theory, so we’ll see what happens in reality!

I have tried to make my ads sound appealing, offering incentives like “FREE 6 Month CMS on New Websites“,  “FREE Business Cards with Logo Design“, and “Local PG Wedding Videographer.”  I don’t know how it will work, but we’ll see!

Anyways, if you are browsing the net and happen to see one of my ads, let me know!  I would love to hear of people actually seeing my ads, and convincing me that I’m not wasting my hard-earned money on nothing!

Tags: , , , , , , , , ,
Posted in advertising, facts, history, insight, learning, making money, marketing | No Comments »

Creating a customized Letterhead using Microsoft Word

January 12th, 2010

Alright, here is another tutorial for you – one that I actually use a lot in my graphic design process with my clients (not to mention for myself and my own company branding!)  This should be rather basic and easy to follow, but I know that it will help many people out!

We are going to create a customized letter head in Microsoft Word, using the “Header” option.  This is a great step to take because it allows us to write on the page as we normally would, and we can adjust the page margins to whatever we would like without having to worry about fixing our “INSERTED” graphics and photos (if you have ever tried changing your page margins AFTER inserting photos into Microsoft Word you will know the headache I am referring too!)

1) Obviously, create a new document first, and save it in your company branding fold as “Letterhead Template.”

2) Open the “Header” option (I am using Microsoft Office 2007, and for this version go to “Insert -> Header -> Edit Header”).  With many other versions you can actually double-click the top inch of the page, and it opens the header as well.

Opening the Microsoft Word Header

3) Once the header is open I can either start typing the text I wish to have in the header (I would STRONGLY recommend using text-boxes so you can change the positioning), or insert an appropriate image that you wish to have in your letterhead.

Adding a basic header to the letterhead

I am going to use a letterhead that I have designed for my own company, Mike Ray Design.  *Please notice that I have to stretch out the design to properly fill the page, and the easiest way to do so is by changing the “text-wrapping” of my image.  I do this by going to “Format -> Text Wrapping -> Behind Text”.  You also get this menu by right-clicking the image and changing the text-wrapping from there.  Once you have changed the text-wrapping, it is MUCH easier to move the placement of your photo/image.

Adding an Adobe Illustrator design to the letterhead

4) Next, close your Header panel by going to “Design -> Close Header and Footer”, or hitting “Esc” a couple times on the keyboard (this may not work with all versions of Office).  Save the document again and close it.

Closing the header

5) Finally, to protect the document from being lost or wrecked, we want to make it a “Read-only” file.  To do this, open Windows Explorer, and navigate to your company branding folder where you saved the letterhead template.  Once you find the file, right-click it, and choose “Properties”.  When the pop-up box opens, you can change the Attribute of the file to be “Read-only” – check it and hit OK.  Now, whenever you open up the letterhead, you will have to save a NEW version of it to keep the changes – this guarantees that your template stays a template!

Making your letterhead Read-only

Tips and Tricks

- I always design my letterhead using Adobe Illustrator or Adobe InDesign.  I get many more compliments and comments from these versions of my letterhead than the ones I created previously using only text and a basic logo.

- You can also design an invoice template and do the same thing as here!  I have done this, and created tables in the Word Document to match up with the lines on my invoice, making filling it in a breeze!

- Your letterhead will be on EVERY page you make in the new document unless you insert section-breaks and stop the header on your next page (go to “Page Layout -> Breaks -> Section Breaks -> Next Page”)

- I know the image/text in the header looks faded – don’t worry – it does NOT print this way.  It only shows up this way so that you can see what you are putting over-top easier.

Tags: , , , , , , , , , , , , , , ,
Posted in branding, design, graphic design, insight, learning, marketing, screenshot, teaching, tutorial | No Comments »

Recording a Photoshop Action – How to Watermark your Photos

January 11th, 2010

As can be seen, all my photos in my online portfolio have my “Mike Ray Design” logo watermarked on them.  I’m sure there are easier ways to create a watermark, however, I found using a Photoshop Action to be one of the easiest, once it is setup.  In my first *ACTUAL* tutorial, I’ll try to explain how to create a basic watermark action for your photos using Photoshop (Don’t worry – you can customize it to what you like :)

*PS – please note that it did take me a few tries on some of the steps to get it just the way I wanted – you probably wont get all your actions to work perfectly every time.

1. Open one of your images.

Open photo in Photoshop

2. Open your “Actions” panel – it can be found under “Window -> Actions”.

3. Hit “Create New Action” button - bottom left of the panel.  Rename your action to “watermark” and place in the set “Default Actions.”  Click OK.  You are now recording everything you do!

Starting an action

4. The first thing we do with the image is set our parameters – resolution, height, and width.  I generally have two actions – one for portrait (vertical) images, and one for landscape (horizontal) – for this tutorial we are just going to landscape.

Resizing an image

Next, to set the resolution to something standard – your actions WILL remember this!  In this case, because my point-and-shoot camera (Pentax Optio W80 – great for HD video, actually!) takes photos takes photos at 72 pixels/inch, but when I work with them in Photoshop I always bump them up to 300 (and ESPECIALLY for printing!  I know you technically can’t ADD pixels to a photo, I find it is a good habit to get into anyways).

Next, your width.  I generally set all landscape images to a MAX width of either 800px or 1000px for web-browsing – PLEASE don’t make them larger if you are embedding them to a webpage!  It really sucks to have to scroll sideways to see a whole photograph!  *Please note that if you increase the resolution, you increase your width and height (but NOT the quality), so be sure to remember to then change the width *

Once my image parameters are set I zoom in to it (hold “Ctrl” and hit “+” to zoom in, or “Ctrl” and “-” to zoom out).

5. Make a new layer in your “Layers” panel (“Window -> Layers”).

6. Select a new foreground colour. I always choose white, as watermarking with a colour seems to look funny.  *Please note that you have to choose a DIFFERENT foreground colour than what is already set – if you choose the same colour, it will not register that colour.  If need be, choose a random colour first, hit “OK”, then go back and choose the colour that was already there – at least this way it will register the colour you want.

Changing the foreground colour

7. Choose the shape tool (or tools), and start to draw your logo, or whatever shapes you want on the NEW layer.  *The actions panel will remember everything you do with SHAPES – it will NOT remember erasing or drawing with the pen, pencil, or brush, so unfortunately there are some limitations.

Drawing shapes in Photoshop

8. Once your shape logo is complete, choose the text tool, and type out the text you want.  The actions WILL remember the text you type, the font, and position.  Once you have it typed, if you need to move it or resize it, go ahead – it will remember it.

Adding a text layer in Photoshop

9. Next we want to merge the text and shape layer together. Click the text layer (in my case, the layer that says “MikeRayDesign.ca“) hold “Shift”, and click on “Layer 1″ (the shape layer), so that both layers are highlighted blue.  Then right-click “Layer 1″ and choose “Merge Layers” from the pop-up menu.

Merging Photoshop layers

10a. There will now be 2 layers – the background layer (your photo), and another layer that has both the shapes you drew, AND your text (it will be named the name of your previous text layer – in my case, “MikeRayDesign.ca”).  Make sure that layer is selected (highlighted blue), and click in the opacity box RIGHT ABOVE  the layers panel.  If you click the arrow beside the part that says “100%”, you will get a little scroll bar, as you can see in the screenshot) below.

Changing layer opacity

I generally make my watermark layers at 50% opacity.  I find that I get the watermark I wanted, and don’t impede or take away from the photograph.

10b. At this point I may choose to move the watermark layer if I wish (the layer titled “MikeRayDesign.ca” in my example), and wherever I move it, it will be recorded by the actions.

11. We are now done creating our watermark, so in the actions panel hit the little “Stop Recording” button in the bottom left of the panel.  To test out the success of your watermark, open a NEW photo (choose one that is also landscape), click on the MAIN action (the one at the top of the tree, called “watermark”), and hit the “Play Selection” button at the bottom-middle of the actions panel.

A new photo ready to have a Photoshop action applied...

With any luck, it should show up on the new photo EXACTLY as you recorded it!  If not, you can hit “Ctrl”, “Alt”, and “z” to go back steps, and see where something messed up.  To fix a mistake, you can re-record the specific action (such as, “Set Foreground Color”), place it below the one that was causing the mistake, and it should fix it (you may need to actually COMPLETELY DELETE the action causing the mistake, but don’t delete it too soon – you can’t get it back!)

The finished product - Photoshop action a success on a new photograph

TIPS and TRICKS for this process:

- if you try to use this watermark on images with different height/width ratios, it may not work properly.  Every action we recorded is SPECIFIC to the dimensions and resolution of the photo (ie. one of the rectangles I drew for my logo is EXACTLY 5.6cm from the top of the rectangle to the top of the photo, 6.18cm from the bottom of the rectangle to the top of the photo, 0.3cm from the left of the rectangle to the left of the photo, and 0.37cm from the right of the rectangle to the left of the photo).  Everything will work PERFECTLY if you are using the watermark for the same camera!

- do all your photo editing/photo processing PRIOR to adding the watermark

- it may take a couple tries to get the watermark right – keep going!  There are plenty of good videos on YouTube for recording actions

- make a different watermark for vertical photos – it’s just easier!

- speed things up a little more by recording yourself SAVING the photo, and then drag-and-drop that action to the end of whole tree of “watermark” actions

- to watermark a whole folder of photos, first record yourself actually OPENING and CLOSING a photo, then drag-and-drop those actions to the beginning and end of the whole “watermark” action.  You can then go to “File -> Automate -> Batch” and choose the entire folder you want to watermark, and the folder you want to save them into. *Remember that you will actually need a SAVE action in your “watermark” action – without it, nothing will save!

- if you choose the “Save for Web & Devices” options as your way of saving your image once it is watermarked, the action remembers the folder you chose to save it into, and will ALWAYS save it there, EVEN if you choose a different folder when batch-processing your photos.  For this reason, any action that I have a “Save for Web & Devices” save action involved, I save it to a folder on my desktop specifically for this (I call mine “Images for Web”)

Tags: , , , , , , , , , , ,
Posted in Websites, branding, design, insight, learning, photography, screenshot, teaching, tutorial, web design | No Comments »

Using PHP to write the header and footer of a page

January 7th, 2010

OK – maybe from this post I remove all doubt that I am new to PHP – truth is, I am.  However, in all my searching Google for a topic on how to do this, I wish I could have found a post like what I am going to post here.  That being said, I DID find something, somewhere, that really helped me out, in a WordPress Forum.

What I’m talking about is probably something simple, and something that it not new to many people.  Here was my situation:

I often use the EXACT same template for each page in a website (makes sense – they all should look the same!)  However, I was hard-coding most things in html, including consistent aspects across all pages such as all the information in the <head> tags, my footer, and even my Google Analytics code at the bottom of the page.  This is not a problem if nothing needs to be updated.  The reason updating poses a problem is because I would have to manually go to every page and change the code, thus increasing the cost to my clients for what should be an easy fix.

I knew there had to be a solution to this ridiculous problem.  What I wanted was some kind of php script or function that could merely call a “header.php” file, or a “menu.php” file, or a “footer.php” file to each page when needed.  This would speed up any updating to the website dramatically because I would only have to make the change once – in that specific file.

This is the same technique that Wordpress templates use, simply calling other PHP files from their index.php (ie. “sidebar.php”, “header.php”, “footer.php”, etc.)  I knew this was possible, but even when snooping around a Wordpress template I was unable to figure it out (the reason is because they don’t use a set PHP function – they create their own, and then do whatever magic they need to get it to work).  This option wasn’t going to work for me because, as I stated above, I’m relatively new to PHP!

However, in this forum I mentioned above, one of the contributors to the solution, Whooami, suggested that the OP use a function called “include_once” to call the specific header he wanted.  After I read that I checked out the handy PHP.net Manual to read a bit more about it, and BANG-O – it worked!

Now, I have created a “header.php” file that has all the information for the top of each of my pages, the specific content of each page, and then the “footer.php” file to complete the bottom of the page!  It works like a charm, and website building and updating just got a whole lot easier for me!

header.php

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”title” content=”Mike Ray Design” />
<meta name=”author” content=”mike@mikeraydesign.ca” />
<meta name=”owner” content=”mike@mikeraydesign.ca” />
<meta name=”subject” content=”Digital Media Provider” />
<meta name=”description” content=”Located in Prince George, BC, Mike Ray Design specializes in Custom Graphic Design, Web and Website Design, Website Creation, Photography, Videography, and 360-degree Virtual Tours for Real Estate Agents.  In addition to these forms of digital media and marketing we also offer SEO – search engine optimization, website development, and e-commerce sites.  Our websites receive excellent reviews, and our clients love our custom graphic design work, whether it be business cards, brochures, posters, flyers, or even post-it notes.” />
<meta name=”abstract” content=”Mike Ray Design loves to help people.  We love creating new websites, or revitalizing old webpages.  Having been in the digital media and marketing sector since 2008 we have had many opportunities to improve our designing practices, throughout all aspects of our graphic and web work.  Incorporating our photo and video services into our graphic and web designs, we create professional results in a timely manner.” />
<meta name=”keywords” content=”graphic design Prince George BC, website design Prince George BC, web site creation, Prince George graphic design, photography, Real Estate photography, 360 degree virtual tours, Realtor photography, Prince George photographer, British Columbia, Canada, Digital Design, custom websites, custom web pages, custom graphic design, marketing expert, digital media, video Prince George, videographer, videography” />
<meta name=”language” content=”en” />
<meta name=”copyright” content=”Mike Ray Design” />
<meta name=”robots” content=”all” />
<title>Mike Ray Design – Custom Web Design, Graphic Design, Photography, and Videography – Prince George, BC, Canada</title>

index.php

<?php
include_once(“header.php”);
?>
</head>

<p>Innovative.  Appealing.  Relevant.</p>
<br />
<p>Mike Ray Design – located in Prince George, BC, Canada – has been serving its clients since 2008 with innovative, appealing, and relevant design concepts.</p>
<p>Specializing in <a href=”web.php” target=”_self”>Web Design</a>, <a href=”graphic.php” target=”_self”>Graphic Design</a>, <a href=”photo.php” target=”_self”>Photography</a>, and <a href=”video.php” target=”_self”>Videography</a>, Mike Ray Design has become a top choice of businesses interested in increasing their marketing presence.</p>
<p>Originally started to provide <a href=”photo.php” target=”_self”>Real Estate photography</a> and <a href=”http://www.bcvt.ca/” target=”_blank”>360-degree virtual tours</a> to the Realtors of Victoria, Mike Ray Design has grown dramatically from where we started to cater and accommodate the growing and unique needs of those we serve.</p>
<p>We offer a wide range of digital media services which allows us to help you in many different ways, and creates consistency across all your advertising mediums.</p>
<p>If you are interested in increasing your business presence in today’s market, please contact us.  We offer competitive rates, professional products, and quick turn-around times.</p>
<p>To contact us or request a free consultation please e-mail <a href=”mailto:mike@mikeraydesign.ca”>mike@mikeraydesign.ca</a> or phone 250.640.8642.</p>

<?php
include_once(“footer.php”);
?>

footer.php

<map name=”Map” id=”Map”>
<area shape=”rect” coords=”169,6,319,24″ href=”http://www.mikeraydesign.ca/index.php” target=”_self” alt=”MikeRayDesign.ca” />
<area shape=”rect” coords=”345,6,496,26″ href=”mailto:mike@mikeraydesign.ca” alt=”Send an email to mike@mikeraydesign.ca”/>
</map>

</body>
</html>

Tags: , , , , , , , , ,
Posted in Websites, design, facts, insight, learning, new, php, teaching, tutorial, web design | No Comments »

Advertising with a blog

January 4th, 2010

I’m not going to lie – a large reason I wanted to start a blog was to try to capture on advertising revenues.  Here’s the example:

Let’s assume a website has 500 visitors per day, and each visitor visits 10 pages on the site.  That is 5000 page views per day. If that same website place CPM (cost per mille) ads on it, they will get paid for 5000 impressions. Let’s also assume that of those 500 visitors, 10 decide to actually click on a link – that is now 10 CPC (cost per click) ads added to that CPM revenue. Further, if of those 10 CPM 1 visitor decides to sign-up on that new website to receive some kind of promotion, product, or service, that is now 1 CPA (cost per action) revenue stream, all generated by a website that may already be in existence.

Although I don’t expect my blog to rake in any life-shattering amounts of visitors or revenue, I figured, “Hey – if I want to really make a go of this work-from-home-and-build-websites-and-do-graphic-design-thing, I better do what I can!”

As of now, I am waiting on approval from Google AdSense to start using those advertising box things.  I have also been looking into the inline-text advertising option, scoping out Chitika as a possibility for this. Both have an “approval period”, where they will examine the site, the blog, and see if I’m legitimate I guess.

I know what some of you are thinking – “Great – all I want to do is go to Mike’s site and checkout some of his recent websites and photos – I don’t want to be bombarded with ads!”  I couldn’t agree more!  The ad’s I’m looking at placing will be located only within the blog, and – as far as I can tell – there is an option to have with these ads to ONLY show if someone comes to the blog via a search query from a search engine.

Anyways, we’ll see what happens, and how things go.  I think I screwed up with the AdSense application, however, as I gave them the Mike Ray Design website, and not the blog – oops!  That shouldn’t be too hard to fix, however!

Tags: , , , , ,
Posted in Websites, advertising, making money, marketing, new, web design | No Comments »

A new website, and a new beginning

January 2nd, 2010

I started Mike Ray Design in the spring of 2008.  Since then we have had 3 websites.

The original site we created was very simplistic, and truth be told, was very ugly. We started using a predominately black website with white, gray, and orange highlights (most-often found as circular rings). This site did the job, however, and even managed to impress a few of our first clients enough to give us some business (thank you Rayn Properties!)

That being said, I (and my wife, Lindsay) wanted a change. We wanted to have a website that we were proud to show, and that was reflective of the quality of design we gave our clients. During a month-long trip to Victoria, BC in November of 2008, I started playing around with a few ideas, and eventually came to the current logo and design we have now. The website, though, was still different, and very limited.

When we launched the new brand and website in November of 2008 I hadn’t started to use php yet, but I HAD started to code in Flash ActionScript 2.0. I was absolutely convinced that flash was going to “take-over” the web, so I tried to use it wherever I could, often at the expense of search engine optimization, functionality, older browsers, and overall navigation. All the portfolio galleries I created were Flash 9 dependent, and updating them was not an easy task! Because of these reasons, I never updated the site, it couldn’t be viewed on older computers or mobile phones, and I wasn’t achieving the Google rankings that I desired.

All this takes us to December 2009, where I started to modify the site. In October I finished launching a website for TDB Consultants Inc, utilizing many of the options and ideas that I longed to have in my own web design. Shortly following this launch, I launched PG Automotive Services‘ site, where I was introduced to the idea of using MySQL databases to store information. These two sites together inspired me to re-create my own website at the time.

After then spending hundreds of hours reading through documentation and running tests and samples of php, MySQL, wordpress blogs, and even script validation, we officially launched the site on January 3rd, 2009. The look was similar, although we widened the webpage, changed our menus, added services, cross and inter-linked everything, and ran all our projects through a MySQL database; effectively, we “boosted” our back-end!

I’m sure this site will see more changes yet, however I’m  hoping that the design and development we just finished will make things much easier and more efficient from now on!

Tags: , , , , , ,
Posted in design, facts, history, insight, learning, new, web design | No Comments »