You can click the following link to enhance the reading of this article: Reading Blinds.

What’s on the menu?

What we are going to create from scratch is this custom designed photo portfolio with a single home page jquery slideshow and an about page for the personal details.  Here are some screenshots of the finished product.

Quick History

For those of you who do not know, in addition to being a Telecom/IT specialist I am also a graphic artist/web designer.  I have always been very artistic and have a passion for creativity.  I own and operate a Motorsports Photography website called MotoMontage.com.   Originally started up for my wife to earn a little extra income while track side at motor sport events in addition to expressing her passion for photography, it ultimately became more of a side hobby for me.   I purchased an entry level DSLR and some lenses and began learning the ins/outs of photography.   I jumped right in and absorbed all I could find as it related to action photography and in no time I was building photo-blogs for all my riding buddies.  I have since had a limited amount of personal photo shoots and now offer a service that includes a custom portfolio website which is very attractive for serious athletes wanting to attract attention or woo the sponsors.  It’s also great for individuals show just want to show off!

I wanted something original and unique.  I have done all the design and coding myself with little outside help.   Also note that I’ve done this in my free time and without any capital invested, except domain and hosting costs of course.   By the way, I use JustHost.com which has been a great hosting service with unlimited plans that are super cheap.   The big seller for me was the unlimited domains offer and their service has been great over the last 2 years. If you are interested in affordable hosting you can support me by checking them out via the link below. Ok, yes, shameless plug, I know…

How I found Stiqr.com

In my search for an easier and less time consuming website development/management tool I came across Stiqr.com (still in beta with free signups at the time of writing this article). What caught my attention was so unique, I have been consumed with Stiqr’s progress since I stumbled upon it, (literally found via stumbleupon’s service).

Stiqr offers a content hosting service that allows you to add/edit elements on your website as if pasting stickers on your monitor. All this via a small script you install on your web page. Your page can be completely blank actually.

Step 1. – Create the host pages (Novice approx. 5 min.)

Create a new page on the root of your site.  I called my page stiqr.php but in most cases you would use index.php or default.php. (you don’t have to use php but that’s my preference)

Here is the code:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js”></script> <script src=”http://load.stiqr.com/sticker/api”></script>

Here is the html page with the script installed:

As you can see, I’ve added 2 other elements that I found on the Stiqr forums.  One is for SEO purposes and the other is for css styling.  All in all, loading this page in our browser would only produce and empty page with just the title in your browser’s address bar.  So where’s the magic?  Ok, the Stiqr script did load but you must first create an account and login.  This is done by pressing SHIFT + F2. (account creation is based on the domain so you only have to do this once for all pages you will be calling the stiqr script and sorry folks, local testing servers won’t work)

IMPORTANT

You will first be asked for an email address for your account and THEN you will be asked to set your password.  Once completed, press SHIFT+F2 again to login, this time only being asked for the password you set.  To logout, simply refresh the page in your browser, usually F5.

I then copy and pasted the same code inside my other page named stiqr_about.php, of course, changing the page title information.

Step 2. – Slice our Photoshop design (Novice approx. 1/2 hour)

Now that we have created a Stiqr account, logged in for the first time and logged out, let’s slice up our Photoshop design and upload the parts of the design we will use for our page background, social links and sponsor links.

First, let’s hide all the layers so we can get our background design.  I created a 2400×1200 background image for large widescreen monitors to give my photography web site a full and rich look to it.  I also made sure the left and right ares of my image were seamless so it would horizontally scale indefinitely. Pretty rare that someone would have anything that wide but hey, I figured why not.  I’m kind of a perfectionist for things like that.   I then use Photoshop’s “Save for Web and Devices”  to save the background as a jpeg with about 50-60% quality.

Next, let’s reveal our slideshow border layer (which I masked a bit using layer mode Darken) , use the point-to-point selection tool  to trace around the edges, copy and paste into a new image with a transparent background.  Next we’ll save the image using “Save for Web and Devices” but choose PNG24 as the file type so we can retain the transparency.

Let’s do the same for all our sponsor logo’s, social media links, the slideshow “previous” and “next” buttons, and finally the motomontage logo in the upper right hand corner of our slideshow viewer.

Step 3. – Upload our design elements and set our site background image (Novice approx. 1/2 hour)

Let’s login to our Stiqr administration and begin adding the elements.

The administration panel loads and at the time of writing this article shows in the bottom portion of your browser window.

On the Stiqr admin panel, select image and then select My Images.  Now we upload the images we saved from Photoshop one by one.  The images are stored on Stiqr’s cloud-hosting service.  To upload an image, click on the choose file button and browse for your image, click ok, add any SEO tags you wish and then click upload.  In a moment you will see an indication of the progress and then an icon will appear for the image you uploaded once the process is complete.  Continue adding your images until they are all uploaded.

Now, clicking on any of the image icons will place the image on to our site where it can be dragged and postioned, however, we’re going to skip that for now and setup our sites background.

Select background from the admin panel menu and choose the option to open my images, select the background image and click ok.  I chose to also define a background color that will show anywhere the background image is not displayed.  I made the color black #000000.  I chose to have the background image tile horizontally and I specified the absolute positioning of top and center.  This way, no matter what size the viewer’s browser is, the background will always be centered.  Last but no least, click the stick it button.

This is what our site should look like.  Click on save and refresh the page to view how it looks to the public.

Step 3. Adding the basic content (Novice approx. 1/2 hour)

Now let’s start adding some of our images and dressing up our page.  Click on images and then My Images and then click on each image you want to place.  One at a time, position them where you like using the rulers, grid and snap tools as needed.  You can even right click on the object to get more precise control of the positioning.  Most elements are aligned to the center of the page, so from the right click edit menu, under the Display tab you will see options to specify top and left positions in pixels.  What this means is having a value of 0px in the left field will align the left-most side of your image/element to the center of the document.  So if I want to make sure something is absolute center, I divide the width of the image/element in half and use that as a negative value for the left positioning option.  For example, I have an image of 32px wide, I would specify left: -16px to get it centered perfectly on the page.

Additionally, if I want several items horizontally alligned I would make sure they all have the same top value under the edit > display menu.

Once you have everything positioned where you want it, go ahead and save your work.

Lastly, let’s add some links to our images using the right-click menu and entering our link into the General > Got To URL field.  You can select to have the link open in a new window if you wish.

Here is what it should look like with our sponsor images added.  I finished by adding the social images and links and the motomontage logo at the corner of our slideshow background.

Stay tuned for Part 2 where we will be adding our jquery slideshow with custom navigation buttons and also adding some flare to our sponsor and social links like hover events.  We will also add a  background switcher and create our additional page.

If you enjoyed this post, make sure you subscribe to my RSS feed! You can also subscribe by Email and have new posts sent directly to your inbox. When you feel bored, follow me on Twitter.