Modifying the jQuery and HTML

To make the panoramas work in the web page, I had to place the completed, reduced file size jpgs  into a web directory folder (root/images). I also had some premade HTML documents of the web pages, aswell as an index.


To link the image into the panorama, I had to open the web page in Textwrangler. I then had found the object that was the panorama window, and simple had to change the link from /images/test1.jpg to the name of the image (/images/panofinish.jpg) Once that had changed, I had to modify the length of the panorama. In the viewer object code, there was a height and width. The height was set to 400 (hence why my images were lowered to this height). The width was set to 0. To make the code work, I had to change the width value to the width of the image. To find this I found the jpg file > right click > get info. This showed me the dimensions of the image so I could change the code. I repeated this process for all four HTML pages. 


I also added a simple <div align="center"> tag, followed by a </div> just before the final </body> code to center everything.


Due to my images being different sizes, the speed changed between the four webpages. To fix this, I had a look at the jQuery code. The first thing I noticed is that jQuery is coded similar to CSS so was very easy to understand. The few variables down is "speed", set to a 5 digit number. After a little experimenting I discovered the higher the number = slower the image rotates. 


To change them for all 4 html files, I duplicated the jQuery file 4 times each with a different name (jquery1, jquery2 etc). Once these were created, I had to link each HTML to its own jQuery (otherwise they would all link to the same code, thus all having the same speed). This is done similar to how you link CSS to a webpage. In the header, there was coding that linked the webpage to the jQuery. I simply modified each of these on the four HTML pages to link to the relative jQuery. (html1 linked to jquery1, etc). This allowed me to have different speeds for my four panoramas. I played with the numbers alot until I achieved the perfect speed. The smaller the image width, the smaller the number needs to be. For example, my car panorama speed is around 15000, my restaurant speed is over 75000. 

Crit

After critting my panoramas the feedback was mixed. Many liked my theme, and my technical skills with photoshop. However, my flaws (which I have stated in this blog) were also pointed out. At this point in time I do not have alot of time to fix the problems at hand, as deadline is coming up fast. I have taken the feedback onboard however and will try my best to fix some of the problems.


My restaurant panorama received the best feedback, with the technical skills involved and the overall feel of the final image. The panorama of the car had comments of the height of the image, and that the image should have been taken in portrait to show more of the car. However, taking the image portrait would have been impossible as I do not have a center-pivoting tripod that supports portrait images. However, in argument to this, a few people liked the fact that it was at an angle in which you do not normally see a car, which made it more interesting. My first two panoramas only got commented on the flaws in the image editing, which I have already stated in this blog and how some of them are seemingly impossible to fix due to the shots taken. 

Saving the images - Resolution and File Size

I used a high resolution DSLR camera to shoot my images, which resulted in very large images and file sizes (average image: 3.4mb). In my shoots I took between 25 and 65 images. When importing these into photoshop, I realised that file size may be a problem. I was using a mac with only 1gb of RAM, which really slowed down the process. Once I imported all of the photos and merged them into one photoshop file, I was working with a (at the smallest) 1gb file. My restaurant panorama was a PSB of nearly 2gbs. These panoramas had around a 10 meter print length! (The restaurant one was around 25 meters!)


Working in such a high resolution really ate at the computers power, and simple tasks such as cropping took atleast 3-5 minutes (no joke). However, whilst not being the most efficient way of working, I chose to work at full resolution, so I had much higher quality images to work with.


Once I had finished the panoramas, I saved them as a PSB (which took around 7 minutes...) and then lowered the resolution.


By keeping the width and height relative, I lowered the height to 400, which in turn changed the width. I lowered the images to 400px high as this is the size of the panorama viewing window that we were given for the HTML delivery. This lowered the resolution by a fair amount, and also the file size. This process took a working file of around 1.5gbs to around 35mbs. Once the file size was lowered, it was alot smaller but still to large for web delivery. Using the "Save for Web & Devices" tool in Photoshop, I was able to save out the image as a JPG, bringing the file size to around 1.5mb. This is still large for major web delivery, but it retains a high enough quality so that the image is not distorted for maximum viewing capability. 

Final Panorama - Restaurant

Here is my completed panorama for my fourth entry. Overall, I feel this panorama was a complete success, with not many issues and problems with the shoot or the stitch. The overall effect is exactly what I wanted, a dark outside with a light inside, with a seemingly deserted restaurant. There was no colour shift due to artificial lighting (which, if I realised before my first 4 panoramas, it would have made it alot easier!) The panorama is very large, which also adds the sense of the scene being big. 


I feel like after finishing this panorama I have come a long way in technological photoshop knowledge and working with a camera and choosing a scene. Looking back on my first three, I feel this one shows how far I have come with my photoshop skills of stitching, and merging. I have also learnt how important choosing a location and scene is, and all of the variables that may effect a shoot and the final outcome of a panorama. 

The Shoot + Stitch

I have shot the images for my panorama and started to stitch them together. I took a total of 65 images for this panorama. I placed the camera at the top end of the restaurant, starting at a wall. I then moved around in a clockwise motion, which passed a close window. This window reflected the whole back of the restaurant which created a really nice reflection effect, and as the camera pans round the restaurant just goes further and further back. I think this shoot was very successful.


The stitching process wasn't that hard to be honest, but time consuming. Working with this many images, layers, and layer masks, was not a quick process. As I had so many images I could take out key points, and use that in the final. For example, this pillar here is made of 3 different images.

The windows, doors, curtains and tables have been really easy to stitch together, with not much problem. By using layer masks with different opacities of brushes, I have been able to stitch the whole panorama together. The only problem I faced was the wallpaper by the mirror, but to fix this I simply copied it, mirrored it, and pasted it. This isn't immediately obvious but when looking closely at the panorama you can notice the repeated pattern of the wallpaper (looks a little like a dragon face). I feel this fix was simple, and effective.

Location - Restaurant

For the fourth panorama in this series I have chosen to do my work, a restaurant. 


The restaurant itself is rather big, with 'sections' with the tables in. These sections are blocked off by wooden railing-type things, that extend high, so I will have to choose the location of my camera carefully. If I place the camera in the centre, alot of the restaurant will be blocked off. If I choose to take the image at the end of the restaurant, there would be a massive depth of field technical issue that may be difficult to overcome. As of the nature of the establishment I work in, I will not be able to shoot the panorama until the restaurant is closed and empty (around 10:30pm). This means that the lighting inside will all be artificial, which should make the stitching easier as (hopefully) there won't be a massive colour shift. The lines of the windows, curtains, tables, railings, doors, and bars, may prove this panorama to be very difficult to create. 

Final Panorama - Park and why I have not used it

Here is the final stitched image of my park panorama. I have decided not to use it as the colour shift is to great and, honestly, it just looks bad. The colour shift is huge, and this is visible over a few parts of the image. The bark chippings didn't really stitch well at all which also looks amateur. This panorama is a perfect example of why location can be a very difficult thing to choose. If the weather was different, or it was shot at a different time, maybe the colour shift wouldn't have been so bad. Maybe if I positioned the camera at a different angle it wouldn't have been so difficult to stitch the bark chips together. If I were to do this project again with more time I would make sure to reshoot and try to stitch the images together, using a different time, lighting, and weather. 

Park Stitching - Unfixable colour shift?

I have shot the images of the park and begun to stitch them together. By using layer masks and a bit of warping I've been able to merge the first ~35% relatively well. 

However, once moving around to the 40% - 60% mark a colour shift has taken place, and I've been using levels and curves to try and sort out the stitch, which is working, a little. The trees and grass were quite easy to stitch here however, which I thought would be difficult. The bark chips are a pain, and by stitching them in a curved line, instead of a vertical one, should make the stitch look less obvious. However, Once hitting around the 70% mark there is a crazy colour shift that, after using colour match, levels, curves, and brightness I have been able to reduce to the image below.

Compared to how it was beforehand, this isn't too bad (and that's saying something) but it's still bad enough to make the image look bad. 

Location - Park

Slightly branching away from "A day in the life" theme, I thought it might be a good idea to do a panorama of a park near me. This sort of fits the theme, as I usually take my younger cousins to this park on a regular basis, but I also wanted to try it due to the technical difficulties, to see if I could over come them.


Firstly, the park is surrounded by trees, and houses. Instantly posing a problem for panoramic stitching. Secondly, there is alot of grass and shredded bark, which may prove difficult to stitch effectively. Thirdly, The sky, lighting, and sun can cause a very large colour shift that (I'm sure) will be very difficult to overcome. 

Final Panorama - Car

My complete third panorama. I am overall pleased with this panorama. The image stitching looks somewhat professional, baring in mind that due to the nature of the shot this panorama could have been very difficult to stitch. However, I found the process rather easy, apart from the stitching of the view outside. The buildings look a little skewed, but this may be down to the angle of the window, refracting the image through it. I like how the whole image is in focus (apart from the back seat) which makes the image interesting as the angle it is viewed at is not an angle which is seen very often in a car. 

The shoot and stitching

After many tries, I managed to get the camera into the car by mounting the tripod between the gear stick and two front seats. I then (awkwardly) took the images inside the car. I took a total of 30 images for this panorama. 


Once uploaded, the overall stitching was actually very easy. By (once again) using layer masks, and overlapping 3 images at a time, I was able to create a panorama that didn't look to bad! By using manual focus I was able to use my own depth of field within the images, which made stitching easier, and also was able to make alot of the image in focus (Apart from the back). 


The building outside were difficult to stitch and make look real, with a few buildings being skewed. However, as the main focus point is inside the car, the outside isn't as obvious. 

Location - Car

For my third panorama I would like to create the panorama in my car, to add the third image to the theme of "a day in the life". As I have quite a small car, this instantly poses problems. One, The closeness of the dashboard, steering wheel, doors, and windows. Secondly, the scene outside the windows... Will it be in focus? Will there be a colour shift? Thirdly.. How am I going to get the camera on a steady tripod inside the car?! 

Final Panorama - Kitchen

This is the final image for my second panorama. I am overall displeased with the quality of the stitching and colour shifts. However, the colour shift around the window works well I think, compared to my previous panorama. However, the obvious stitches really let this panorama down. I did try very hard to create a good stitch, but with the resources and images I had it seems impossible (unless you are a person with a very good education and understanding of photoshop) 


Some of the stitching however, I think is done very well, and apart from the obvious stitching this panorama is about the same quality as my first. Hopefully with my next panorama I will be able to fix both colour shifts and stitching. 

Panorama 2 - Stitching Nightmare

After shooting the images, I have realised how difficult this will be to stitch. 

Firstly, obvious perspective shift.  This occurred as the counter is so close to the camera, and as the camera pans it creates a shift in perspective. If the counter was further away, this would not occur so obviously. 

Colour shift and perspective. This occurred as, once again, the object was very close to the camera lens, creating the shift in perspective. The colour shift was from the window being above this, making the camera exposure change and creating a darker picture. This is after I have used levels and curves to recreate the best colour possible. 

A pretty awful merging of a straight line, once again because of the object being so close to the camera. The tiles in the reflection are also distorted, aswell as a colour shift.

Vertical / Horizontal lines merging and colour shift. Another very difficult thing to achieve.

These images are after I have tried my best to merge the image, but in some cases a smooth stitch is seemingly impossible. 

Panorama 2 - Kitchen

After completing the bedroom panorama and realising that the colour shift of the light outside which effects the walls is going to be a struggle in this location. The blind design is the same and the lighting (unless taken at night, which will not fit the theme) is difficult and awkward. Also, there is a horizontal line going around 50% of the scene, aswell as another 25% having a tiled wall in it. This will pose many problems as I attempt to stitch the image together.


Another problem that may arise is the depth of view around the image, as one side has close objects, and the other has far away objects.

Complete Panorama

This is my final panorama after all the stitching. Overall, apart from the major obvious join at the blind, the overall image is okay. The stitching process was easy, apart from the colour shift. I didn't need to use any clipping masks to change brightness, contrast, saturation and such to create the final image. 


Once the final panorama was created, I exported it as a JPG and opened it in photoshop, in which I selected half of the image at a point of no interest, copied it and deleted it. I then switched the two images over and blended them in the middle. This means either end of the image should match perfectly and when viewed as a 360 panorama the join isn't and shouldn't be obvious. 

The Stitching Process

After importing the images into photoshop and merging them all into one, I have started stitching the image together. The main tool I am using for this process is layer masking, painting transparency and opacity over the overlaps of the image. 

As you can see from this image, every layer has a layer mask. By using different brush opacities, sizes and softness, it is possible to create a "blend" over certain surfaces. 

This image shows the colour shift between the two layers. This is the best I can get the colours to match (even though it's pretty bad) However, before this it was extremely different colours. I used the Colour Match tool (Image > Adjustments > Match Colour) and selected the previous layer to match the colours from. However, it has created this pixellated effect which makes the panorama look amateur. This is still the best I can get the colour shift to match. 

Location One!

First location of my panorama is my bedroom, a relatively small room with quite a few horizontal and vertical lines, which can pose a problem when creating a panorama. Using a tripod with my camera, and placing the camera in the middle of the room I have shot my images. 


I took around 25 images in a circle around the room, but the lighting around the window made the walls darker which may create a colour shift once the panorama starts to be stitched together. 

Initial Ideas

Upon reading the brief I decided that I wanted to go with the theme "a day in the life of". This allows different locations and lighting to be used and challenged, aswell as creating a story between the panoramas.  I am thinking of doing my first panorama will be of my bedroom, as a morning scene. The next shall be in the kitchen, preparing breakfast. My third shall be in my car, and the fourth shall be at my work, after the day is over. 


The bedroom and kitchen panoramas pose many horizontal and vertical line issues, aswell as a  window being present creating a colour shift problem. The panorama in my car I imagine will be very difficult as the scene is extremely close, with depth-of-field issues through the windows. I work in a restaurant, so doing a panorama there will create problems with the lighting, lines, and tables.