Design Process, Experiment, Game Engine

Unreal Engine Latest Work – Office Realisation

After my AGP Inspired Game Engine re-vamp I really enjoyed experimenting with the Unreal Game Engine trying to achieve as near-as-perfect photorealism as I could. I decided I would rework my office only this time, add the sort of level of detail one would actually find in there.

I started off by resetting the room’s wall back to pure white and attempting to model the blind:

room1

room2

room3

This created some shadow detail on the rear wall/door. Most of the props (such as the door, door frame, bookcase, lamps, plants and door handle) were borrowed from my Living Room scene. I could also modify the radiator (and associated components) to include in the scene… and did:

room4

room7

Finally, I modelled a load of extra detail assets such as the wire for the lamp, power socket, plug and window components until I was happy with the basic structure of the scene:

room9

room10

room11

room12

The room is a little darker now I have so much stuff in front of the window light source, but I am happy with the basic level of detail. I will strive to start adding the smaller details such as stuff in/on the bookcase, pictures on the wall and a computer on the desk.

Please note, the black office chair was borrowed from an existing scene called Berlin Flat – which is free to download from the Epic Marketplace.

Standard
Adobe Generation, Adobe Generation Pro 2015/16, Web Design

AGP: Web Design – Week5

This was last assignment – which consists of a link and reflective review:

For the final iteration of my re-design for the Juvo website I designed a few more responsive page layouts. I had to trim back the full proposed extent of the original project and site structure because of time commitments. The same is true for the imagery found within the site. I had hoped to create more bespoke imagery that was contextually relevant to the page content. However, I had to reuse the assets I created without time for modification.

I did however create every page to be as responsive as possible and that constitutes serious effort, even within Muse where the application does take a lot of the pain away from having to code and visualise the CSS.

I would have liked to dedicate more time to complete the full site and make the content more engaging, but I feel I have achieved enough to qualify the result for my submission.

The web site for review has been uploaded to my private web space and is accessible here:http://s584403783.websitehome.co.uk/staging/

In terms of the assignment reflection prompts; it’s difficult for my to reflect on the FTP process because I used to work as a professional web designer/developer and constantly dabble with and teach web technology and design. See here for some experiments:http://photomedia.lincoln.ac.uk/jfield/blog/

In terms of feedback, I would have to say the whole process of purchasing web server space (if you don’t have a CC subscription and therefore won’t have access to Catalyst) and using FTP software is still something that hasn’t moved on since the early 2000’s. You still require a fair understanding of the technology that powers servers and the various control panels. I will say that if you wish to practice this locally on your own machine, then set up MAMP. It’s free (the non-Pro version) and it’s fairly representative of what you’ll likely to encounter from commercially available hosting vendors.

If you would like to leave me feedback, then please feel free to test the responsive nature of the site’s pages. There are some instances where the imagery doesn’t scale very appropriately but on a whole the text should. Please also test the navigation for consistency – but because I used the Menu widget, it should be fine. There’s probably no need to comment on the structure because the site is so simple.

Finally, I wish I could say I enjoyed the course as much as the Graphics & Illustration course, however, besides from being forced to use Muse – which made me appreciate how good the tool has now become, I haven’t really learned a great deal or engaged with the content because of the way the tasks were set and organised. I found producing self-contained assignments (as opposed to continually iterating the same project) was far more enjoyable – as was the method on the Graphics & Animation course. The lines got totally blurred between the different tasks on this course and kinda sucked some of the enjoyment out of it for me. There is definitely value in running a Web Design course and Muse is quite nice to learn, but the format of the assignments needs some review in my opinion. Also, as grateful as I was to the guest speakers for giving up their time, I didn’t really find them particularly inspiring, especially when compared to the amazing speakers we had on the Graphics & Illustration course. But my thanks go to all the organisers for their time. There were definitely some participants that really learned a lot and it was a pleasure being on the journey with them.

Standard
General

Game Engine / AGP Inspired Composition

Possibly my favourite assignment from the recent AGP Graphics & Illustration course was the ‘graphic wall’ task. I really enjoyed creating a themed graphic design for a wall and composing the graphic onto an actual photo of the wall in question.

However, because the room in question is at the back of the house (north-east) facing, it never gets an decent light through the window so I am never able to take a decent photo (as all I posses is an iPhone camera).

I didn’t want my hard work to be only half-realised so I decided to dust off Unreal Engine 4 and recreate the room using accurate measurements for the walls and decorations that I’s created previous for my architecture visualisation experiments last summer. I then imported the graphic as a texture to place on the appropriate wall.

This is what I came up with:

wall1

wall2

I am quite pleased with the outcome as I spent a fair amount of time trying to get the level of realism as high as possible. Using the ‘area light’ technique, I was able to improve the lighting over my earlier attempts of re-creating my living room in the engine.

The biggest difference is, in my living room scene there was  only a single Directional Light (representing the sun) and I was expecting that to be enough to light the entire room. It was only after reading a blog post on the artist Koola that I understood that I needed to give the directional light more help. A spotlight is required in order to light the room ‘through the window’. However you do not simply put the spotlight at the window and point it in the room. The cone will not provide the flood of light that is required in order to fill-in for the lack of potency from the directional light. Instead you point the spotlight away from the window, directly at a “light card” or “reflector” (which is a simple 3D plane with a pure white material applied). This then floods the room with rays at the full range of angles required.

You tweak a few other of the light, surface and rendering settings until you have the desired effect.

I am very happy to now be able to realise the graphic wall assignment properly AND that I’ve discovered (thanks to the reading the articles linked above) the secrets to creating photo-realistic real-time game rendering.

Standard
Adobe Generation Pro 2015/16, Graphic Design, Web Design

AGP: Web Design – Week 4

Brief

Reflect on your learning about mobile web design. Using the tutorials shared in the previous step, create at least one alternate layout for your site. Take a screenshot of your site-in-progress or a photograph of your mobile wireframes to share it to give others a better understanding of your plans.

My Response

Juvo---Responsive-Stages-Example

My Reflection

The assignment this week required us to create an “alternative layout” for our sites. To begin with I started creating a mobile layout for the Juvo site I am currently redeveloping for this course.

However, on the day we had our live class, Adobe made a huge change to how you approach creating webpage design for different layouts. Muse now adopts the responsive design approach as opposed to the fixed width approach in earlier versions.

The basics of this new approach were demoed in the live class, plus Adobe create an excellent, and really enticing tutorial video: https://helpx.adobe.com/muse/how-to/create-responsive-website.html?set=muse–get-started I just had to give it a go.

Now I’m used to responsive design. I’ve been designing sites this way for years (although not so much recently), but I was interested to see how Muse visualised this approach and how it handled the continuity between content and breakpoints.

Initially I was confused because I tried to design for certain resolutions, which was the way you planned and visualised it using this approach. However, whilst reacquainting myself with responsive design and after watching that video (above) 3 or 4 times, it quickly became apparent I was looking at it the wrong way around!

Instead of worrying about where to place your breakpoints in relation to the ridiculously diverse array of screen sizes currently out there, you look at your design and add a breakpoint when your design “breaks”. This was a revelation and although that was the way the industry has been looking at it for a few years, its only when I used Muse’s interface to visualise when and where the design breaks did I really see how useful this approach is.

After some playing about with the scaling and pinning options, I decided to start updating my original pages to the new fluid width as part of Muse’s responsive design update. I have to say that coming from a coding implementation to a visual one was very different (and sometimes not as intuitive as I had imagined), but for a beginner coming to this approach, I think Adobe had nailed this with their update to Muse.

If you wish to the site in action and have a play: http://s584403783.websitehome.co.uk/staging/try resizing the browser :)

I updated the home and contact pages, while left the other blanks for future assignments or for when I have time to populate them. If you don’t wish to visit the site above take a peek at the attached image below as it shows the site at all breakpoints as well describes how I managed the appraoch for each breakpoint.

Once I had understood the way Muse implemented responsive features, I really enjoyed making my web pages look good across all sizes of screen!

 

Standard
General

Demonstration of Composition Methodologies

During a lecture today by a colleague, I learned about about how to represent the physical adjustments that happen regarding perspective distortion, something which I was familiar but had never tried to implement. He also touched on compositional basics which clearly demonstrated to the students how to approach framing narrative driven shots or illustrations.

He wrote a brief for all level 2 students in their workshop this week to undertake. The details of the brief were to create a scene in photoshop, taking into consideration the “rule of thirds”. The scene was to portray an “epic journey”. Within this we were to demonstrate appropriate positioning of objects (relative to the narrative) while demonstrating an understanding in how perspective distortion works.

We (staff and students) had an hour to create our scenes using just Photoshop and basic brushes/imagery.

I didn’t have an hour as I had my class to attend to, so I assigned myself half an hour and this is what I came up with:

scene

Standard
Adobe Generation Pro 2015/16, Graphic Design, Web Design

AGP: Web Design – Week 3

Brief

Following the tutorials shared in the previous step, take some time to:

  • Sketch wireframes for your site, and test them with users if you can. (Testing is optional.)
  • Create and apply a master page for your Adobe Muse site.
  • Add a navigation widget to your site.
  • Add one other type of widget to your site, e.g, a contact form, slideshow, button, etc.
  • Share an image of the wire frame.

My Response

Juvo-Sitemap-+-Wireframe

My Reflection

To expand on the starting point from last week, I have created a wireframe for all the pages of the website I am going to construct for this course (see attached image). To generate the wireframes, I found a free resource: https://wireframe.cc/ (nothing to do with Adobe), and you can do everything you need for the AGP Web Design week 2/3 task without having to upgrade to the paid license. To create a new page wireframe you simply open the site up in another tab. You can even save each page by just clicking the Save button and copying the URL (that’s how it saves and recovers your wireframes). It’s an excellent tool. I then screen-grabbed all the wireframes and assembled them into one large image in Photoshop.

In terms of the website, I have actually managed to upload it in a sub-folder of my actual clients site: http://s584403783.websitehome.co.uk/staging/index.html

There you will see the home page (developed for last week’s task), but the site now includes full navigation, created using the Menu Widget and the Contact page featuring the Simple Form Widget – which actually works! It doesn’t email my client, it just sends an email to me.

I have been very impressed with how Muse operates. I love the simplicity of things like the Menu Widget. Unless you wish to create a more bespoke solution, then the ability to have it automatically create global navigation is awesome. It will even create the secondary navigation if you wish! I just think the way Adobe have given Widgets the ability to be edited as one or individually is an inspired approach.

The Simple Form Widget was even easier to add to my site and removes the need for any front or back-end coding. I was amazed it just worked on my site, especially considering I uploaded this site into a sub folder of an existing site!

I am becoming very fond of Muse. Even though I am an experienced web designer and developer, for simple projects, and for learning website creation, I am going to recommend Muse to all beginners and even those wishing to create more engaging experiences. I have always been very wary of WYSIWYG web site creation tools, as they usual promise loads but never deliver. I have yet to find fault with Muse and I actual enjoy using it.

Check out the link above to see the site in progress.

Standard
Adobe Generation Pro 2015/16, Graphic Design, Web Design

AGP: Web Design – Week 2

Brief

For this week’s assignment, be sure to do the following on your own:

  • Identify your site goals and target audience.
  • Sketch a site map and then translate it into an Adobe Muse site map.
  • Add text, images and links to one of the pages in your Adobe Muse site.

Then post your response to the prompt below as your Class 2 assignment. If you’d like, you can upload a picture of your site map sketch or a screenshot of your site map or work-in-progress page design, but this is not required.

My Response

site_map

home_page

My Reflection

After careful deliberation around a suitable website to develop for this course, I have elected to redevelop an existing project I created with Muse last year. I have also started creating the visual content for the redeveloped version of this site for my AGP Graphics & Illustration course. This means I can start quite quickly with the redevelopment and focus more on the structure at this early stage.

Juvo is a website I created for my partner’s business that is centred around advertising her services as an animal behaviour consultant, with specific focus on canine behaviour. Its current incarnation can be found here: http://juvo-ab.co.uk/

The idea around redeveloping it is to make it much more visual to accommodate advice that is soon-to-be-added to the site. The current design is just not flexible to support the potential influx of visuals. Therefore, a new design, layout and structure is going to have to be created. That’s where this project comes in:

What are the goals for your site?
To allow the client to advertise their services and communicate advice around the subject of canine behaviour. Although there is currently a site in place, a new direction is required to accommodate advice that needs to be presented in a visual and engaging manner.

What do you know about your target audience?
Although potentially anyone who owns (or cares for) a dog could benefit from the information on the site, the primary target audience are male and female adults aged between 18 – 60. This potentially creates issues of disparity between the lower and higher ends of the audience in terms of experience using the web.

Because of the nature of the proposed advice, children old enough to be left alone with pets should also be able to access, understand and engage with the content. This means that the site needs to appeal to both adults and children. A potential tall order. My approach is going to be simple visuals that look fun but are not cartoon in style. They are to be taken seriously.

How might you address your audience’s needs in your site map and content strategy?
In terms of the structure of the site, there is a relatively low amount of content to communicate, therefore the structure is very simple. The largest section (Advice) will be a scrolling effect page to help maximise engagement.

I have proposed two Master pages, one for standard site content, and the other for a long, scrolling page of the Advice section. This should ensure consistency across the functional business-oriented pages, whilst allow a bit more creative freedom with the Advice section.

Update
I have uploaded the site so anyone who’s interested can check it out and interact with it! You can find it here: http://juvo-ab.co.uk/staging

Standard
Adobe Generation, Adobe Generation Pro 2015/16, Branding & Identity, Design Process, Graphic Design

AGP: Graphics & Illustration – Week 5

Brief

Create a complex graphic artwork for a wall in your school, studio, home or office. Ensure the wall design is themed on your own ideas and is based on images and pattern. Use the video tutorial in the previous step as a guide. Finally photograph the wall and superimpose your design. Include the design and the image of the wall incorporating the design in your final submission.

My Response

Final

Graphic

Making Of

My Reflection

Although I was more pleased with how assignment 3 turned out, I actually think this was the best assignment of the course because it gave so much creative freedom and forced me to consider spatiality as well as how to create the graphics appropriately.

Response
Juvo is my partner’s business and earlier last year I created the branding and her website. When the brief asked us to select a space that we could make a connection to with the graphics we created, I immediately thought of her office. She works from home and all the walls in our home are bare white. We’ll eventually decorate, but until then I thought I have the perfect blank canvas to enliven her home office with this brief.

Approach
The first thing I did was to measure the wall. The reason for this is so I could create an Illustrator file at the correct aspect ratio. This important to prevent a stretched or compressed fit when I eventually overlay the graphics onto the photograph I would take of the wall.

After that I started to think about what graphical components I would create. Obviously the logo should be present, but I wanted the graphics to tell a story. I also wanted to utilise the pattern tools we learned about during this week’s live lecture.

My first idea was to create an entirely pattered wall with objects you would associate with dogs (as Juvo specialises in canine behaviour). I created the usual iconic symbols of: bone, water bowl, kennel, paw print, etc. It quickly became apparent however that it was going to look quite boring and not particularly imaginative. It didn’t tell a story either, it was just a collection of imagery repeated across the whole wall.

For the website (that’s still in development), I am going to create graphical illustrations that portray human-dog interaction, with the focus on visualising the dog. Illustrations work so much better than photos because unless they are shot professionally, they tend to look very amateurish. I am not a photographer, plus taking photos of animals is a tricky business as animals tend to do what they want. That said, I am not an illustrator either so I decided now would be a good opportunity to experiment creating graphic dogs! I quite quickly decided on a slight abstract style, making each dog out of geometric shapes and circle quadrants.

I wanted to create 10 graphics, one for each of the 10 cornerstones Juvo is built around. However, I haven’t got the time to achieve this before my self-imposed deadline. I therefore opted to take the 4 different dog designs I had managed to create and arrange them in a relatively interesting composition, each with their own thought presented.

I stuck with the dog accessory pattern background and then exported the file ready for application to the photo of the wall in Photoshop.

Making of
After only a minimal amount of experimenting with Photoshop’s tools for composition, I eventually managed to create a piece of work I am quite pleased with. To help explain the process I undertook, I have created the ‘Making Of.png’ file which explains how I managed to composite the graphic artwork onto my wall.

Standard
Adobe Generation Pro 2015/16, Web Design

AGP: Web Design – Week 1

I started the Adobe Generations Pro course in Web Design this week. As with the Graphics & Illustration course, I am not participating necessarily to learn new skills, more to understand better how online learning works and to gain recognition for the skills I already have. That said, the ore software we’ll be investigating is Adobe Muse and I’m interested in this for two reasons. Firstly, I’ve used it on and off over its development from an Experiment to a fully-fledged web design application. Secondly, I have suggested we switch from a hand-coded approach (in Dreamweaver) to a design appraoch (Muse) for our level 1 Digital Media module. This might provide a useful framework for delivering the skills required to use this software.

Brief

Open Adobe Muse and create an initial page with some text, rename that page and create a new homepage. Then save the work to your local computer. (The file will have an extension of .muse.)

You’re not required to share the page at this stage; this is just practice. Don’t worry about making a good site, or even a site that works. We simply want you to test out the Adobe Muse interface and get familiar with following the tutorials. Have fun and be prepared to experiment.

My Response

I understand the brief required me to write about the experience of creating a first web page built with Muse but as I have already created a published site using Muse, I thought I should probably reflect on that.

First of all I would like to comment on just how far I think Muse has come. I have dabbled with Muse ever since it was a “preview” app. Back then I saw its potential to fill the void between Dreamweaver and Photoshop/InDesign, a place where you could create web elements in a visually-oriented way using tools and methodologies you could apply from Photoshop/InDesign experience. Placing elements using CSS is a relatively advanced topic but essential to master, even for a beginner. Dreamweaver’s visual “design mode” was never really much good at this (although in CC 2015, it’s actually pretty decent). Still, Muse is perfect for those who only need to design & layout sites & pages and don’t need to focus on the complex FTP, CSS and Scripting aspects of web development.

When creating my recent site using Muse I noticed that the tool set and features have matured and it is now a very usable and capable platform both for beginners, and those who just want to create a semi-dynamic web page/site without the fuss and power of Dreamweaver. I found that it supported all the features I wanted to implement such as web-fonts, menu & site structure, footers, as well as embedded HTML elements (such as a Paypal button and Google Maps). The ability for my client to edit the text using a simple admin login is a fantastic feature and with the professional quality templates Muse offers*, even someone with only the basic knowledge can set up a fair substantial and functional site in a relatively short space of time.

Pretty much every tool did what I expected it to, but as a relatively advanced web designer and developer, my expectations were pretty realistic. I am very much looking forward to learning Muse on a level whereby I am confident enough to teach it to my students, because I am seriously considering shifting the basic HTML & CSS workshops to Muse. Students on my module don’t necessarily need to know the nuts and bolts of HTML in order to realise their projects so Muse is a viable alternative.

In case you are interested, the site I created can be found here: http://juvo-ab.co.uk/, It’s a functional business site so it’s pretty much static information that the client can change if she wishes.

Possible Web Project
I kinda ran away with this assignment and produced it before I watched the live class. I think I met the criteria of the brief with what I wrote above, but after watching the live class I think I should add a little about what sort of web project I might want to produce to demonstrate my learning with Muse, as well as the target audience for that project.

I had many ideas about the site I would like to work on while I participate on this course. One idea was to create a mobile version of this very AGP site for reviewing and participation in the other social aspects on-the-go. I chose not to pursue this because there’s too much dynamic content to make a static design work.

Another idea was to create a very visually interesting ‘welcome to University’ site for students who are in the process of joining my University. This featured much more static data making it a good choice to use for this course, but when it came considering the visuals, neither of the two options I had were particularly appealing. Firstly, I didn’t want to use photographs (as the current PDF does) because they get outdated very easily and are usually very clichéd. Secondly, creating a sites worth of graphical content requires far too much of a commitment, and for me right now, this isn’t an option.

In the end I have opted to recreate the site mentioned at the start of this reflection but focus more on developing it to take into account the advice side of the business which is not currently catered for. This advice section (and the rest of the site) will be much more visual and I will develop the graphics library I have started to produce for the business.

*Muse CC 2015 has removed the templates from the Welcome Screen but you can still find them here: http://www.musestarters.com/

Standard
Adobe Generation, Adobe Generation Pro 2015/16, Design Process, Graphic Design

AGP: Graphics & Illustration – Week 4

Brief

Create a simplified minimal film poster of a popular movie. Your selection of the movie is important for this exercise. The movie must be known to the viewer for the assignments to work, and although we can not expect all the participants to have seen all the same films, selecting blockbusters like King Kong and Jaws will make this a more enjoyable and responsive experience.

My Response

War Horse Movie Poster

My Reflection

This is actually a more challenging assignment that I first thought, for two very different reasons. Firstly, because of the trend for designers and fans to recreate famous movie posters in a minimalist style, it is very difficult to be original. Most of the “classics” have been treated to this resurgence in “reboot culture”. Secondly, selecting the right film requires a lot more thought then simply how famous it is. I faced a similar problem with the ‘4 Icon Challenge’ in Week 2.

Research
My first step in the the process was to think of a film that was famous enough that people would know of it, and yet not so famous that it had been treated to a minimal makeover. I really wanted to create an original production, not a variation based on an existing project. My thoughts took me to the 80’s again initially as there are hundreds of famous films (as there are in any decade – but due to my age, I am most familiar with this era). I thought about The Goonies, Ghostbusters, Gremlins, Indiana Jones, etc. and all of them had many different posters in the full-range of artistic styles, consisting of every possible iconic moment/theme. The only films I could not find posters of were relatively obscure.

Films from the 20’s – 70’s had also been treated to this reboot style of fan-based project, especially Hitchcock’s films! I then turned to more recent films (90’s – present day), and whilst there are hundreds of famous examples, I struggled to think of any that I could create based on a single piece of iconic imagery and maintain originality.

I quickly realised there are two types of approach with this assignment: 1) direct representational imagery and 2) abstract or relational imagery. The first one is where you use a scene or visual direct from the movie and represent it whereas the second is more about allowing the viewer to guess what movie title you are representing from imagery that is drastically reinterpreted or just connected to things (like the words in the title). The first is straight forward to imagine but the second is only obvious where you’re given an example. I considered creating a poster for A Clockwork Orange. Very famous film and done to death in the poster department – however, none of the posters I research featured the imagery I was going to portray. I created a minimalist orange and stuck a clockwork wind-up key out of the back of it. I thought it was quite clever but it wasn’t really representing what the brief was asking for. It would have worked as a “Dingbats” clue but nowhere in the film was there much clockwork, or even an orange!

Inspiration
I took some time out and last night I watched the film War Horse for the first time. I quite liked it but then an idea hit me. One of the most powerful moments in the film was when the horse’s original owner (who was temporarily blinded), called out to the horse (who was about to be euthanased) and he had to describe him to prove he owned the horse (and spare the poor beats’ life). The horse had a VERY distinct mark on his head/face, and for me that was the most visually iconic moment of the entire film. That’s when I knew I should try and use that for my example.

Creating the Response
Due to the brief requiring the poster to be created in a minimal style, I knew all I needed to do was draw a simplified, head-on view of a horses head and then add the marking. Simple! The colours were important too so I obtained an image from the movie with balanced scene lighting to colour-pick the brown and the off-white marking. I also wanted to represent the horrible muddy fields the horse and men were subject to in the trenches. I opted for a dark brown solid fill background but it seemed too clean.

I decided to add some texture but I didn’t want to even open Photoshop. I found a suitable grungy-grain texture and imported it directly into Illustrator. Then, using Illustrator’s Photoshop effects filters, a applied some texture to the solid background colour to try and indicate the rough fields in which the house ploughed and fought. Yes these filters are nothing new (if you have been working in Photoshop as long as I have) but working with them in Illustrator (combined with the Opacity panel) was a new experience and could dramatically speed up my workflow.

Conclusions
Once again I have very much enjoyed this assignment. Unlike the others (with the exception of maybe the 4 Icon Challenge), the actual production of the end result was only a small portion of the time spent undertaking the assignment. Most of my time was spent thinking of a movie and then adding my own selection criteria until I came up with the ideal candidate. I was surprised with my eventual choice of movie, but it just goes to prove that you never know when inspiration will happen!

Update
After some fair and useful feedback, I’ve decided to amend the design of my poster to indicate that the horse has been in battle and to reflect another of the film’s most prominent scene where the horse is caught and freed from barbed wire. I have tried to keep this additional detail as simplified as possible in order to maintain the overall minimalist design.

Standard