Portfolio Production Blog

To start designing my portfolio template I created a new document within Adobe Photoshop CS6. As you can see from the image above, I set the size to 420mm wide and 297mm in height which is the exact dimensions for a landscape A3 page. I set the colour mode to RGB and with 8 bpp as this would give me a wide variety of colours to use in my portfolio.

 

I have decided to use a ‘Bokeh’ effect as the background for my template. As you can see from image above, I created this effect myself in Adobe Photoshop. To do this, I put a gradient of blue’s which would influence the colour of the circles. You can choose any colours to use as your background, this is just personal preference. I then used the brush tool to create the circles. However, I altered the brush tool preferences slightly by changing the ‘scattering’ option to the maximum it could go (1000%). This made it easier to create the circles as it spread then evenly and randomly across the page (see image below). 

Once I had put one layer of circles using the scattering effect, I used a filter called ‘Gaussian’ filter, which blurred the circles into the background. For the first layer I used a high radius, which blurred the circles a lot, but for the second layer of circles I used a lower radius, which didn’t blur the edges as much. This filter helped create the Bokeh effect.

 

Below is a screenshot of my finished Bokeh background:

 

 

After creating the background that I was happy with, I went onto design my template which would be the basis of the majority of my pages with some slight alterations in the layout depending on the content.  I made a template as this would keep my portfolio consistent which makes it look more professional. As you can see from the screenshot below, I have used rounded rectangles in the background to make the context stand out more. However, in order to see the design of my background, I lowered the opacity to around 50%. I also added a headline at the top of the template which I can simply edit the text to the appropriate page.

 

After completing my template, I moved onto creating my front cover of my portfolio. I wanted to really show off my creativity on my front cover, as this would be the first page any employers would see and would make a first impression on. I wanted to include a picture of myself, which also expressed my passion for media and to show my creative side. I decided to combine a picture of myself and one of my favourite hobbies within media, which is photography. Therefore, by using the studio in college, I got a peer to take a picture of me whilst I was looking through the lens of another camera. I used this picture of the basis of the front cover and added a crosshatch effect onto the picture to give it a sketchy effect. I am happy with the design of my front cover as it is simple but gives off a strong message of what I am interested in and also my creativity.

 

The screen shot below is the page based on my stop motion animation. This page has the same structure as the majority of the other pages such as my magazine production page, comic book production page, promotional products page and the inforgraphics page. However, on this page, I created an animation filmstrip which would display some still screenshots from my animation. I made the filmstrip by creating a rectangle and adding small white circles to the upper and lower edges of the rectangle. I thought this would be a good idea to include as it is relevant to the pages content,  adds a hint of creativity and is makes this page unique. I also added a photo of the scenery from the place that I shot my animation in, which also shows my photography skills as well. I then finally added a brief summary of what the animation was about.

 

Next, I began to design the layout for my CV page as this had a different layout to my template. I based my CV page on my creative CV I created earlier on in the unit. I included a timeline in order to show my qualifications and work experience as I felt this was a more interesting way to display this information. I tried to add a creative aspect to my CV by including a table for my skills which shows how I judge myself on certain topics to do with media. I did this by using circles which, according to shape theory, are friendly which can also represent my personality. I also included a collage of words that I think are relevant to my personality. I did it this way as I think this is more of an interesting and creative way to display words that describe me.  I again used a transparent box to make the timeline stand out but at the same time being able to show the background.

 

For the interests and inspiration page, I created a collage of picture that resemble what I am interested in and who/what inspires me. Due to the image being different sizes, it was quite difficult to get a combination that worked well together. By using the transform tool in Adobe Photoshop (Ctrl+T), I rotated some of the picture and made them different sizes in order for them to fit together.

 

In my portfolio I included three photography pages. In our photography unit, we had the opportunity to explore Barnsley Town Centre and take photos of the surroundings. This is one of the simplest pages in my portfolio as I wanted the picture to fill the page to make it as clear as possible. I also rounded the edges of the picture to make it look friendlier and to make it not look like it has just been stuck on the page.

 

Colour Space

Colour space is a way of displaying a range of colours on a series of different digital devices such as cameras, printers and monitors. Colour space can be referred to as a digital colour palette that links numbers to colours. Each colour combination will have its own unique number, which makes these combinations identifiable. Different aspects can influence the colour space such as the lightness, darkness, saturation and hue.

An image can also be set to grey scale; this process takes sections of the colour image and applies the equivalent shades of black or white depending on the intensity of the light and dark areas in the original image.

YUV is a colour mode that can also be used in Adobe Photoshop, which takes into consideration human perception to make images more efficient for humans to look at. YUV is split into two sections to define the colour space. The ‘Y’ stands for luma, which represents the brightness in the image and then the ‘UV’ that stands for chrominance, which represents all the remaining colours.

RGB is made up of three different colours, red, green and blue. They are combined together in order to create a wide variety of different colours. Red, green and blue are all primary colours and therefore they are able to produce and secondary and tertiary colours when added together.

Optimising

When displaying images on the Internet, there needs to be the correct balance between the file size and the quality of the image. Normally, when a webpage is loading it is due to the images on that page, and this is why it is important to get the correct balance, as you don’t want the webpage to take a long time to load but also want the image to be of a good quality. There are certain areas within an image that can be reduced slightly in order to decrease the file size, such as the bit depth, resolution and the dimension of the image.

There are also several other ways that can help to reduce the file size of an image but keep some of the quality. There are different formats in which an image can be saved as in which some have smaller file sizes than others. The two main formats that are generally used are GIF’s which should be used for simple line drawing that are not too complex and the other is JPEG’s which should be used for photographs. There are other techniques that can be applied as well such as cropping out certain areas of the image that are not needed; this will help reduce the size.

Image Capture

Once an image has been taken on a camera, it can be transferred onto a digital device which allows the image to be seen on a larger scale and also it can be shared with other people or used on a piece of work etc. There are several ways in which images can be imported onto a digital device, such as, a connection lead straight from the camera to the device or also the memory card from the camera can be removed and put into the device that also has an available memory card slots. People tend to use the memory card way as this makes it easier to keep organised of images. However, people do not always want to get images off a camera onto a digital device, sometimes, they have a hard copy of an image in which it needs to be scanned onto the device via a scanner. Once the images have been successfully transferred onto the digital device, it is a case of sorting out the file format of the image which will have an effect on the file size; however, the lower the size of the file tends to have an effect on the quality (resolution) of the image.

Bit Depth

In order select a specific shade of colour within a bit, sampling would be used to get the colour that meets your requirements. In Adobe Photoshop, there is a tool that allows you to do this very easily and is very accurate.

Bit depth can either mean the numbers of bits used to show the colour of a single pixel or the number of bits used for each colour component used in a single pixel. Overall, the bit depth counts how many colours are available in a certain image’s colour palette in terms of the number of bits available. The definition of a ‘Bit’ is the basic unit of information in computing and digital communications. To specify how many different bits are used within a pixel, we refer to this as bits per pixel (bpp).

Every pixel in an image is created through a combination of three different colours, red, green and blue (RGB). These colours are generally referred to as colour channels. The bit depth of each primary colour is known as ‘bits per channel’ (bpc).

When using Adobe Photoshop, there are 8bpp, 16bpp and 32bpp to choose from. The majority of digital cameras have 8-bits per channel and therefore they can use a total of 8 bits per pixels. The table below shows how many colours are available with each bit per pixel. As you can see, when using 8 bits per pixel, there are 256 colours available to use which is a large amount to produce a good coloured image (.GIF file format only supports this amount).

However, higher bits per pixel are available such as 16 bits per pixel which is commonly known as ‘high colour’. These colour depths are sometimes used in smaller digital devices such as mobile phones. In 16 bits per pixel, there can be 4 bits for each red, green and blue and then an extra 4 for transparency. Again, as you can see from the table, 65536 colours are available when using 16 bits per pixel (high colour).

There are also 24 and 32 bits per pixel available which are known as ‘true colour’ and there is 16777216 colours available for each. The only difference between 24bpp and 32bpp is that 32bpp also supports transparency. Usually true colour means that there will be 256 shades of each RGB colour resulting in a better quality image. However, the human eye can only identify 10 million colours and therefore using 24 or 32 bits per pixel might be too excessive.

On the lower end of the scale is 1 bit per pixel which is known as ‘monochrome’. This only includes two colours which are generally black and white.

In order select a specific shade of colour within a bit, sampling would be used to get the colour that meets your requirements. In Adobe Photoshop, there is a tool that allows you to do this very easily and is very accurate.

Vector Images

Vector graphics use geometric primitives (points, lines, curves and shapes or polygon) to create an image on a digital device. Vectors, which can also be called paths or strokes, are lead through certain locations called control points in order to create the image. The central points have a permanent position on the x and y axes and are assigned a colour, a shape, a thickness and also a fill. One of the main advantages of a vector image is that it can be scaled to a large size and will not pixelate. Below is an example of how an object can be scaled and not lose its quality.

Vector images can be generated using a number of different software such as Adobe Illustrator, Adobe Flash and CorelDRAW. As photographic imagery are raster images (include pixels), therefore vector file extension do not support them. There is a large variety of file formats that a vector image can be created in, such as .SVG, .EPS, .FLA, .AI, .CDR, .WMF, and .DRW.

Raster Images

A raster image is used in a certain way to represent digital images and is quite often referred to as a bitmap. There is a wide variety of formats that a raster/bitmap image can be created in, including .gif, .tiff, .jpg, .png, .psd (Photoshop) and .bmp. The image contains many bits of information which then translate into pixels when displayed on the screen. The pixels then convert to form points of colour which creates the overall image.

Each pixel has been given a specific value that decides what colour that pixel is going to be. To assign a colour to the pixel, it uses a RGB (Red, Green and Blue) colour system. There are a total of 256 colour values to choose from allowing it to have a wide range of values.

In order to scale a raster image to a certain size, it all depends on the resolution of the image. If the image was to have a large resolution then it would be able to be viewed on a large scale without any of the pixels being on show. However, if an image had a low resolution, the larger that image got, the easier it would be to see the pixels in which it would be quite difficult to see the image. Below is an example of how pixalated the image is when zoomed in.

 

Raster compression is the process that reduces the size of a raster file resulting in saving space on any system. This can be done in a couple of way; a JPEG file format is a lossy compression method which is mainly used with full colour images and also grey scale images, however, this can lower the quality of the image as pixel values are lost. The other way is to use a LZ77 file which is lossless format where no pixel values are lost.