I've used this theme on my business cards, website and postcard.
The final designs are the largest ones. I've included a few of my other drafts because I thought they were quite interesting as well as showing how the idea developed.
Business cards / postcard / website background
I wanted a consistent theme through out all of my publicly available work, I decided on dark purple and tonal variations through triangles.
I've used this theme on my business cards, website and postcard.
The final designs are the largest ones. I've included a few of my other drafts because I thought they were quite interesting as well as showing how the idea developed.
I've used this theme on my business cards, website and postcard.
The final designs are the largest ones. I've included a few of my other drafts because I thought they were quite interesting as well as showing how the idea developed.
Production document
Today I wrote up the production document, not entirely sure if it was even necessary but it's done, it's short and sweet and to the point. We've got what we thought was the most important aspect of our design into it without making it boring or too wordy.
Shared showreel
I added some lighting and other elements to the UDK level so I could get some better footage for the shared showreel.
One problem I was having was that the unreal engine has a controller support bug so I had to use mouse and keyboard to control the movement and camera making the footage some what un-smooth.
I used a few commands to help make this more manageable.
Fov 90/120
Fly/Ghost
Slomo 0.2
This way I could move around closely to the piece and use the keyboard to control camera panning without it being too fast and jittery.
Hopefully when Will's back in Norwich we can render out some new footage on his pc without the controller bug.
Showreel progress
Having rendered all of my turntables in marmoset I have finished a
much more finalized draft version of my showreel featuring all of the
best of my work.
Since posting this and getting feedback I've used velocity edits in some of the turntables to give more time to the details I want, essentially just slowing and speeding up the footage to better demonstrate the texturing.
Since posting this and getting feedback I've used velocity edits in some of the turntables to give more time to the details I want, essentially just slowing and speeding up the footage to better demonstrate the texturing.
Collision boxes
Before making the collision boxes for our scene I took the libery of taking some hard-to-read screenshots. This way I could showcase the scene from more extreme and unattainable angles a player cannot get to.
The collision boxes themselves for most of the squarish objects were fine, so I just used the most resource friendly collision settings, but the oddly shaped objects like the diagonally placed chair, fire-guard and tree all needed much more complex collisions.
This wasn't really an issue but I am aware that the collisions used aren't ideal, they are much more complicated and wouldn't run well if the entire scene was made of these odd objects.
Here's a few of the screenshots from (now) impossible to reach locations.
The collision boxes themselves for most of the squarish objects were fine, so I just used the most resource friendly collision settings, but the oddly shaped objects like the diagonally placed chair, fire-guard and tree all needed much more complex collisions.
This wasn't really an issue but I am aware that the collisions used aren't ideal, they are much more complicated and wouldn't run well if the entire scene was made of these odd objects.
Here's a few of the screenshots from (now) impossible to reach locations.
Buying a domain and setting up personal site/email/blog
I bought a domain from 101domain.com, I was lucky that I could get a really short url. It was cheap too, under a fiver.
Hosting my site was a breeze, I used weebly's starter package so I could connect my domain and remove their annoying footer.
I also migrated my blogger over to my new domain as a sub-domain.
Actually getting my website to appear and function as I want however was not so easy, I had to learn a little bit of html/css so I could get things to embed and scale correctly as well as getting the right render settings for videos so mobile devices could play them back.
I looked into responsive web design and how it supports most screen resolutions and tailors the site accordingly, I thought this idea was really good so anyone no matter what they're browsing on can get a pretty good look at my work and won't have to zoom in or out to read or watch a video, it'll all scale perfectly.
Since a lot of my work isn't of a standard I thought was good enough to be hosting on a personal/professional portfolio site I've only really had relatively good stuff to post on there recently, because our final major project is nearing completion.
Hosting my site was a breeze, I used weebly's starter package so I could connect my domain and remove their annoying footer.
Actually getting my website to appear and function as I want however was not so easy, I had to learn a little bit of html/css so I could get things to embed and scale correctly as well as getting the right render settings for videos so mobile devices could play them back.
I looked into responsive web design and how it supports most screen resolutions and tailors the site accordingly, I thought this idea was really good so anyone no matter what they're browsing on can get a pretty good look at my work and won't have to zoom in or out to read or watch a video, it'll all scale perfectly.
Since a lot of my work isn't of a standard I thought was good enough to be hosting on a personal/professional portfolio site I've only really had relatively good stuff to post on there recently, because our final major project is nearing completion.
Fixing models
Some of the models for our project needed the normal groups smoothed.
Alot of the rounder objects especially could have done with smoothed edges, table legs and cylindrical supports for books and baskets often had very angular looking normals.
I took the time to smooth all of these object in the right places leaving certain edges like the inside of a crevice in a carved chair back rest post and other elements that really need to be sharp and stand out.
This made the overall appearance and readability of each object improve.
I found that there were less jagged lines too, so that was a happy accident to stumble upon.
Here are some comparison shots, from before and after I have smoothed the models.
On the right hand side you can see the edits I made, all of the little details are much more easily read and the overall form looks more natural as a carved piece of wood.
On the left is the original model, first I reset all the normals back to face. This way I could could smooth along new edges and create this...
On the left is the edit I made, choosing to smooth all the norms along the length of each object to make the crystal have a much more pleasing sharp appearance.
This is actually my own model, the normals needed to be fixed, but the change in appearance isn't exactly noticeable at a glance. I made the edges at the bottom hard so that the lip reads well, and smoothed the inside. The effect though is that it is slightly easier to read the shape of the bin at a glance. The edges are clearer and the smoothing now makes sense.
Alot of the rounder objects especially could have done with smoothed edges, table legs and cylindrical supports for books and baskets often had very angular looking normals.
I took the time to smooth all of these object in the right places leaving certain edges like the inside of a crevice in a carved chair back rest post and other elements that really need to be sharp and stand out.
This made the overall appearance and readability of each object improve.
I found that there were less jagged lines too, so that was a happy accident to stumble upon.
Here are some comparison shots, from before and after I have smoothed the models.
On the right hand side you can see the edits I made, all of the little details are much more easily read and the overall form looks more natural as a carved piece of wood.
On the left is the edit I made, choosing to smooth all the norms along the length of each object to make the crystal have a much more pleasing sharp appearance.
This is actually my own model, the normals needed to be fixed, but the change in appearance isn't exactly noticeable at a glance. I made the edges at the bottom hard so that the lip reads well, and smoothed the inside. The effect though is that it is slightly easier to read the shape of the bin at a glance. The edges are clearer and the smoothing now makes sense.
Online presence / website progress
I've set up a whole host of social accounts to help promote myself and my work.
I've got all of my turntables on Youtube as well as on my site. I have since updated the turntables on my site so they are now 640p and should hopefully playback a bit better on mobile devices.
I think the most important though is Linkedin, I've tried to connect to as many existing contacts as I can, I'll leave networking until later when my work is mostly complete so that I can concentrate better.
All of my accounts are neatly linked to on my site, a few of the default icons from the social tab needed changing so I photoshopped the png to support the social networks I use.
Here's the default social image for my site, and below is the edit I made.
As you can see, I've switched out the rss feed for DrawCrowd, the vimeo link for Polycount and the Yahoo link for Sketchfab.
I rather like how they're quietly sitting at the top of the page, they're not in your face but people can easily find it if they're interested to see more of my stuff.
I've got all of my turntables on Youtube as well as on my site. I have since updated the turntables on my site so they are now 640p and should hopefully playback a bit better on mobile devices.
I think the most important though is Linkedin, I've tried to connect to as many existing contacts as I can, I'll leave networking until later when my work is mostly complete so that I can concentrate better.
All of my accounts are neatly linked to on my site, a few of the default icons from the social tab needed changing so I photoshopped the png to support the social networks I use.
Here's the default social image for my site, and below is the edit I made.
As you can see, I've switched out the rss feed for DrawCrowd, the vimeo link for Polycount and the Yahoo link for Sketchfab.
I rather like how they're quietly sitting at the top of the page, they're not in your face but people can easily find it if they're interested to see more of my stuff.
Updating existing profiles
I uploaded all of the photos hosted on my site to my flickr so that people can look at the high-res versions. I added a couple of extra photos into the album as a little surprise for the adventurous.
When trying to update my information on Sketchfab I ran into an error so i've been trying to fix the issue for several weeks.
.PNG)
The support over there is really good though however and they gave me detailed instructions on how to submit the javascript error I'd been experiencing.
Hopefully I'll have updated information on Sketchfab soon.
I've set up a couple of different sized widgets from twitter to work on my site on the about page, one for desktop which is relatively larger and a smaller version for mobile so that it doesn't swamp the screen.
I know I've only little 2D content to post but I still made a DrawCrowd account and got my stuff up on there just incase I'm lucky enough for people to give me comments and criticism.
I've finished my Linkedin profile and shared it on twitter several times. This is the latest screenshot of the page, I've included all my experience regardless of how irrelevant it might be concerning my desired career, I think all experience is valued and helps employers determine the kind of person and attributes you have.
If there's one thing I want to be in life it's honest, so tailoring any profile to hide truths or information is not something I want to do.
The only thing I would say is misleading is the dates for all of the experience, I deliberately made it so that the most relevant information and experience is at the top.
When trying to update my information on Sketchfab I ran into an error so i've been trying to fix the issue for several weeks.
The support over there is really good though however and they gave me detailed instructions on how to submit the javascript error I'd been experiencing.
Hopefully I'll have updated information on Sketchfab soon.
I've set up a couple of different sized widgets from twitter to work on my site on the about page, one for desktop which is relatively larger and a smaller version for mobile so that it doesn't swamp the screen.
I know I've only little 2D content to post but I still made a DrawCrowd account and got my stuff up on there just incase I'm lucky enough for people to give me comments and criticism.
I've finished my Linkedin profile and shared it on twitter several times. This is the latest screenshot of the page, I've included all my experience regardless of how irrelevant it might be concerning my desired career, I think all experience is valued and helps employers determine the kind of person and attributes you have.
If there's one thing I want to be in life it's honest, so tailoring any profile to hide truths or information is not something I want to do.
The only thing I would say is misleading is the dates for all of the experience, I deliberately made it so that the most relevant information and experience is at the top.
Wesbite development the nitty gritty details
I wanted to add youtube playlists to my site in the blog section before migrating it all to blogger but to get those videos to scale I had to use div containers and some css code as iframes don't follow the same rules as standard video objects.
Here's the html code for getting a playlist from youtube to scale properly, the width and height values only matter in the mobile version of the site, so this is best left at the defaul values from youtube.
Then in the CSS Style sheet you need to address the div class of "video-container" to make this work properly.
The CSS code looks like this.
This forces the iframe to resize in the same way a normally embedded html video object would with height and width aguments of 100% in the html.
I changed the background image to one of my choosing by editing the wrapper css code, I then changed my mind and chose to use a solid color instead
To make most of the site scale all I had to do was edit the container code in the css style sheet. This however, even with my webkit commands doesn't seem to work entirely in Chrome.
On my site I have a couple of buttons at the top of the About page and 3D page so that mobile users can navigate to a more mobile friendly version of the site.
I didn't like the style of the button so I edited the color codes in the CSS and removed the border surrounding the button like this...
All of the #211821's and #322630's are my color edits and the border 0px argument removes the border entirely.
Just to note, all of the 100% values after the color codes determine how far down the object the gradient's middle point is so you have quite a bit of control over how the gradient looks.
Here's the html code for getting a playlist from youtube to scale properly, the width and height values only matter in the mobile version of the site, so this is best left at the defaul values from youtube.
<div class="video-container"> <iframe width="560" height="315" src="URL" frameborder="0" allowfullscreen></iframe> </div>
|
Then in the CSS Style sheet you need to address the div class of "video-container" to make this work properly.
The CSS code looks like this.
/* video-container */
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
|
This forces the iframe to resize in the same way a normally embedded html video object would with height and width aguments of 100% in the html.
I changed the background image to one of my choosing by editing the wrapper css code, I then changed my mind and chose to use a solid color instead
.wrapper {
background-color:#211821;
!background:#222 url(http://i.imgur.com/p6ew3T5.jpg);
!background:#222 url(dark_wall.png);
!background-size:100% 100%;
background-repeat:repeat;
padding-top:0px;
}
|
To make most of the site scale all I had to do was edit the container code in the css style sheet. This however, even with my webkit commands doesn't seem to work entirely in Chrome.
.container {
margin-left: auto;
margin-right: auto;
width: 1240px;
height: auto;
max-width: 100%;
padding-left: 20px;
padding-right: 20px;
-webkit-margin-start:auto;
-webkit-margin-end:auto;
-webkit-padding-start:20px;
-webkit-padding-end:20px;
}
|
The margin arguments allow's the margins at the edge of the site to expand and shrink as necessary.
The width and max-width arguments ensure the site will never go beyond 1240px wide but will allow it to shrink.
The padding arguments give the site some space at either side so that it doesn't feel cramped in your browser window.
Auto height allows all of the content in the container to be displayed vertically.
To get the footer to scale all the way across the page I had to edit the style sheet again specifically for that. I set the width well beyond most people's maximum resolution and set the max-width command so it would fill the available space.
The width and max-width arguments ensure the site will never go beyond 1240px wide but will allow it to shrink.
The padding arguments give the site some space at either side so that it doesn't feel cramped in your browser window.
Auto height allows all of the content in the container to be displayed vertically.
To get the footer to scale all the way across the page I had to edit the style sheet again specifically for that. I set the width well beyond most people's maximum resolution and set the max-width command so it would fill the available space.
#footer-wrap
{
width: 3000px;
max-width: 100%;
}
|
On my site I have a couple of buttons at the top of the About page and 3D page so that mobile users can navigate to a more mobile friendly version of the site.
I didn't like the style of the button so I edited the color codes in the CSS and removed the border surrounding the button like this...
.wsite-button {
background: #333;
background: -moz-linear-gradient(top,#211821 0,#322630 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#322630),color-stop(100%,#322630));
background: -webkit-linear-gradient(top,#211821 0,#322630 100%);
background: -o-linear-gradient(top,#211821 0,#322630 100%);
background: -ms-linear-gradient(top,#211821 0,#322630 100%);
background: linear-gradient(top,#211821 0,#322630 100%);
border: 0px solid #191919;
box-shadow:inset 0 0 15px rgba(0,0,0,0.25);
-moz-border-radius: 3px;
border-radius: 3px;
color: white !important;
font-size: 13px;
font-weight: bold !important;
padding: 3px 25px;
text-align: center;
text-decoration: none !important;
text-shadow: 0px -1px 0px rgba(0,0,0,0.7);
}
|
All of the #211821's and #322630's are my color edits and the border 0px argument removes the border entirely.
Just to note, all of the 100% values after the color codes determine how far down the object the gradient's middle point is so you have quite a bit of control over how the gradient looks.
To get this blog post to display the way it is I used a couple of html elements, the first being the tables to show the code separate from the rest of the body text explaining it and the second being the horizontal splitting lines to help identify each part.
Here's the code for the table
<table border=1> <tr> <td> <pre><i> Content of box </i></pre> </td> </tr> </table> |
and here's the horizontal line code...
<hr color="#ff00ff" size="4" width="95%" />
|
General workflow (specular)
I usually invert the diffuse and considerably darken the brightest white but for the books and some other metallic objects I make a special case.
In the case of the books I mearly reduced the overall brightness, keeping the color the same, this way they don't have any odd looking reflections.
In the diffuse where there is black writing, I made the specular bright yellow so that the text would have a rich contrasting reflection making it almost look like it is made of gold.
As you can see I've also darkened all of the white areas of the diffuse which is where the non-reflective paper is.
To save time on this whole process I made sure all of the writing on the books was on a separate layer, the paper though, because of it's easily selectable shape needn't have it's own layer, making a simple selection of all the paper areas didn't take long at all.
In the case of the books I mearly reduced the overall brightness, keeping the color the same, this way they don't have any odd looking reflections.
diffuse
In the diffuse where there is black writing, I made the specular bright yellow so that the text would have a rich contrasting reflection making it almost look like it is made of gold.
spec
As you can see I've also darkened all of the white areas of the diffuse which is where the non-reflective paper is.
To save time on this whole process I made sure all of the writing on the books was on a separate layer, the paper though, because of it's easily selectable shape needn't have it's own layer, making a simple selection of all the paper areas didn't take long at all.
General workflow (normals)
When making normals I keep in mind that crazybump will use the value of the texture to determine the height and forms of the map.
Using this knowledge I can create specific textures on the top of the diffuse to help influence the shape and form of the resulting normal map.
The most prominent use of this technique in the project was on the hanging coat. I made stitching, pockets and sleaves with vector art in illustrator and used simple black and white color effects in photoshop to create the effect of depth.
Here is the diffuse map.
These are my vector graphics to help change the way crazy bump interprets the diffuse
When combined I get this result.
While nDo2 does offer similar functionality within photoshop I chose not to use it in the end because it is so unreliable and prone to crashing, the layer and selection process is often confusing and the scripts sometimes break leaving a photoshop document half filled with layer effects and fills.
Crazybump, although not perfect doesn't suffer from these same issues as all I have to do is paste my image in and load one of my presets and tinker with it until I like the effect.
nDo2 settings and sliders don't take effect instantly and are very small making them hard to click, that and when using a tablet is near impossible to click.
Using this knowledge I can create specific textures on the top of the diffuse to help influence the shape and form of the resulting normal map.
The most prominent use of this technique in the project was on the hanging coat. I made stitching, pockets and sleaves with vector art in illustrator and used simple black and white color effects in photoshop to create the effect of depth.
Here is the diffuse map.
These are my vector graphics to help change the way crazy bump interprets the diffuse
When combined I get this result.
While nDo2 does offer similar functionality within photoshop I chose not to use it in the end because it is so unreliable and prone to crashing, the layer and selection process is often confusing and the scripts sometimes break leaving a photoshop document half filled with layer effects and fills.
Crazybump, although not perfect doesn't suffer from these same issues as all I have to do is paste my image in and load one of my presets and tinker with it until I like the effect.
nDo2 settings and sliders don't take effect instantly and are very small making them hard to click, that and when using a tablet is near impossible to click.
General workflow (diffuse)
First of all I start by opening up the model in UVLayout. I render out an image of the UVs and open that in photoshop.
I'll make a wand selection of the empty space, and on a new layer invert the selection and fill the UV shapes with a solid color.
This way I can select any part of the texture very quickly.
Since most of the textures in this project are wood, I will explain exactly how I make the wooden textures.
In a new layer above the "selection" layer I fill it with a solid color, usually a darkish brown, but this depends on the type of wood I'm trying to make.
I fill another new layer with 50% grey, ontop of the "color" layer, I then add noise, then give it a motion blur to make it streaky.Once this is done I'll use a smudge tool preset to bend and shape the grain so it looks natural and flows with the shape of the uv.
I set this layer to overlay mode so it lightens and darkens the layer beneath (the "color" layer.)
I then make a fifth layer, ontop of everything else and use a pencil brush in black and white to work in the wood grain effect more realistically, I create all of the curves and knots and bendiness in this layer.
I quite like using the pencil brush as it is textured, it works quite well for creating the normal maps.
I set this layer's blending mode to soft light.
I paste the normals from Crazybump back into photoshop and overlay the top most one over the other so that both the grain effects blend and create one single normal.
Once I've saved down a flattened targa file for the diffuse map I invert and darken it by reducing the maximum white value down to around 71 IIRC. This way the surface isn't too reflective.
As well as that I desaturated it significantly, the blueish tinge to the reflection looks far to vibrant without doing this step.
Business card drafts
I've been working on business cards, but before I did I was pretty inspired by the work of both Mimmo Castellano and The Designers Republic, more specifically the art style of the videogame series Wipeout.
I wanted to use that clean cut and clear minimalist futurist design ethic for my business cards so they will look great and won't age. It seems to me like a very timeless style, there's not really much in the way of detailing.
Here are some screenshots of the designs I've been working on, fonts I've tried out and some bespoke text ideas for my initials.
I wanted to use that clean cut and clear minimalist futurist design ethic for my business cards so they will look great and won't age. It seems to me like a very timeless style, there's not really much in the way of detailing.
Here are some screenshots of the designs I've been working on, fonts I've tried out and some bespoke text ideas for my initials.
This is the back of the business cards, I'm pretty happy with it so I don't think I'll be working on it any more, the front though however could still do with some work.
I'm trying to make the design have some ambiguous depth to it, playing with shapes and tone to give the impression of two possible 3D forms.
Website progress
My website's responsive scaling isn't working entirely in chrome, the navigation panel refuses to scale with the rest of the site, although it scales fine in Firefox. I looked it up and it might have something to do with the fact that chrome is a webkit based browser so my css arguments might not work properly.
I have yet to find a solution to this issue having tried all of the seemingly relevant webkit commands I could find.
Weebly's font chooser brakes things like active and hover settings that I worked on in the CSS style sheets, so I can't use the weebly GUI for changing font settings in the navigation panel, I have to edit the css directly if I need any changes made.
----
I learnt about how html arguments worked on video elements so I could get my turntables to loop in the page set up for mobile users.
The videos as they stand are 720p which I may reduce to 640p as the playback on my phone wasn't perfect, often the video would pause for no reason and playback wasn't as smooth as on PC.
I have yet to find a solution to this issue having tried all of the seemingly relevant webkit commands I could find.
Weebly's font chooser brakes things like active and hover settings that I worked on in the CSS style sheets, so I can't use the weebly GUI for changing font settings in the navigation panel, I have to edit the css directly if I need any changes made.
----
I learnt about how html arguments worked on video elements so I could get my turntables to loop in the page set up for mobile users.
The videos as they stand are 720p which I may reduce to 640p as the playback on my phone wasn't perfect, often the video would pause for no reason and playback wasn't as smooth as on PC.
Naming conventions and texture resizing
I renamed every texture so instead of using the initial convention of
Place(folder) : Object(folder) : Place_Object_Texture it's now...
Place(folder) : Object_Texture
This makes getting all of the assets and textures sorted in UDK much easier for will, as he can find them all in one place and quickly find the right name.
As well as that I resized a lot of the textures down from 2048x2048 to either 1024x1024 or 512x512 as we saw fit, we had a little problem with UDK crashing so we though it'd be best to make sure every texture wasn't needlessly large.
I had initially textured everything at 2048x2048, which is totally unnecessary on much of the smaller objects.
filesizes for texutes: 2k = 12,289kb 1k = 3,073kb 512 = 769kb 250
Place(folder) : Object(folder) : Place_Object_Texture it's now...
Place(folder) : Object_Texture
This makes getting all of the assets and textures sorted in UDK much easier for will, as he can find them all in one place and quickly find the right name.
As well as that I resized a lot of the textures down from 2048x2048 to either 1024x1024 or 512x512 as we saw fit, we had a little problem with UDK crashing so we though it'd be best to make sure every texture wasn't needlessly large.
I had initially textured everything at 2048x2048, which is totally unnecessary on much of the smaller objects.
filesizes for texutes: 2k = 12,289kb 1k = 3,073kb 512 = 769kb 250
Subscribe to:
Posts (Atom)