Adding line breaks within a string in PHP

This is something that has been on my “unsure” list for a long time. Partly because I haven’t really done my research on it and because, well, I just don’t require this very often. Finally, today I had a situation come up when I needed to ensure that the notes I am adding into the database are broken up with a line break between each note.

I know that there are these “\n” and “\r” or something like that but any time I’ve tried using them in the past it never worked consistently.

So today I decided to, once and for all, get to the bottom of this. Continue reading “Adding line breaks within a string in PHP”

YouTube (and other) Video Placeholder Image On-Click Swap Tutorial

I’ve received a good question or a tutorial request from one of my readers Andrew, he asked that I do a tutorial on how to make the video placeholder image hide on click and get replaced with the video itself. This is what this tutorial is going to be about. The first thing you will need is a placeholder image, and you can use the YouTube style video play button Photoshop layer PSD file For video placeholder images I posted in the past.

Once you have the place holder image, now we just need to code it in. First I will tell you how I do it and then I will show you. Maybe it’ll be easier to grasp this way.

First I create two DIVs, one will hold the placeholder image and the other will be where the video will go. I do not directly paste the video embed code into this second DIV but instead I have javaScript insert it in there when someone clicks the image. The reason is because we want the video to be set to autoplay but if we stick it in the DIV when the page loads, it will start playing right away in some browsers. So we leave that second DIV empty until someone clicks the placeholder image.

The image DIV has a onclick function call that will engage the function that swaps everything. It will first hide the placeholder image DIV and then insert the video embed code into the video VID and then will make this DIV visible.

You can preview how this works here.

Here is the code:

<div style="width:467px;margin:50px auto;">

	<div id="video_pholder" onclick="seevideo()"><img src="images/video-placeholder.jpg" width="467" height="286" /></div>
    
    <div id="video_code" style="display:none;"></div>
    
    <script language="javascript">
	
		function seevideo() {
			
			document.getElementById('video_pholder').style.display='none';
			document.getElementById('video_code').innerHTML='<object width="467" height="286">
				<param name="movie" 
					value="http://www.youtube.com/v/zIoFnfMhq_Y?version=3&amp;hl=en_US&amp;rel=0&amp;autoplay=1"></param>
				<param name="allowFullScreen" value="true"></param>
				<param name="allowscriptaccess" value="always"></param>
				<embed src="http://www.youtube.com/v/zIoFnfMhq_Y?version=3&amp;hl=en_US&amp;rel=0&amp;autoplay=1" 
					type="application/x-shockwave-flash" width="467" height="286" allowscriptaccess="always" allowfullscreen="true"></embed>
				</object>';
			document.getElementById('video_code').style.display='block';
			
		}
	
	</script>
    
</div>

That’s it, you should now be able to make your own placeholder image swap to a video.

An advanced Photoshop tutorial if you want to be a pro

Sometimes I see these amazing computer generated images and, even though I am pretty proficient in Photoshop, I wonder how did they manage to do that. Seeing this tutorial opens up opportunities and really gets down to nuts and bolts of the more advanced techniques. Like for instance, I had no idea you could take a remote apart and then change each part to look how you need it to look. To me a remote was a remote, a single element in the design, and they went and made sub-elements from it. That is great!

So above is what the finished product looks like, and here is a quick run through how it go there. This all started with 4 components, a remote control, a bullet and a couple of circuit boards.

The remote underwent surgery and was chopped up into it’s parts and some additional parts were created using the circuit boards. The buttons were extracted form the remote and some were created fron thin air.

As I said before, each individual part was ripped, warped and bent. Did I mention that Photoshop is amazing? Yeah, it is. Now each part is ready for assembly.

Put it all together and slap some background behind it and here you go, an awesome shot, a slow motion freeze frame.

To see the entire tutorial, and if you’ve read to here you have to see it, go here:

Photoshop Tutorial: Create A Slow Motion Bullet Shot Effect

Adding depth with small adjustments in Photoshop

It’s easy to take a few elements together into an image and arrange it to look nice. Then to make it have depth and give it the eye candy effect so the image doesn’t just look good but also feels good, takes a bit more. It’s not something you need to really have a talent to do but more of  a knowledge of what it is that adds the “flavor” to the image and the technique for applying it. The techniques I talk about in this article can be applied to almost any design and it will add the awesomeness to the design that you will love, so grab a pencil and make notes.

In this business card design I created for my bookkeeping software business I did exactly that. I found a nice background image at iStockPhoto.com and used it as the main background. Then I added some elements like the logo, some text and a color background block in the bottom section. It looks ok as it is at first but the design is dry, the text doesn’t pop, I just don’t feel it.

As a rule of thumb, the first thing I do to my designs is add depth, and this is done very simply with a gradient effect. Instead of using just one color to fill an area, I use a gradient of two colors, one just a shade lighter than the original and the second a shade darker. Just doing this will give the element almost a 3-D look or I like to call it depth.

I did this to the logo text first by double clicking the logo text layer and selecting the Gradient Overlay on the left and then clicked on the Gradient selector. There I chose the two colors for the gradient and clicked OK. As my logo consists of two colors, I did the same to the second section.

This small adjustment gave the logo the look I was looking for. A little darker green at the bottom of “cake” and a little gray at the in “io” makes the logo pop and stand out nicely.

Now I want to adjust the background mesh image as it is a bit too bright and too static. I want it to look like it’s more than just a mesh wall, want to give it some depth. To do this I will just use a black soft brush and will add some black around the edges.

I am using a black color Brush tool at size 500 and 100% opacity and flow. On a new layer just above the mesh image layer I trace the edges but I have to do this out side the image with only about 20% of the brush inside the image area as the 500px brush is very large and I only want the faded out edges of the brush to be inside. This will create a gradient look that goes from black at the edges to transparent in the middle.

To let off on the black a bit I adjusted the layer transparency to 75%. This gives the background a nice depth effect that I wanted, I can still see the mesh on the edges but it’s nicely darkened giving it almost a 3-D spherical look.

To finish this design off I will add a little bit of a gradient effect to the gray background in the bottom section by double-clicking the background layer and choosing the two gradient colors as I did in the first couple of steps for the logo.

This little enhancement completes the design, it takes the business card from a boring looking collage to a one sweet looking business card. I ordered the cards to be with rounded corners which will add to the design even more.

Once I receive my business cards I will post a scan of them so you can see the final product.

The bookkeeping software that I created called CakeIO is designed for small business owners and freelancers to save time on the dreaded task of bookkeeping. As a small business owner my self, I’ve struggled with this my self and have tried different solutions that are on the market but most of them are way to complicated for what I need it to do and so I’ve settled with the good ol’ Excel spreadsheet for years. At the end of 2010 I finally decided that I need to build something simple that small business owners can just dive right in and get things done quickly. That is how CakeIO was born. Check it out for free for 30 days, you might like it. Click here to find out more.  ;)

Tutorial on how to add HTML to facebook

I wrote about this before but we all know that facebook changes things on daily basis so the previous article has become obsolete, this is why I decided to update it and actually create a whole new tutorial as mostly everything in the old one no longer applies.

To add some custom HTML to facebook you have to create a facebook page, (not to confuse with a personal facebook profile) and then add HTML to it via a custom iFrame Application. Now don’t get scared off by this, I will walk you through every step in this tutorial.

I’ll show you how to create a facebook page first and then we’ll get our hands dirty with the iFrame goodness.

Creating A Facebook Page

After logging into your facebook account, go to http://www.facebook.com/pages/create.php and follow me as we create a facebook page.

Choosing The Right Page Category

On this page you can choose to create one of six different types of pages, depending on what category your page topic falls under. Choosing the correct category for your page will ensure that your potential customers are able to find your company easier. You also get to have special information that you can add for each category that might not be available in other categories. So make sure to choose the correct category. Let’s take a look at each one and what kind of businesses they apply to.

Local Business or Place

If you have a physical retail location that customers would come and visit you at, your choice should be “Local Business or Place”. With this category you will be able to specify the address and hours of operation of the business as in other categories you would not necessarily have that option.

Company, Organization, or Institution

This category is for companies or organizations, ones that might have multiple locations or other bigger establishments like banks, factories or something like that. Other companies that might want to setup a page in this category are ones that might not necessarily have a local branch, even small businesses that are run from home. But before you choose this category, take a look at the next one, it might apply better for you… or it might not. Let’s see.

Brand or Product

If you offer a specific product or are a brand that you want to market, this category would be the best choice. Here, as you can imagine, you would be getting very specific about what the topic of a page would be. A product like a specific kind of shoes or a shoe brand, a type of furniture like a special chair design or a furniture brand. I think you get the picture what I’m talking about.

Artist, Band or Public Figure

This difference between this category and the next one might be a bit blurry but they are both for the entertainment industry except the first one here, the “Artist, Band or Public Figure” is for a specific artist, band or a public figure as upposed to the next one which is for a broader type of business, like an agency, sports league or a TV channel. So if you are a band or an actor, this “Artist, Band, etc…” category is for you.

Entertainment

As I mentioned above, this “Entertainment” category is for a wide variety of entertainment industry type business. If you are not an individual or a group like a band but a business that is in the entertainment industry you should choose this category.

Cause or Community

This category is for some sort of a cause, like a cure for a disease or a support campaign, also a community or a group of people that have like interests. If you are looking to add custom HTML to your page, this is not a good category to go with as a page in this category is not allowed to have iFrame tabs and another reason you should not pick this category is after it gets 10,000 fans, facebook will throw the page into a communities pile and you will no longer own it but will just be a member. So stay away from this one, find a reason why you qualify for any of the other ones.

I am going to create a page for a fictitious toy called Wobble Mobble, so I will choose the Brand or Product category and then will choose Games/Toys subcategory from the drop down menu and enter the name of the toy into the text box. Check the “I agree to Facebook Pages Terms” and click Get Started.

Your New Page

Now you have your brand new facebook page. It’s still super empty so you can, if you like, go through the steps they recommend to setup your page a bit more. Add a profile image and invite some friends… but on the other hand you might want to wait till you get your custom page up before you invite anybody here, so let’s get to that now.

Adding Custom HTML Using An iFrame Application

To add custom HTML to your page you need to create an application ‘Tab” within your page. This “Tab” will be what will hold the iFrame that will display your HTML. Yes I know sounds confusing, just follow me along, I’ll show you how this works.

Let me tell you how a facebook page works so you have a bigger picture and understand better what all these tabs pages and apps are all about.

A facebook page is not really a one, single page, it is more of a bunch of pages in one, we will call them tabs… more like a mini-website. It has a Wall tab, where you and the fans talk and add announcements, pictures, videos and what have you. Then there is the Info tab which holds the information about the page. A photos tab is where you will display all the photos that you upload to the page. These three tabs come included by default with your facebook page and you can add mode additional tabs. The only way to add these extra tabs is to add facebook apps to your page, each app you install will show up as a new tab. So what we need to do is create a custom app ourselves that we can add to our page as a new tab. This app that we create will pull an external web page via the iFrame, from somewhere online that will hold your custom HTML.

This was a quick crash course on adding custom HTML to your page, but now let’s dig in and see how it’s all actually done. We have the fan page so now we need to create an external page which will hold our custom HTML. This will require that we have some sort of web hosting already setup. I am going to assume that you already have a website online somewhere, so if you do not have one yet, you will need to find another tutorial about setting up a website first and then come back to this and continue from this point.

Creating A Custom HTML Web Page

Here all we really need to do is create a .php page that will hold the custom HTML code that we want displayed on the facebook page. You can build it as any standard html page, the only thing is you need to make sure your page is 520 px wide and make the page have a .php extension.

I built a simple HTML page and uploaded it to this website. It is accessible by simply going to the URL: http://www.webdesignideas.org/fb.php The iFrame in the new Facebook App that we create will call this page and display it right inside facebook. Now let’s create an app.

Creating A Facebook App

To get started creating an Facebook application, go to https://www.facebook.com/developers/createapp.php and enter the App name in the text box, then click Agree and Create App. You will get a Security Check box that will ask you to enter some text into a text box, do that and click Submit.

About Section

Now we get into setting up the app. On the first page (above) you will see that we have six sections on the left and we are on the About section right now. Here the only thing you need to set up is the Application Name, which we already entered on the previous page and it’s been automatically populated for us. You have a choice to upload an Icon and a Logo images for the App if you like. The next thing we need to enter is the User Support Address, which we have marked as email and entered my email into the text box. For the Contact Email I entered my email also. That will do it for this section. Do not click Save Changes until we are done with all the sections. Click on the Web Site section in the left sidebar.

Web Site Section

In the Web Site section I entered the website URL where the custom HTML page is residing, which is “http://www.webdesignideas.org”. Remember, this is not the actual URL of the page but the URL of the website where the page resides. Then I entered the domain of the site, which is just “webdesignideas.org” without the “http://www”. Click the Facebook Integration section in the left sidebar to continue.

Facebook Integration Section

This is the section where we tell facebook where to look for our custom HTML page. I gave the Canvas Page a url of http://apps.facebook.com/”wobblemobble”. This is the URL of where this App we just created will reside, so it is good to give it a url that represents your page name with no spaces between the words.

The Canvas URL is the URL of where our custom HTML page lives again, don’t forget the trailing slash, they really want that one. iFrame Size should be Auto-resize, and Social Discovery should be enabled.

The Tab Name we can make whatever we want, plus we’ll be able to change this later on so it really doesn’t matter at this point what you call it. I like my primary page to be called Welcome so that is what I entered. Then I entered the actual URL of the custom HTML page.

At this point you can click Save Changes button at the bottom.

New App Information

Congratulations, you’ve just built your first facebook app! Now let’s add it to our facebook page. Click the Application Profile Page button (see image above).

Your App Page On Facebook

This is your app’s page on facebook. Since this is not a public app but just a placeholder for our custom HTML, we will not need to personalize this area. Just ignore everything on this page except for the Add to My Page link in the left sidebar (see image above).

Find your page that you created earlier and click Add to Page next to it and click Close.

Now that you’ve added the app to your page, let’s go see what it looks like and set it up as the default tab. Click the Facebook logo at the top left to go to the your facebook profile page.

Setting Up The Page With The New App

On your facebook profile page click the Pages link in the left sidebar (see image above). Find your page in the list and click on it.

Now you should see the app that we’ve created in the left sidebar showing up as a one of the tabs. Ours is the Welcome one in the image above. Let’s click on it and see what it looks like.

The New Welcome Tab

As you can see we have our custom page showing right inside facebook. Now we can set this page to be the default tab that opens up to any one visiting the page that has not liked it yet. This is great to create offers and capture emails if you build a custom page that does something like that. Let’s make this tab default.

Click the Wall tab first in the left sidebar and then the Edit Page button on the top right.

Here pick your tab, in our case it is named Welcome, from the Default Landing Page menu and click Save Changes. Now anytime someone visits your page, the Welcome tab will be the first thing they see.

Whew, that was a long tutorial.. It’s almost 2 am already and I am ready to pass out. I’ll come back in the morning and go through the tutorial to make sure I didn’t make any mistakes as I’m half asleep. lol joking… zzzzz…….zzzz… oh, that’s right… where was I?

Anyway, I hope this tutorial helps you out. Please leave your comments and questions below and I will be all over them as flies on.. um… a picnic fruit tray.

Read the Facebook page alignment and removing the scroll bars next »

Later.

Tutorial on Creating A Custom Looking Form with CSS

Plain ol’ boring looking forms are not as cool as they once were…. well now that I think about it, I don’t think they were ever cool. They are just functional…. so why not make them look nice, add some design into them and make them match the rest of the page? This is exactly what I wanted to do in this post. I’ll walk you through adding a design to your form.

To do this you will need a custom designed form graphic, it needs to be a complete form design as you see in the above image, with the form fields and the button all on the image. If you have drop-down fields this will not work, this is only for text field forms.

Continue reading “Tutorial on Creating A Custom Looking Form with CSS”

Creating A Facebook Fan Page & Customizing It For Your Business

UPDATED –> Thanks to facebook’s fast moving evolution, this article has become some what outdated. Please read the new Tutorial on how to add HTML to facebook that talks about creating a custom page on facebook.

So you have a Facebook account for your company and you have friends on there, what next? Facebook allows you to create a Fan page where you can dedicate this page to anything from a specific product to the entire brand and within this page you can create a custom looking page which can have a lot of functionality from your company’s website including links to products and sales pages. Once you have the page created you can collect Fans which does not require that you know the people like it does when you add friends. This expands the potential customer base significantly, so I recommend that every business has a Fan page setup.

In this article I will walk through creating this Facebook Fan page, step by step. I have to note though that like in previous Facebook articles that I wrote, as Facebook updates their site and the Applications get updated the information in this article may become outdated but the main idea and basic setup should still apply and I am sure you will be able to find the current information simply by searching Google.

Ok, let’s begin.

Continue reading “Creating A Facebook Fan Page & Customizing It For Your Business”

Make Your Own Photoshop Brushes

brushes1

Sometimes, while doing a design, I need a certain kind of a brush and after searching around for a while I realized that what I needed I would need to create my self. On that note, here is an awesome tutorial for creating your own Photoshop Brushes. It takes you step by step, and has detailed instructions.

See the tutorial: How to Create Your Own Photoshop Brushes