PAST PRESENTATION BOARDS: PART 2

My last post discussed some architectural presentation boards that were, for the most part, poorly organized. I wanted to go into this week's post discussing some presentation boards that were almost up to par, but just needed some tweaking. I also noticed some comments asking me to revisit the boards, editing them based on my critiques which I thought was a good idea and therefore tried to do in this post.

To begin, this group of presentation boards was created in my final year of undergraduate school for a competition held by the Cranbrook Academy in 2007. The competition asked for four 20”x20” boards. For the amount of work that went into this project, cramming so much information into four boards turned out to be more difficult than I anticipated. On top of that, I have always found it challenging to organize graphics on a square format. The four boards were designed to read well by themselves, but also relate to one another when placed side-by-side. This was done by setting up a simple grid and creating relationships from board to board such as using the same size windows or overlapping background elements.

     

ARCHITECTURAL PRESENTATION BOARD 1- INTRO BOARD: The first board that I revisited was the top left layout with the large illustrated site plan. There are a couple of things that jump out at me right away.

1. First, the diagrams on the left feel like they are out of place and don't belong on the page. They seem like they were stuck there because I didn't know where else to put them. There are probably a few tricks I could do to set them better into the page, however, I feel that they just don't belong. 

2. The main background image is too cold. I was in a phase back in the day where I avoided color at all costs. You can see this in my undergraduate portfolio where the whole thing is black and white. The problem with the mostly desaturated site plan is that it comes off as lifeless. While at the time, I saw it as being artistic, in reality, it's not projecting the design in a positive light.

3. The text gets lost in the background. I remember doing this because I was afraid of the text distracting too much from the large site plan image. But, because I faded it out and threw it on top of a busy part of the site plan, the text becomes very difficult to read and almost becomes more distracting to the overall composition.

 

Above: The original board                           Above: The new board

What I did to solve the issues mentioned above was to simplify things. Typically with the intro boards, I like them to be simple but powerful. The site plan I felt, could be a powerful image if tweaked. I pulled back the destaturation a little, and added a green overlay. This took all but 10 minutes but really made a big difference. I also moved the diagrams off of this page and onto a different board. This cleared up some space to move the text around. I darkened the black transparent box to help separate the text from the background, so that the two didn't compete. I also placed a scanned sketch just below the text as a way to end the paragraph.

ARCHITECTURAL PRESENTATION BOARD 2- DIAGRAMS & PLANS: I think this second original board has a decent layout. There is a lot of information on this layout, but much of it is difficult to read.

1. The floor plans are hard to understand. This was a tricky part of the layout because the floor plans themselves are an odd shape. Therefore, I had to fit them on the page the best I could without making them too small. There is also so much line work that it is hard to decipher what is inside, what is outside, what are ramps, what are corridors, etc.

2. Along with the floor plans, the section at the bottom is next to impossible to understand at a quick glance. Understanding the section is key to understanding the design of this project, therefore, the section must read better than it currently does.

3. The sketches on the left don't belong on this page. It's always important to integrate process work, but finding a place to include it can be challenging.

 

Above: The original board                          Above: The new board

The first thing you may notice is that the diagrams from the first board were switched with the sketches on the second board. This tells a more organized story of the project. Next, I faintly shaded the floor plans. As subtle of a move as this is, it makes a big difference on how fast one can read and understand the floor plans. Now, items such as inside vs. outside, openings in the floor, vertical circulation, etc. can be understood at a glance. Finally, I revisited the sections, and applied a technique popular on this site to add depth and clarity to the line work. While I like the simplicity of just the line work, adding a little shading goes a long way.

Be sure to check back next week. I will revisit the last two boards and discuss how to unclutter a overly busy layout as seen in the third rendering board.

PAST PRESENTATION BOARDS: FAIL

Presentation boards are something I haven’t really talked about on this site and they seem like a good thing to transition into. I was looking through some of my old boards and couldn’t stop noticing really stupid mistakes that I kept making.

The below presentation was created in 2006, my junior year in undergrad. The design was an urban planning project and we were presenting our massing studies of an area in downtown Toledo, OH. At the time, I had only been using Photoshop for about a year, and this was probably the 3^rd project that I had used Photoshop to create my boards with instead of drawing them by hand. With that said, I will use these boards to begin explaining what not to do.

BOARD 1: The first thing that really grinds my gears is that there are hardly any labels or explanations. For some reason, I felt it wasn’t necessary to write much. This is crucial because you won’t always be standing next to your boards to defend the design. Having short explanations give viewers a quick introduction into what you were thinking. It also allows the jurors to understand the parts of the project they are interested in while they are pretending to listen to you talk. I typically like to have a 3 to 4 sentence paragraph on the introduction board summarizing the overall concept and giving viewers a place to start. This board, however, has nothing.

While the large figure ground covering most of the sheet is an important diagram, it should not be the focus of the board. It might have helped to overlay an aerial image or combine multiple diagrams with the figure ground to amp up the message I was trying to get across. In this case, it seems I was more concerned about the composition of the board rather than the information I was trying to convey.

Board 2: The second board isn’t much better. Again, not much information explaining the images. My biggest beef with this board is the waste of space in the gray box on the right side. The images in the box graphically aren’t saying anything. This would be the perfect place for more diagrams or text explanations.

The image at the top left of the board should be removed. It is covering up part of the elevations and is representing a view that already appeared on the first board with the physical models, and will appear again in the next board.

The elevations read extremely flat. I remember spending a lot of time designing the project sectionally, yet I don’t have any drawings showing a section slice through the site. The sections would have provided a much better understanding of the forms and scale of the spaces compared to the elevations that just come off as confusing and hard to read.

Board 3: I remember getting really excited with how these night illustrations turned out. This was the first time I tried this technique, and it had come together better than I was expecting (See the tutorial on how to create these illustrations HERE). The big problem though is that all the rendered images are at bird’s eye view.  Nothing is at eye level describing the experience of actually walking through the site. My thinking at the time was that I thought I could explain the building better with these types of views. But with this approach, I am essentially explaining the design as a sculpture and not as an inhabitable structure. I also show no people in or around the site, making everything feel lifeless. Adding people would have made a big difference in the atmosphere of these illustrations.

The repetition of views in these three boards are horrible. The pics I chose of the physical model are almost identical with the rendered views. While it seems obvious now, at the time, I didn't think twice about it.

While it is easy to look back at past presentations and pick them apart, it has also made me aware of the decisions I tend to make when I'm under a time crunch and has allowed me to work more efficiently the next time around. This is just one project of many so expect to see more critiques later on.

LIGHT STUDIES

I woke up this morning with an idea for a rendering using the villa I designed back in undergrad (same one used in the sketches post). I also wanted to use this time to experiment with some different lighting conditions. Primarily, how to get the back lit louvers to illustrate properly as well as created depth through the use of fog. This was the first pass, although the louvers still could use some work. I may try a different technique later. As always, I spent most of my time in Photoshop. The initial rendering from Kerkythea was rough and I wasn't sure if I would be able to get the look I was going for. However, once I started to insert the surrounding environment, things came together quickly which is typically the case. Below are shots of the SU model and Kerkythea rendering.

Sketchup Linework

Kerkythea Rendering

The illustration before most of the landscaping elements were added.

INTERIOR ELEVATIONS TUTORIAL (VIDEO)

As promised, I put together a video tutorial explaining the workflow that I use to create colored interior elevations using only Photoshop. There was a lot to go over, and I'm surprised I was able to fit it all in one 15 minute video. The steps are not difficult in terms of skill required, however, the sequence of steps to build up the elevation plays a big role in the success of the final image as well as maintaining control of all of the layers. The video is broken down into 6 steps which are summarized below.

STEP 1: POCHE

In the video, I filled in the section cut and exterior of the illustration in Photoshop. This was done to simplify things, however, I would strongly suggest executing this step in CAD or Illustrator for more precise final results.

STEP 2: TEXTURES

In this step, the textures of the walls and other architectural elements are added. One things I suggest doing is merging all of the same textures into one layer (such as merging all of the wood textures in the different rooms into one layer).  Many times, I want to adjust the hue, brightness, or levels of certain textures. Minimizing the amount of layers means I can make these changes quickly.

STEP 3: BACKGROUND

This step involves adding background information that can be seen through windows. It's very easy for the background to get distracting, pulling the viewers' attention away from the interior spaces. To avoid this, I tend to make the backgrounds more monochromatic, meaning I stick with one hue of color. In this case, I chose blue to compliment the warm tones of the wood. 

STEP 4: SHADOWS

This step is an important part of the process, and is where depth is given to the elevations. My advice is to go one room at a time like in the video. Shadow is added where you have a corner condition such as where the wall meets the ceiling or where a wall meets another wall. Also when there is a change in depth, shadow should be added such as in the stair railing. Check out my "Ambient Occlusion" tutorial or my "Quick Sections" tutorial which both cover the topic of adding shadow in more depth.

STEP 5: LIGHT

Step 5 discusses adding spot lighting and accent lighting. This puts warmth into the illustrations and brings attention to the important parts of the space. Adding light is as simple as adding white paint and setting the layer blend mode to "overlay". To punch up the strength of the light, duplicate the layer.

STEP 6: POPULATE

The final step invloves adding scaled people and furniture. This is where a lot of my time is usually spent. I have a huge library of people already cut out, but finding furniture at the correct angle can be difficult. Most of the time, this means distorting pics to look like they are in elevation. Take your time at this stage, because this is where a lot of interior elevations can get ruined with shotty Photoshop work.

SIMPLE INTERIOR ELEVATIONS

I spent some time this weekend developing some Photoshopped interior elevations in hopes of extracting a tutorial out of them for next week. We often create these types of elevations at the office for many of our clients, and the clients can't seem to get enough of them. I can understand why, they very easy to read and give a great since of scale and understanding to the space. We often use scanned images of the exact materials we intend to use or images of furniture planned for the space.

The best part about this illustration is that the workflow begins with just a simple linework drawing of the elevation. This can be done in CAD or generated from a 3D model with the perspective off. At the office, we typically have many CAD elevations in flux that we then take and apply this technique too for quick presentations. The CAD elevations make use of line weights which yield cleaner results.

From there, it is all Photoshop. No rendering engines required keeping things simple and fast.

The above image was used as the base for the illustration and was an export from a Sketchup model (I didn't have any CAD elevations for this personal project). You can see that the linework is very rough, however all of the imperfections were easily masked in Photoshop.

The secret to developing this type of illustration is focusing on the sequence of applying the materials, shadows, and lighting. I hope to have a tutorial next week detailing the step-by-step process of creating this type of illustration.

ARCHITECTURAL COLLAGE TUTORIAL

A student in Chicago emailed me a while back asking how I created the back cover of my undergraduate portfolio. The image was a collage of all of my projects Photoshopped together into a single composition. As time consuming as it may look, I probably only spent 2 or 3 hours on the page. I didn’t use any Photoshop “tricks” to get the final look, but instead just used the eraser tool with a soft brush to remove the backgrounds. Most of my time was spent experimenting with the layout and figuring out how all the pieces would fit together. Using some type of underlying grid was my way of maintaining control of the geometry and avoiding a chaotic look.

1) I began the collage with a simple black and white background that continued the theme of my other portfolio pages.

2) I next chose a few images that would act as organizing elements of the collage. To avoid harsh edges, I chose the "Eraser Tool", selected a soft brush, and lowered the opacity of the brush just under 50%. I then simply erased around the edges to allow the images to bleed into one another. For experienced Photoshop users, I would suggest using a layer mask instead of the eraser tool to maintain more editability.

3) The three images where arranged to cover much of the page and act as a texture for the collage. I overlaid a grid to show how the images related to one another and how they act as an organizational foundation for the rest of the collage.

4) I next added very neutral black & white images to infill around the edges. These images again add texture to the background but won't grab too much attention.

5) With the background in place, I then begin placing in foreground elements. The same method of using a soft eraser brush was used to help blend the different images together. I also lowered the overall opacity of some of the foreground elements to help set them into the background.

6) Again, many of the foreground elements still relate to the grid created by the background elements. As subtle as these relationships may be, they make a big difference in the success of the overall composition.

7) I created icons for each project throughout the portfolio. I wanted to find a way to add these icons to the back cover without them getting lost in the geometry of the other elements. I solved this problem by adding a streak of shadow behind the icons giving them depth. The shadow is barely noticeable, but really makes the icons pop. In the image below, I have separated the shadow and icons from the collage to better show the shadow shape.

Below is the final composition that was used for the back cover of my undergraduate portfolio. Most people probably won't even see the back cover, however, I wanted to do something a little different rather then just leaving it blank. It hardly took any time to create, and is one more thing that could stick in someone's mind when applying for schools and jobs.

HONDURAS ILLUSTRATIONS

I just finished a series of illustrations for a small project the office is working on in Honduras. The project is a memorial, therefore we wanted the illustrations to take on a meditative and quiet atmosphere. Two renderings were created of the same view to explain the different lighting scenarios a visitor would experience both during the day and the night.

The workflow used for these two images are similar to what I use for many of the illustrations on this site. Because I wanted the illustrations to have a "painted" look, I didn't overlay Sketchup linework like I normally do. Instead, I spent more time layering textures and manually painting in Photoshop.

SKETCHUP LINEWORK

Although I didn't show the linework as an overlay in the final image, I still like to keep it as a separate layer in my Photoshop files so that I can use it to make quick selections with the Magic Wand Tool.

Sketchup Model Textures

The above image shows what kind of textures and detail level the Sketchup model contained. As you can see, the textures are basic. I knew going into these illustrations that applying textures in Photoshop was going to make or break the final result.

KERKYTHEA RENDERING

The Kerkythea rendering is the image I began with for the illustrations. I tend not to spend too much time tweaking the settings in hopes of getting a perfect rendering. This kills too much time. For this view, I really only focused on getting the shadows to render correctly and give the floor reflections. The darkness didn't bother me because I knew this would be fixed in Photoshop.

TEXTURES

For these illustrations, correct textures were really important. I did not spend too much time adding textures in the 3D model because it is almost impossible to avoid the "tiling effect". Instead,  I extracted stucco finishes right out of photos of local Honduras buidlings. Also in this step, I took the smudge tool to rough up the polished concrete floor and spent time using the burn and dodge tools to punch up the shadows and highlights.

COLOR OVERLAYS

The last step was to add color overlays. For this particular rendering, I probably had 5 or 6 different color overlays. For example, over by the doors, I used a soft white overlay to fade the trees in the background and brighten the light entering the space. I used a yellow overlay on the right side where the light is washing the wall to warm this area up. Over the entire image, I used a light orange overlay. Each of these layers are serving a particular purpose, however they all bleed into each other bringing a level of cohesiveness to the overall image.

The above images are property of Paul Lukez Architecture. More information on this project can be found at www.lukez.com

SKETCHES

I used to draw a lot when I was younger and all but stopped sometime in college. I'm not sure why, but I always find myself trying to recreate hand drawings through Photoshop. I've noticed that the workflow that I use to recreate drawings follows a similar procedure as that of actually hand rendering an image. This idea didn't really hit me until today when I was creating some illustrations of a villa that I have been designing in my spare time.

When manually hand drawing an illustration, I would start by laying out the linework of the building. In Photoshop, I also start with an exported line drawing of my model as the base.

Next, I would calculate the shadows and rough those into the drawing. In Photoshop, I also always export the shadows of the Sketchup model as its own layer. As with hand drawings, strong shadow lines give dimension to the image and help to visually explain the geometry of the design.

With the linework and shadows set in place, I would then begin lightly shading in the perspective. It always took 5 or 6 passes of layering on graphite until the drawing was where I wanted it. This step is emulated in Photoshop by overlaying a basic clay rendering from Kerkythea. Similar to layering on graphite, I lightened the Kerkythea image, and built up the shade and shadow using the "Burn & Dodge" tools to give it a more hand rendered appearance.

The last step of hand drawings consisted of adding in the background shading and landscape. This is typically the last step for me in Photoshop with digital illustrations too. I leave this step to the end mainly because I let the strength of the rendered building inform me on how much landscape and background shading is needed. I don't want the two to compete too much hierarchically.

There are also a lot of subtle things going on in the above image that aren't immediately obvious. I spent some time roughing up the harsh shadow edges, periodically adding smudges, burning and dodging gradients so that they aren't so smooth, and adding imperfections to the linework. I also scanned one of my old drawings to get a sketchy texture to add as an overlay. All said and done, each of these images took about 2 hours. Hand drawing these would have taken me the entire weekend.

MODEL CLEANUP: PART 1

I tend to use a lot of linework generated by Sketchup models as overlays for architectural illustrations. Because of this, it's often crucial that the linework in my Sketchup models read clearly and appropriately. Before exporting the linework, there are a few techniques that I use to clean up the models to get rid of unwanted linework as well as add lines in areas that need it. While these techniques are somewhat basic, I still want to show these steps to help clarify an area of my workflow that I don't talk about much.

Soften/Smooth: This is something that I use on a daily basis. It is especially useful when importing geometry into Sketchup from other modeling programs. For the example below, I want to cleanup some geometry that was originally modeled in Rhino, then imported into Sketchup. You can see that the geometry is complex, and has been triangulated in many areas. The linework is confusing, distracting and not suitable for presentation.

1. This can be cleaned up in a matter of minutes. First, select the surfaces that need to be cleaned up, right-click on the selection, and choose "Soften/Smooth Edges".

2. The "Soften Edges" dialogue box will appear. Check both the "Smooth normals" box and the "Soften Coplanar" box. Then adjust the "Angle between normals" slider until the geometry is cleaned up.

The form of the roofs read much clearer now and don't have the appearance of being imported from another program.

PROFILES: There are certain situations, often with curved surfaces, where Sketchup doesn't render a line at the edge of the object. For the example below, the round column is barely noticeable. There is an easy way around this by turning on profiles.

1. To begin, choose "View> Edge Style> Profiles".

2. You will notice that the profile lines are much thicker than the rest of the linework, however, this can be adjusted. Choose "Window>Styles" at the top to bring up the Styles dialogue box. In the Styles dialogue box, first choose the "Edit" tab, then select the "Edges Settings" box (wireframe icon). Finally, change the profile number to "1" pixel. This will give the profile lines the same thickness as the rest of the linework.

Intersect Faces: The above technique solved part of the problem with the column, however, the bottom edge is still missing. This is due to the fact that every part of my Sketchup models are made up of groups. This leads to edges missing where planes intersect with one another such as the case with the column.

1. A temporary solution that I use a lot is the "Intersect with Model" option. I say that this is a temporary fix because I'm only doing this for representational purposes. In order to keep the model cleaner and more editable, I often don't save any "intersect with model" changes.

Select the geometry that is missing the linework. Right-click and choose "Intersect Faces> With Model".

The column is now clearly represented. In this case, it would have been easier just to extrude the bottom of the column up to the surface. However, there are many situations where the geometry is more complex, and the intersect faces options can save a lot of time.

GETTING YOUR STUFF TO THE MASSES

I received a question on my Facebook page asking what service I used for my website. I liked the question and it made sense to devote a post on the topic. The thing is, there are so many free services available that there is no reason not to put you stuff online. I started my site a few years ago not having any idea what I was doing. It was originally only meant to serve as a means of communication to and from my professors as I researched my thesis over the summer. For some reason, the site eventually morphed into a blog about architectural illustrations unrelated to my thesis. It just sort of happened and I’m glad it did. Even if your intentions are only for the site to serve as a web portfolio, the time it takes to setup a site is minimal. Here are a few suggestions I have about getting your stuff online.

VIRTUAL PORTFOLIO: Issuu.com-  I have long been a big fan of this site. Issuu is a digital publishing site that allows you to upload a PDF of your portfolio, and turn it into a virtual document that you can flip through via the Issuu platform. It’s a very clean interface and has a ton of options for embedding. A link to your virtual portfolio could be pasted in emails or added to a resume offering an easy way to send others your digital portfolio. One other note about Issuu. There are already tons of architecture portfolios uploaded which can serve as a great source of inspiration or give you an idea of what kinds of portfolios certain schools are accepting.

Below is an example of my portfolio that was uploaded to Issuu and then embedded on this site.

Open publication - Free publishing - More 2010

BASIC PORTFOLIO SITE: Carbonmade, FolioHD- I see these sites as an intermediate option between sites like Issuu and a full blown website. The features are somewhat limited, but what you do get is an easy-to-navigate site that makes browsing through projects a breeze. I have never used these services personally, but I have friends who went this route and it worked out well for them.

BLOGS: Wordpress, Wix, Tumblr, Squarespace-There are a ton of free blogging services. A lot of these services have their own platforms and hosting, meaning you don't have to use programs like Adobe Dreamweaver. Everything is managed online. I use a service called Squarespace. It's not free, but allows for a high level of customization and is constantly upgrading its platform with new features.

What I like about blog websites is that they allow you to express your work similar to the portfolio sites, but in a social way. Architecture is a social occupation, therefore it makes sense to show others that there is an actual person behind the work. If you're not into blogging, you can still create unique custom websites geared towards only presenting your work in a portfolio style format using these services.

The above suggestions are obviously only the tip of the iceberg. The options for getting your work online are only going to increase and it can be a little overwhelming. My suggestion is start simple. Set up a game plan of what you want, and stick to it. This will ensure that you get clear, quality content online in a short amount of time.