Images

Image 1 - Butterfly Ballerina

Process

I open both images in affinity photo, I have selected the “butterfly image” to be my starting image. I then selected the ballerina image, where I use the selection brush tool and highlight the ballerina from the image, I then clicked refine, looked at what is selected in the image, seeing if everything is ok and clicked apply, I then mask layer, where what I have selected will have its own layer, I then copy the masked image in to the butterfly image and paste the selected ballerina image, I then resize the image to fit and move the image to where I will like it to be, I have also flip the image of the ballerina. I have duplicated the background image, where I have selected filter and blur and average, where it will mix all the colours from the image and make one colour. I ten move the image into the ballerina layer, I then selected the ballerina layer where I selected a curve adjustment layer which will help even the dark and light colours, I then added a colour balance, in which I will be blending the colours to how I will like which is a blue tint, I adjusted the highlights and mid-tones. I then use the gradient tool to a duplicated background which I added a blue tint and for the other I added a white tint, to make it look like a light and dark image and saved the image.

Exporting

When exporting, I leave the image to the size it came in which is 1920px x 1080px, in a PNG format, whole document, file size 255kb.


Final Image in full

Original Images

Img 1: pexels.com, Size: 250 kb, Dimensions: 1920px * 1080px, Author: Pixabay

Img 2: pexels.com, Size: 851 kb, Dimensions: 1920px * 2880px, Author: Wellington Cunha


Affinity File

Image 2 - Bokeh Girl

Process

I drag the images of the girl and the bokeh balls into affinity photo. I then copy the photo onto the photo of the girl. I unticked the image of the bokeh balls, I then began to manipulate the photo of the girl, I then duplicate the image with the girl, I then proceed to filter, sharpen and clarity, I then began to adjust the strength of the clarity, and I found myself choosing 60% and apply. Then from layer, instead of normal on the drop-down list, chose screen, then lower the opacity to 60% also. I then began to check the bokeh balls, where I then adjusted where I want the bokeh balls image to be positioned, I then clicked the adjustment icon, where I will be selecting the recolour, in which I will drag on top the bokeh balls layer, so the recolour doesn’t affect the whole image, I will then begin to adjust the recolour, for the hue to 35 and saturation to 26, I then clicked the adjustment icon again and selected the levels adjustments, drag the levels adjustment onto the bokeh balls layer, I then open the levels adjustment and change the black levels to 15%. I then began to add a mask to the bokeh ball layer, in which I will be painting out some of the bokeh balls from around the girl’s face, I selected the black and ever so slightly painted the balls out of her face. The affect that was given to the image was the make it seem like the light is affecting the camera in some way.

Exporting

When exporting, I leave the image to the size it came in which is 1920px x 2560px, in a jpeg format, whole document, file size 758kb.


Final Image in full

Original Images

Img 1: Kevins Image Image was taken by me, Size: 2.12 mb, Dimensions: 3024px * 4032px, Author: Kevin Cabey

Img 2: pexels.com, Size: 217 kb, Dimensions: 1920px * 1280px, Author: rovenimages.com


Affinity File

Image 3 - Refliction

Process

For this image, I began to search pexels.com for images with people sitting in a café and an image of outside on the street with the light in some form matches, I then downloaded both images with the same size which is 1920 by 1280. I then began dragging the images into affinity photo. I then copy the image with the street into the image with the people in the café, I then adjusted the street image to the position I want it to be in, on the layer I then click the drop down tab where is says normal and selected screen, which will blend both of the images where only the lightest part of the images will be showing, I then clicked adjustments and selected levels adjustments which you will drag onto the reflection layer which is the street image, on the levels adjustments I then toggle the black levels to see what is best for the mirror effect I was trying to achieve. I then be adding a blur to soften the reflection image as it is to clear for a reflection image, so I have clicked on the reflection layer and then selected live filters and then gaussian blur, I will then increase the radius to blur the layer until the softness look ok for me 5.9.

Exporting

When exporting, I leave the image to the size it came in which is 1920px x 1280px, in a jpeg format, whole document, file size 443kb.


Final Image in full

Original Images

Img 1: pexels.com, Size: 467 kb, Dimensions: 1920px * 1280px, Author: Helena Lopes

Img 2: pexels.com, Size: 743 kb, Dimensions: 1920px * 1280px, Author: Shvets Anna


Affinity File

Image 4 - Photo Collage

Process

I first selected 5 images from pexels.com, searching the category interracial couple, I then downloaded 5 images that I think was very useful for the next image I was going to create which was a photo collage. I then opened affinity photo, where I then went to file, new, pre-sets and chosen 1920 x 1280 as a standard background pre-set. I then selected the rectangle tool, where I made the shape 1920 x 1280, where I then resize the shape by dividing by 2, I then duplicate the shape 4 times, and place them in the 4 corners of the pre-set, I then began to add another shape which is the diamond where I have then resize the diamond and will be placed in the centre of the 4 rectangles, I then selected all the shapes, I then clicked fx the open the layers effects dialog box, I clicked on outline, where I then increased the radius to 10px and change the outline to white, I have also change the outline to center. I then created another rectangle where I sized it 1920 x 1280, I then opened the layers effects and gave the same radius and change the alignment to inside, I then lowered the rectangle fill opacity to 0, as I just want the online only. I then click file, place and I find the images I need and highlight them all and click open, I then drag out the image over the shapes, I then drag the images onto the shape. Finally, I then adjust and resize the images to fit the shapes and the collage was finished.

Exporting

When exporting, I leave the image to the size it came in which is 1920px x 1280px, in a jpeg format, whole document, file size 364kb.


Final Image in full

Original Images

Img 1: pexels.com, Size: 266 kb, Dimensions: 1920px * 1280px, Author: SHVETS production

Img 2: pexels.com, Size: 457 kb, Dimensions: 1920px * 1280px, Author: Anna Shvets

Img 3: pexels.com, Size: 198 kb, Dimensions: 1920px * 1280px, Author: Andrea Piacquadio

Img 4: pexels.com, Size: 232 kb, Dimensions: 1920px * 1280px, Author: Leah Kelly

Img 5: pexels.com, Size: 529 kb, Dimensions: 1920px * 1280px, Author: Helana Lopes


Affinity File

Image 5 - Text Portrait

Process

I first downloaded the image from pexels.com, which I have chosen a standard looking on at the camera model. I then dragged that photo into affinity photo, I then used the artistic text tool to add text, I then position the text on where I would like to put it, then I change the font and reduce the spacing between each line. I went along duplicating the image, where I then dragged onto the text image as a child of the text, I then draw a rectangle using the rectangle tool coloured black, covered half the image on the right side, I than aligned the text layer to the left side the rectangle near the centre, I then given the text some online with the colour from the image which is a light yellow, then I just simply fine tune the text outline and adjusted where the text is positioned. Finally I added a rectangle covering the whole image, where I selected outline in layers effects, I have increased the radius of the outline with the alignment inside, colour black and fill opacity 0.

Exporting

When exporting, I leave the image to the size it came in which is 1920px x 1280px, in a JPEG format, whole document, file size 255.83kb.


Final Image in full

Original Images

Img 1: pexels.com, Size: 251 kb, Dimensions: 1920px * 1229px, Author: David Garrison


Affinity File

Image 6 - The Blending

Process

The last image was the most complicated yet for how much I have manipulated the image I began downloading the necessary images, in which I will need for my fantasy photo. So I began dragging all the images into affifnity photo, I then selected the girl from the photo with the selection brush, I then refine to make sure all the bits of the girl image is selected, I then masked the selected image, I then adjusted the image to the position I wanted the girl to be, I then use the selection brush again where I used it to select the birds from the image, I then hit masked again to create a bird layer, I then adjusted the size of the bird image and position the bird to the right center, I then added a cloud layer, I then selected the cloud layer and then hit masked, while the masked is selected I then use the the paint brush tool to remove some on the clouds, I then added a levels adjustments, where the black levels are 14% and the output white levels are at 96%, I then added a curve adjustment to adjust the colours of the clouds the blend with the background image. I then apply a levels adjustment to the girl layer where I just up the black levels to 15% and lower the output white levels to 96%, I have also added a curve layer to the girl image, to make the greens the colours on the girl layer to pop more to blend with the other colours, I then painted back some of the cloud layer back in to make it seem like the girls sitting from the air, I then made a shadow to complement the girls image, where I selected the girl using the selection brush, where I then painted and masked, I then used a box blur to make is look like a real shadow of the girl. Finally I then added a levels adjustment over the whole image just to brighten up the whole image a little.

Exporting

When exporting, I leave the image to the size it came in which is 1920px x 1280px, in a JPEG format, whole document, file size 589.6kb


Final Image in full

Original Images

Img 1: pexels.com, Size: 255 kb, Dimensions: 1920px * 1280px, Author: Keenan Constance

Img 2: pexels.com, Size: 410 kb, Dimensions: 1920px * 1280px, Author: Stanislav Kondratiev

Img 3: pexels.com, Size: 522 kb, Dimensions: 1920px * 2880px, Author: Manideep Karne

Img 4: pexels.com, Size: 526 kb, Dimensions: 1920px * 1440px, Author: Sasha Prasastika


Affinity File


Gif

Gif Image Quote

Process

my first step was to select an image that i will be using for the GIF, the image I will be using is the 1st image with the ballerina witht the butterflies in the background which i have manipulated. I used affinity photos, where i use the text tool to write a quote I found online about photography in a sequence. I then saved each image as a GIF file. I will be using the website ezgif.com to create my gif, as i found it fast and easy to use than GIMP. I upload the 6 images I will be using, I then chose a delay of 100 seconds and infinite loop, finally I then resize the image from (1080px * 591px - 2.37 mb) to (540px * 295px - 447 kb).

Exporting

Exporting GIF image to 540px * 295px - 447 kb.


Final Image in full

Original Images

Img 1: pexels.com, Size: 250 kb, Dimensions: 1920px * 1080px, Author: Pixabay

Img 2: pexels.com, Size: 851 kb, Dimensions: 1920px * 2880px, Author: Wellington Cunha

Mod Images

Image for gif: on the cloud, Size: 255 kb, Dimensions: 540px * 295px, Author: Kevin Cabey


GIF Images File


User Interface Mockups

About the design

My thought of this design is from when I was manipulating the 6 imagesl, the idea was a photographer, as they are the people that take photo for a living and enjoy it with a passion. Photographers has always shown their design skills in when they are talking photo, and as they do, they also show the same creativity for there portfolio also.

Mockup Link: Download Here to see a more visual representation of all the formats.

Desktop - Home Page (full width 1920px)

Process

The home the base of the whole website consist of a nav a footer and the same colours and font throughout. There is also a landing page with an image of the Ballerina Butterfly image that I have manipulated. Then a about section, whcih on the left is an image from pexels.com of a photograther, with some dummy made up text about him with also a button and on the right is some more dummy text, with 2 more photos from pexels.com of 2 photographers, and under the image is a dummy quote that I have written. In the next section is about socials and where people can find them, with a heading and the photograthers Instgram ID, along with some more photos i have gotten from pexels.com align with spacing with all the same size, finally in the footer, throughout all the pages I have placed links to all the pages, social icons for all the plateform you are able to find them on and a copyright tag for who created the design.

Desktop - Gallery Page (full width 1920px)

Process

for the gallery page it was pretty straight forward of what will be on this page, some on the same elements from the home page has carried over. On the landing page you are presented with "The Gallery" in large text, then a filter nav, for when the user selects on on the option it will narrow the images down. for the first 6 images, they are what I have manipulated and added to my design to show more veriaty, for all of the images on the gallery page, i have sized them specifically for where the margin for the images, also I have added heading for each on the images at the bottom with some names.

Desktop - Image View (full width 1920px)

Process

For the design I have created a view box for when the user clicks on the image, the image will pop out in a larger format with the image number along with a left and right navigation and a close button with a back background to dim the website layer for more focus on the popped out image.

Desktop - Contact Page (full width 1920px)

Process

For the contact page, nothing too fancy. Some of the same elements has carried over from the home and gallery page. Heading text at the top in large, with some dummy text under it. I then created some boxed to hold the address, contact number, email and a link to the website. I have then added a contact section with a name, email, subject and message box on the right with a send button and on the left is a map to show where the photographer is located

Mobile - Home & Gallery Iphone 12 Pro Max(width 428px)

Process

In the mobile view was abit easier, as I just have to scale down everthing that I have done for the website view, I have change the nav to a ham burger drop down menu and for the gallery itself I have also change the filter to a drop down menu too.
For the home page i have scaled down the landing page along with the heading text, for the about section I have also scale down the siz to fit the mobile window, for the images in the social section i have grouped them in a 2x2 grid scaling down to fit the mobile window, and finally for the footer I have changed the layout where the logo is first, then under I have made a 1x4 nav, under that i have also made the social icons 1x4 to fit the window without scalling down and finally the copyright tag which is still the same.
For the gallery section I have also scalled down everything sech as text heading, filter to drop down, all the images, all the fost sizes and the footer as the same as the home page.

Art Board

UI Style Guide

Bellow is all the UI elements, colours, typography and components that I have used to complete my website mockups


Refferences

Images Used

Img 1: pexels.com, Size: 250 kb, Dimensions: 1920px * 1080px, Author: Pixabay

Img 2: pexels.com, Size: 851 kb, Dimensions: 1920px * 2880px, Author: Wellington Cunha

Img 3: Kevins Image Image was taken by me, Size: 2.12 mb, Dimensions: 3024px * 4032px, Author: Kevin Cabey

Img 4: pexels.com, Size: 217 kb, Dimensions: 1920px * 1280px, Author: rovenimages.com

Img 5: pexels.com, Size: 467 kb, Dimensions: 1920px * 1280px, Author: Helena Lopes

Img 6: pexels.com, Size: 743 kb, Dimensions: 1920px * 1280px, Author: Shvets Anna

Img 7: pexels.com, Size: 266 kb, Dimensions: 1920px * 1280px, Author: SHVETS production

Img 8: pexels.com, Size: 457 kb, Dimensions: 1920px * 1280px, Author: Anna Shvets

Img 9: pexels.com, Size: 198 kb, Dimensions: 1920px * 1280px, Author: Andrea Piacquadio

Img 10: pexels.com, Size: 232 kb, Dimensions: 1920px * 1280px, Author: Leah Kelly

Img 11: pexels.com, Size: 529 kb, Dimensions: 1920px * 1280px, Author: Helana Lopes

Img 12: pexels.com, Size: 251 kb, Dimensions: 1920px * 1229px, Author: David Garrison

Img 13: pexels.com, Size: 255 kb, Dimensions: 1920px * 1280px, Author: Keenan Constance

Img 14: pexels.com, Size: 410 kb, Dimensions: 1920px * 1280px, Author: Stanislav Kondratiev

Img 15: pexels.com, Size: 522 kb, Dimensions: 1920px * 2880px, Author: Manideep Karne

Img 16: pexels.com, Size: 526 kb, Dimensions: 1920px * 1440px, Author: Sasha Prasastika

Img 17: pexels.com, Size: 740 kb, Dimensions: 1920px * 2880px, Author: Suliman Sallehi

Img 18: pexels.com, Size: 808 kb, Dimensions: 1920px * 2880px, Author: Luis Quintero

Img 19: pexels.com, Size: 863 kb, Dimensions: 1920px * 2880px, Author: Kaique Rocha

Img 20: pexels.com, Size: 429 kb, Dimensions: 1920px * 1920px, Author: Yuri Manei

Img 21: pexels.com, Size: 194 kb, Dimensions: 1280px * 1280px, Author: Jane D.

Img 22: pexels.com, Size: 1.13 mb, Dimensions: 1920px * 1920px, Author: Seyfi Durmaz

Softwares/Websites - Used

Affinity Photo: Link , was used to maniplulate and edit images

ezgif.com/: Link , was used to create the GIF

Adobe XD: Link , was used to design my website interfaces

VS Code: Link , was used to design the webpage that has the contents of the project.