Week 10: Creating Loot Icons

-

This week, I created 11 icon designs of loot items, such as tinned foods and weapons, to use within Unreal Engine as part of UI pop-ups when the player collects items. 


I first collected examples of Western illustrations to use as inspiration when creating my icon designs. At first, I wanted to create detailed icons in the style of Western engravings, such as the example below; however, I decided to use a more simplified engraving illustration style, as I believe a detailed style with thin strokes wouldn't work well at a small scale in my HUD. 




Illustrating in Procreate 

I took screenshots of the 11 loot items within Unreal Engine, both lit and unlit, to use as references. I then imported the screenshots into Procreate on my iPad and began to illustrate the icons using the Deep Cuts brush pack from Retro Supply to achieve a traditional engraving style using digital tools. I made sure to leave gaps when colouring to replicate the lines cut into engraving plates during the 1800s in the Western Frontier. 





Modifying the Icons in Photoshop

Once I had finished the icon designs in Procreate, I exported my files as PNGs so I could bring them into Photoshop on my PC and add texture to them to create the effect that they had been printed on paper. 


I firstly sourced a paper texture online and then changed the image to black and white, and increased the brightness using Photoshop. 




I then brought my icon designs into Photoshop and created a new layer with the white paper texture I created earlier and set its layer blending mode to 'exclusion'. This makes the icon black, so I merged the icon layer and texture layer together and inverted it to make the icon white, and then removed the background.  





Finished Icons












Location: Preston, UK

Comments

Post a Comment

Popular posts from this blog

Sem 3 Submission

-
Image
Semester 3 Learning Agreement: : Western Project (UI Design) Research + Development Blog Posts: Week 1: Planning the Looting System Week 2: Design Characteristics of the Western Genre Week 3 + 4: Collecting Inspiration Week 5 + 6: Initial Concepts Week 7: Creating the Western Prototype in UE5 (Part 1) Week 8: Creating the Western Prototype in UE5 (Part 2) Week 9: Creating the Western Prototype in UE5 (Part 3) Week 10: Creating Loot Icons Week 11: Adding Pop-Up UI Elements Week 12 + 13: Creating Mission Passed/Failed UI Week 14: Improving the Lighting + Final Touches Knight Light (UX Design) Research + Development 
Read more

Semester 2 Submission

-
Image
At the start of semester 2, I had no prior experience with Unreal Engine 5. To broaden my skillset, I set a goal to learn the fundamentals of the engine and create functional UI elements within the engine, each with a unique design style. I initially planned to create a health bar, speedometer, and item collection counter; however, as I became more confident using Unreal Engine 5, I shifted my focus towards creating more complex UI prototypes tailored to three distinct game concepts, each with unique genres, themes, and gameplay. To achieve this, I dedicated most of semester 2 to learning about Blueprint scripting within Unreal Engine 5 in preparation for creating my 3 UI prototypes in semester 3.  Learning UE5: Throughout semester 2, I used tutorials and courses to learn the fundamentals of Unreal Engine, and then applied this knowledge by creating a variety of systems within Unreal Engine, such as health bars, door animations, item pickups, and more. Creating a book of common nod...
Read more

Week 7: Creating the Western Prototype in UE5 (Part 1)

-
Image
Creating a New Level I created a new level and called it 'my_saloon', and then I imported the following assets that I will use to build the environment: Saloon Interior ,  Old West VOL.1 - Interior Furniture ,  Old West - VOL 2 - Tradesmen Tools and Props ,  Old West VOL.3 - Travel Supplies and Goods ,  Old West - VOL 4 - Goods and Supplies ,  Old West - VOL 5 - Town Props and  Old West VOL. 6 - Town and Industrial . I then used the modular wall meshes from  Saloon Interior  to start building the layout of the saloon.  Creating the HUD I created a simple crosshair widget by adding a small white box and aligning it to the centre of the canvas panel. In the character blueprint, I used a 'Create Widget' and 'Add to Viewport' node to make the crosshair visible at the start of play. I promoted the return value to a variable so I can reference the HUD widget later. Creating a Working Door To enable the player to pass through an open door, I had to...
Read more