This post is about a challenge I did from a course on LinkedIn Learning. I am learning Photoshop, which is a powerful software that allows the user to manipulate images. In this challenge, I had to combine textures with a photo using blend modes and layer masks.
Above: LinkedIn Learning
Above: Screenshots of Original Images in separate layers.
Above: Screenshots of edited images. The first thing I did was change the Book_texture layer into a different blend mode. I changed the mode from Normal to Screen. This created a slightly transparent look, where the woman in the image was visible. Next, I made the Book_texture layer into a layer mask by clicking on the rectangle icon with the circle in the middle at the bottom of the layer panel. Then, I used the brush tool to remove parts of the texture. I wanted to reveal more of the woman’s face, hair and overall appearance. I used black paint to remove elements of the image and this created a focal point.
After this, I worked on the Paper_texture layer by changing the mode from Normal to the Linear Burn mode. I liked this as it created a sort of vintage look. I made the layer into a layer mask and removed parts of the image with the paint tool. This time, I lowered the opacity of the brush tool so that the colour was grey and not black. I wanted to do this so that when I used the brush tool to remove parts of the image, it would be subtle. I created a brighter effect around the woman by doing this.
Above: Final Outcome
Conclusion
It was great to learn about blend modes and layer masks. It was also great to put it into practice. I look forward to learning more things in Photoshop.
This post is about a challenge I did from a course on LinkedIn Learning. I am learning Photoshop, which is a powerful software that allows the user to manipulate images. In this challenge, I had to manipulate an image using a variety of selection tools.
Above: LinkedIn Learning.
Above: Original Image
Image 1
Image 2
Above: Screenshots of edits in Photoshop and the final outcomes for Image 1 and Image 2. To create the 2 images, I used the Object Selection Tool to select elements. The Object Selection Tool can be used to automatically select something. You can click on a subject or drag a shape around the subject to select it. Firstly, I used this tool to select the hat. Then I created an adjustment layer and selected a solid colour. I chose the #1779bd (blue colour). I wanted a different feel to the original image, and chose a colder and calmer colour than the original colour for the hat. To make the hat visible, I changed the layer mode to Multiply. I repeated these steps for the lips.
I used the unity design principle to match the hat and lips by using the same colour. To make the elements further standout, I changed the background colour to a warmer colour. I did this by choosing Select in the top menu, and then Subject. This automatically selected the portrait image and then I inversed the selection by choosing Select – Inverse. I used another adjustment layer to change the Hue to a warmer colour. For Image 2, I used the Hue adjustment layer to change the skin tone to purple. The colour purple can be associated with something mysterious so I thought it was a good colour to communicate this message.
Image 3
Above: Screenshots of edits in Photoshop and the final outcome for Image 3. I used the Quick Selection Tool to select the hat. The Quick Selection Tool is great for quickly selecting larger areas of an image. This can be done by dragging around the area you want to be selected. It is located in the toolbar right beside the Object Selection Tool via the drop down menu. Once the hat was selected, I created an adjustment layer. Adjustment layers are great because you can modify an image without damaging the original image underneath the adjustment layer. I chose the Solid Color of #ff0bb2 (pink) and changed the layer mode from Normal to Color, so that the hat is visible through the layer.
For the lips, I used the Object Selection Tool and then repeated the same steps as I did for the hat. The background was created via a Gradient adjustment layer and I used a Radial Gradient effect combining the colours #92bfd9 (light blue) and #0a8bd5 (medium blue). The cold blue background has contrast with the vibrant pink elements and the bright portrait. I really like this image because it is aesthetically pleasing and the contrasting elements work well together.
Funnily enough, during the process of this creation I had various thoughts running through my mind. Some of the thoughts were things like musicals, candy, Charlie and the Chocolate Factory, Mary Poppins and even Katy Perry’s California Girls. Perhaps it is because of the vibrant colours associated with them. After the first image, I wanted to design something more eye catching and a “feast for the eyes”. The colours pink and blue were the first colours to come to mind.
Image 4
Above: Screenshots of edits in Photoshop and the final outcome for Image 4. I wanted to do something a little different for the final image. I wanted to add extra elements to the original composition. The first thing I did was cut out the hat element and duplicate it a few times to create a repetition effect. I did this by using the Quick Selection Tool to select the hat and then I duplicated the selection unto a seperate layer using the keyboard shortcut: Ctrl + j on a windows computer. Then, I scaled the hat down to a smaller size and used the free transform tool (Ctrl + t) to rotate it slightly upwards. I wanted to match the colour of the hat with the colour of the lips so I used an adjustment layer and changed the hue to a similar colour to the lips. I also decreased the opacity for the hue from 100% to 90% to make it less intensive. I repeated the same steps for the other hats and rotated each hat slightly more clockwise and slightly increased the scale. This created a rhythm and a motion effect. I also repeated these same steps for the lips. Instead of clockwise, the lips were rotated anti-clockwise. This created contrast in terms of rotation compared to the hat elements, but also unity was formed because of the repetition, alignment and colour.
I used a Radial Gradient effect to create the background. I combined the two colours #ffffff (white) and #a96cdc (purple) to create a sense of mystery, and also to create a spotlight effect for the main subject. I created a #34144f (dark purple) Solid Color adjustment layer for the hat, and changed the layer mode from Normal to Hue. This allows the viewer to see through the layer. This also creates unity with the background but contrast because of the foreground (hat) texture.
To finish, I completed the design with a slightly daring question: “Do you like what you see?” This can refer to the design or the portrait. I thought the question perfectly matched the tone of the design. I chose the colour red to form unity, and I chose the font Century Gothic (Bold) because it reminds me of elegance and fashion which I feel matches the portrait.
During the process for Image 4, songs such as Santa Baby, Big Spender and films such as Who Framed Roger Rabbit came to mind. I guess it is because of the nature of the songs being slightly daring and the character Jessica Rabbits also fitting this description.
Conclusion
I enjoyed learning about the selection tools in Photoshop. I had the opportunity to experiment with the different tools and create interesting designs. The selection tools in Photoshop are really powerful and I was surprised how easy they were to learn. There are numerous ways to select elements in Photoshop so it was great to learn how to use them. This will certainly help me with my future projects in Photoshop.
This post is about a UI (User Interface) design I created for a TV app.
The project was generated using the design brief generator. The brief description is as follows:
I am Karen, I am looking for a UI designer. I need a design of a TV app.
Although the description is very short, it gave me the opportunity to practice my design skills.
The first thing I did was browse through my phone and look for TV and streaming apps I had installed. I found four apps: Netflix, Amazon Prime, BBC iPlayer and ITVX. The next step was to analyse the UI designs and decide which screen I wanted to design. I decided to choose the home/main screen that a user sees when the app is opened, then I sketched the four apps I found on my phone and took some notes.
Sketches of current TV UI apps
When I was analysing the different TV apps, I started to notice some similarities and differences. For instance, all four apps had a dark background and light foreground which helped create contrast and make elements standout. Three out of the four apps had a bottom menu to allow the user to navigate to other parts of the app. The logo and profile/account icons were placed at the top. Some of the differences were the size of the images, content information and visual elements such as buttons with only two of the apps having an image slider. What I found really interesting is that all of the apps used a main image that connected with the user. The main image has a character looking at the user; this is inviting and creates an instant emotional connection with the viewer.
Analysis of UI designs
“Good artists copy. Great artists steal.“, I remember reading this quote from somewhere, and what I got from it is that nothing is really original. We find inspiration from what we see around us and what has already been done. So redesigning is a great way to practice design skills. I took screenshots of the UI designs and imported them into Adobe Xd, and copied the designs. This was a great thing to do because it made me think about the elements that are placed on the UI. I started to see certain patterns and icons being used. It made me think of principles such as alignment and repetition.
By the way, if you know where the quote is from, feel free to leave a comment on this post!
The original UI’s are on the left, and the redesigns are on the right. I found images that were already downloaded on my computer and used for other design practices. I created titles to match the images and make it look like movie posters. It was fun experimenting with the typography, layout and images.
After these exercises, it was time for me to come up with ideas for my own TV UI app design. I started off by making a list of things I wanted to include such as: a main image, bottom menu and simple, easy to understand icons. Following the list, I created a few thumbnail sketches.
Then it was time to get practical, I opened up Adobe Xd and used the sketches to guide me. I did not choose a colour whlist sketching but I decided to choose the colour purple. Purple can represent royalty or luxury and I wanted the viewer to feel like they were in a creative soothing and perhaps calm environment. I chose dark purple to cover the majority of the background and a lighter shade of purple to cause a division for different sections.
Image of my UI design
At the top left-hand corner I placed the logo. This is considered a standard for TV UI app designs. To make the logo standout, I made sure to choose colours different from the majority of the design. I chose warm and energetic colours like yellow and orange with the sans-serif font Montserrat. In fact, all of the fonts in the design are sans-serif. The body text is Arial and the title texts are Impact for the main image and Montserrat for the smaller images. I chose to have 3 icons in the top right-hand corner because I could not get the balance right to have 5 icons for the bottom menu. It was too crowded for the size I wanted the icons to be for the bottom menu, therefore it was best to position 4 at the bottom and 3 at the top. I chose the search function to be placed at the top as that is one of the main functions the user looks for, and I also used YouTube as an inspiration for the icon’s position. The connect and profile icons are also there. I chose bright colours to create contrast between the icons and the background.
For the main image, I wanted a striking image that immediately caught the attention of the viewer. I also wanted an image that had a character or human being looking directly at the user to create an instant connection. I chose the image taken by the photographer David Kuko. I chose the Impact font to do what it says on the tin, and chose the title “Speak Clearly” to enchance the image and overall design. The description allows the user to know more about the content.
The button is directly below the image and uses the rectangle shape with rounded corners. I took inspiration from the ITVX app for the button. It really made me want to press it. I also used contrast to create greater visibility and made it 50% the width of the screen. The words “WATCH NOW” are simple, effective and urgent. The placement of the button is also important as I realised it made sense to make it closer to the bottom than the top in order to make it more comfortable for the user to press the button. Having to reach for a big button nearer the top of the screen could cause a little frustration.
The bottom section comprises some smaller images that represent more content. Again, I tried to choose images that look like film posters but are also captivating. The titles are both light and dark and relate to the other colours in each image. To emphasise the section I made the word “New” standout with yellow, and highlighted the “Home” icon in the same colour. The rest of the bottom menu options are in white. This helps the user understand where they are in the app. The images formed at the bottom were from Andrea Piacquadio, Yuri Manei and Spencer Davis. All of the images were taken from the website pexels. I downloaded a plugin in Adobe Xd to implement the icons.
Conclusion
This was a great experience. I was a little nervous at the start because I did not know how I was going to create the UI. But it really helped to analyse real life apps and then gain inspiration from them. More to follow.
This post is about a graphic design I created for an architecture company.
I used a design brief generator to find a project to work on. The brief description is as follows:
I am Tillie, the creator of Sion. I’m looking for someone that can design something for my architectural firm. I would like a simple flyer for an event. We primarily use the colour blue #42cfff.
Although the description is very short and, is not a real life creative brief, it gave me the opportunity to continue working on the principles of design.
The first step was to note down my thoughts. Any thought that came to mind was noted down immediately. and this helped me generate ideas which you can see below.
The next step was to do some research and look at architecture flyers. I searched online for different types of architecture flyers and this gave me inspiration and ideas of how to design a layout for a flyer and also what details to implement. After this, I sketched out a few ideas in the form of thumbnails which you can see in the images above. I tried to incorporate the principles of design for each idea.
You can see the final design above. One of the words I noted down during the first step was cold colours and the other was buildings. So I made sure to incorporate the blue colour the client requested in some of the elements such as the text and logo design. I also chose a picture from pexels which had buildings. I thought that the image was really interesting and I liked the perspective it gave to the viewer. The logo design was created in Illustrator and is a combination of different size rectangles replicating the shape of a building. The black slanted thick lines were used for an added dimension and I chose a font style which was light and thin.
I placed the logo at the top in the centre because that is where the poster image provides a focal point. The contrast design principle was used to seperate the logo, text and icons through the use of colour i.e. light and dark colours. The placement of the text at the bottom also allows the logo and buildings to stand out further and instantly grabs the viewer’s attention. The principle of unity was used to create a strong relationship between the logo and the company information in the slanted box in the bottom right of the design. This was used by having the same colour. The text is wrapped around the rectangle to divide the information; one was the address and information about the schedule, the other was the purpose of the event. They are all linked by using the same font which I wanted to represent corporate modern architecture, straight clean lines in sans-serif form. The rectangle is slanted to make it interesting and also to replicate a building shape. The slightly transparent effect adds more dimension.
The largest word in the design is “Event” and this is to emphasis to the viewer what the flyer is about (perhaps I could have also emphasised the words “Architecture Industry” for specificity). I placed additional information about the company including the website underneath the event title and the social icons underneath the company information. Both sets of additional information are the smallest in terms of scale indicating to the viewer the lower level of importance compared to the other elements.
Conclusion
I created graphic designs responding to the creative brief for an architecture firm. It took a while to get going but I really enjoyed the journey. I also like creating these posts about my designs because it allows me to go through my thought processes and analyse the works.
To see other designs, feel free to check out my portfolio.
Michael's Monde 