Embedded Files
Isometric Building illustration
Styalised RPG Tradesman's House
Styalised RPG Tradesman's House
Isometric house design
Isometric house design
Quick note to self: 'isometric' is the lack of perspective. It is perfect for building up an environment for games quickly. Things can be duplicated and easily manipulated to fit different needs across a scene without the need to rescale or edit it's visual texture. This is similar to our game production brief which focuses on modularity aswell as our focus on perspective and composition in traditional art. This brief is very exciting and provides us with a lot more explorative and fun decision making opportunities in contrast to our last digital art brief where we where only studying & replicating real life materials.
For this brief, we are required to design a fantastical medieval shop using an isometric grid. While still indecisive about what items this shop could offer, I am determined to employ a colour pallet that is distinct from my previous block 1 projects. Reflecting on the summery page, I found my past works to be overly monochromatic with warm oranges and purples across Digital Art practices and Game Production. Seeking contrast, I have gathered images of cold and sinister Victorian-era Houses to inspire ideas for my shop's design.
Caught up in the excitment of the upcoming hero/villain project in block 3, I struggled to brainstorm shop ideas. Amidst this distraction, however, a villain who could manipulate time sparked my imagination, evidently leaving it's mark on the theme for my store: a fantastical shop specialising in clocks and other time-telling objects. This shop could also offer an array of different mechanical gadgets and toys, along with repair services for these trinkets.
New Photoshop Notes
New Photoshop Notes
Creating Straight lines:
hold Shift + draw - freezes line on the x/y axis
Draw dot + hold Shift + draw dot - creates a line connecting them.
Caps Lock - Toggles between cross-hair and brush outline
Ctrl + H = removes/ adds 'Extras'
W = Object selection tool
F = changes visibility (1st - removes unnecessary grey bar, 2nd - hides inventory + layers, only canvas is shown)
X = change to previous colour used
Brush settings:
Brush settings:
Shape dynamics: pressure causes brush size to change
Transfer: pressure causes opacity of the brush to change
Designing a shop that can be apreciated from both ground level and isometric has proven to be very challenging. Since I was planning to use the shop design in Digital for game production aswell, I wanted to make sure I included design choices that benefited both mediums. Isometric illustrations look best when there is an emphasis on sky-facing design choices. They benefit from interesting roofs and journey-driven visuals. This contrasts to 3D game models where players typically view buildings from below and apreciate smaller details at ground level that they can explore.
I began exploring designs in 3ds max during our first Game production session. I didn't have any visual idea of what it could look like so I just experimented by gathering random clusters of shapes and fitting them together (with a focus on sharp shape language). Blocking out even the simplest designs were challenging because I had never designed a building before so to me everything looked slightly strange and scaled incorrectly.
Isometric Concepts
Isometric Concepts
In our second Digital art session, I began to sketch more ideas down using an isometric grid after lookiing at a few more images of buildings online. To me, visualising three-dimensional shapes here was far easier compared to white-boxing in the endless void of 3ds max; ironically, the limitation of the grid felt freeing because I only needed to focus on one point of view. At times when I still felt a little overwhelmed by the posibilities of the grid, I simplified design choices even further by drawing designs in an orthographic front view. on this canvas you can see ten design ideas which are numbered in order of when I drew them, aswell as short annotations (blue if they are visually successful, and red if they aren't).
I enjoyed exploring these designs, however, when I had designed the first 6 houses, I didn't think most of them clearly communicated the shop's trading speciality. They should have more emphasis put into their overall shape language and have it embody the inner workings of clocks and sundials rather than relying heavily on a large clock at the entrance to tell the viewer that it is a clock shop. I could also include lamps that look like hourglasses, have circles and cogs scattered around the design, & spires made of intricate clock hands
I tried to work on these points in designs 8,9,& 10 and felt they resulted in much more effective designs.
Design 1 was inspired by my 3rd block in model
Design 2 & 9 where inspired by my 4th block in model
Design 10 was inspired by Design 8 & 4
Exploring design 10
Exploring design 10
Front
Back
I liked my 10th design so I tried to explore it further and explore the back side of it's design to see how it would work in 3D. I liked it but then I tried modelling it in 3ds max and my opinion changed. I no longer liked the strangely curled roof and the extremely elitist and mansion-like appearance it had. I felt that it didn't satisfy the mood I had initially intended for my design so I decided to scrap it and continue my search.
Sillhouets & Shape language
Sillhouets & Shape language
Despite having previously generated many concepts, I still wasn't feeling satisfied with any of the designs I had created. None of them successfully exuded the mood I initially intended so I was determined to continue experimenting.
Since I was getting so caught up on details, I decided to look at silhouettes to focus on what shape language clicked with me and what didn't. there are a mixture of both old and new designs created using the lasso tool for the sake of analysing the pros and cons of what I already had to work with. For old designs I simply traced my sketches, but for new designs I chipped and cut away at larger shapes I outlined using the lasso tool.
Through this exercise, I concluded that the designs which worked best where those with a clear, primary focal point - most often displaying itself as a large, imposing, angular roof. This was complimented with a secondary structure, such as a chimney/tower/ balcony, mirroring the shape language of the primary structure for cohesion.
Composition
Composition
By this point I knew exactly the kind of structures I wanted to include in my house design from the help of using silhouettes, I just had to figure out how they would be organised.
I knew that I wanted there to be;
a staircase leading up to the front door(preferably rounded to match the shapes of clocks and cogs)
a large bay display window
an extruding roof structure that resembled a cuckoo clock
a large clock/ circular window at the very front of the shop as the main focus point
a chimney or tower that resembled a clock's hands.
I drew these onto a generic building shape to purposefully get an ugly design down quickly so that I could start editing it and improving it. By the fourth variation, I found a layout that resonated with me and I finally had a rough sketch of my final house design that I was satisfied with.
Final Sketch & Feedback
Final Sketch & Feedback
With our final sketched designs, we had a class crit feedback session to reflect on our designs before we developed our isometric house illustrations further. This was very helpful because it was the first time I received an external response for this new design shop design and the points where super helpful.
Points mentioned;
Move the chimney either higher or lower so that it doesn't start merging in with the roof behind. if I do move it higher, make the base thicker.
Give the protruding building on the right have a sturdier looking base.
Add more shop signs and props, perhaps some street lamps, bushes, and benches to make it feel more lived in. perhaps even a toy train line?
Check the sizing of the windows and doors so that they are all the right scale. The roof windows look far larger than the door. Decide a definitive scale of a human in your scene to help with consistency
Give the cog archway a purpose and make it thicker. Since it is a point of interest, give the viewers something to look at and redirect them back to the entrance. Remember to think about the flow and ryhthm your lines are directing attention to.
Add a few more beams protruding out from the walls such as a cuckoo clock bird or wood beams
Shadows
Shadows
Playing around with shadows for any piece can be so much fun. For this design in particular I wanted to make sure the shadows did their part in aiding the narrative. Shadows can build more shapes for you without taking up extra room.
since shadows move, I thought it would be cool if it could help make the piece feel alive as it would always be changing throught the day. Having the shadow of the chimney lie perfectly readable on the roof makes the chimney and shadow both look like clock hands and it also imitates a sundial. I could have imprints on the roof for the roof itself to be a sundial.
I annalysed leading lines in my sketches which imitates the viewers eyes on the left piece below. The shadow is also helping to push the viewer's eyes back to the main focus points of the building rather than off the page which the cog-like bridge and the chimney was doing. instead of dropping off the page, it circles back to the entrance. the darker value overrides the forms, cancelling out the arrow-like direction of the chimney.
I should be aware that shadows constantly change in game so if I rely on the shadows to create the piece, The design will fall apart during any other time of day.
When adding shadows, I used the help of unreal to light my model.
I blocked in shadows and base values. I liked how unique this lighting looked and how it extended the cog-like-archway onto the ground to circle back to the main focus point, however, after feedback, I realised the shadow did not stay consistant with the rest of the shadows. They were also too dark.
Here I lightened the shadows and darkened the roof tile value. l attempted to further correct the shadows. There was also a bit of readibility issues with this render because the left roof window is being shrowded in the chimney's shadow when in reality it shoudn't be affected.
Colour iteration
Colour iteration
if going for a cold roof, go for a warm green on the bushes and trees for a nice contrast. always think of ways you can incorporate complimentary colours.
warm shadows & cold lighting
cold shadows & warm lighting
The design with warm shadows and cold lighting works better here because it has a clearer value read. This could also be because I didn't actually apply the warm light and cold shadows properly.
Colour vs Greyscale
Colour vs Greyscale
I really wanted to stick to my usual way of rendering which was painting directly in colour and all on the same layer. however, This is normally the approach I have when painting characters as I rarely ever paint environments. When I began using colour, I realised how many different materials there were to render, which can easily invade another's space since they are so close to one another.
Props
Props
Vintage cart reference
Final Outcome
Final Outcome
Grade: 78/100 (-2% from Block 1)
Grade: 78/100 (-2% from Block 1)
Feedback & personal notes:
Feedback & personal notes:
Despite it being slightly lower than my last received grade, I'm quite satisfied with it because I had been expecting 75% so its good to know my judgement isn't far off. I had already expected that this would be a difficult project for me so I am immensely proud of myself for pushing through!
What to work on :D
What to work on :D
Rendering! my materials look too vague and I was fully aware of this but because of my poor time management and the fact that I have never rendered an environment in colour before, it felt very outside of my comfort zone
Value Variation! the shaded floor's value is really similar to the wooden beams. The roof has a similar problem. This makes these plains start to merge
Analyse & use your references better! don't just combine a bunch of photographs of things that you think look nice, annotate them properly, study them and break them down. Mentioning what you don't like about them is just as important as what you do. Also do historical and contextual research!!! They can help with ideation and creating more believable designs. look at Industry work and break down what makes them so successful.
Time management! I really started to slack off once we hit the 4th week. This was mostly due to the fact that I wasn't extreamly excited about the brief I had set myself. The queen's building had drained me and I was extremely indecisive about all my designs.
Keep your blog up to date! don't be afraid to show your ugly designs and make sure to complete your entries every weekend
How I'm going to combat these struggles!
How I'm going to combat these struggles!
Use Library resources! I always have a Saturday sort of free where I could use the library's Wacom tablets to get some more work done since I am quite limited at home.
Explore more photoshop brushes I know I struggle to render in photoshop because I am not a fan of the pressure sensitivity of the pens and I also only like one brush for sketching called 'Roundy' which also isn't a default photoshop brush so I should explore some free online brush packs which I might enjoy using a lot better.
Give myself more planned time to be indecisive! iteration is necessary to reach a unique and exciting design but I know I can take quite a while generating them so I need to give myself more time to do that. Be more efficient with extra time and also rotate between projects so that you don't get bored of working on only one project or reach a platue , not managing to get much work done.
Google Sites
Report abuse