Using a brochure design to create a web page

My wife and I have been very busy these last couple of weeks getting ready for the My Montana Wedding Expo. We created a variety of promotional materials which I shared in my last blog post. One of the main items was a brochure on which we spent the bulk of the time. In it we outlined most of the details of the services provided, pricing and packages, and information about the artist for our new wedding painting business call Captured on Canvas.

When you create a brochure or content for a web page, you have to organize information into bite-sized, digestible chunks so your audience doesn't get overwhelmed. You also have to create a pleasing visual design with appealing graphics, and a cohesive look that supports the brand. When a designer goes through this process in creating a brochure, creating a website or web page with similar content becomes very streamlined.

My goal then was to add the content of the Captured on Canvas brochure to my existing JeffTroupeFineArt.com website. I chose to create a separate wedding page on the site in which all of the content would live. The first step was to create a rough sketch of how the Weddings page would look on the website. Next I created a mockup of the page in InDesign which is what I will use as a guide to create all my html and css code. After doing this, there were a few things that I noticed that I would need to change from the brochure's layout. some of the graphics would need to be enlarged to better fill the wider format, and I was going to need a navigation solution to help the user find their way on this now relatively long page.

The solution for this was to create a horizontal navigation element for this page only that would immediately scroll to the link on the page when clicked. These are known as anchor links. The main navigation for the site, which is a vertical bar on the left side of the page, would then be unaffected and still retain its clean look and simple functionality.

I was able to use the same graphics on the site as I did on the brochure. A simple change of the color mode in Photoshop from CMYK (for print) to RGB and conversion to .png files was all they needed. After gathering all my images for the page, I need to create my html code and CSS styles and finally make it mobile responsive. I think this is a successful example of bringing a design from print format to digital.

wedding page mockup created with InDesign


Captured on Canvas Promotional Materials

Patti and I have spent the last week and a half developing our promotional materials for our Captured on Canvas Wedding Painting business. The bulk of the time was spent on the tri-fold brochure which gives a good amount of detail about the services provided, prices, packages, and information about the artist.

I wanted the design to be clean and simple and highlight the artwork. The color scheme that was chosen is black, white, gray, and pink as these are an elegant combination, evoke weddings, and have a feminine appeal.

I also developed the Captured on Canvas logo, which was created in such a way so it could be nicely paired with my existing Jeff Troupe Fine Art logo. I chose simple clean shapes as to make it have a similar feel, but chose a century gothic font for the main title and an elegant script font for the 'wedding painter' part of the logo to differentiate it a bit. The large painting of Patti and myself is featured on the cover of the brochure which was chosen for its dramatic lighting and that the logos in white compliment it nicely.

We also developed three postcards which show a painting as it progresses from sketch to completion on the front and pricing information on the back. My progressions of these paintings have been very popular on social media and gives a lot of insight into the craft of the end product.

We are also going to begin offering gift certificates at Jeff Troupe Fine Art and have highlighted them in the promotional material. The burgundy version of the logo was used and all the copy and type setting is burgundy as well. The script font was used for its elegance and perceived value.

Captured on Canvas postcard #1 (front)


Hockaday Museum of Art 50th Anniversary Logo

It was a big honor to have the opportunity to create the 50th Anniversary Logo for the Hockaday Museum of Art in Kalispell Montana. Their existing logo needed to be modified in a way that celebrates their 50 years of existence. I came up with a variety of concepts for the logo design, but the chosen concept was integrating an image of the museum exterior, and adding a stylized number 50 that echoed the curves of the existing logo. I had to seamlessly integrate these new design elements and make them feel as if they were all created by the same designer. This was a tough challenge but I am very satisfied with the results.

This is also a good demonstration of my logo creation process in which I progress from sketches, to illustrator comps, and to final logo. For this logo, I delivered a variety of color combinations per the client's request.

logo sketches


Digital Paintings

Graphic design and web design are competitive fields. A website that clearly communicates your services, experience, and expertise is an essential tool every designer needs to promote their business. The site in and of itself needs to be a portfolio piece that prospective clients can look at and be impressed by.

I spent a lot of time crafting the website for Jeff Troupe Designs. I wanted it to be clean and professional with little clutter. but it was important to show what I believe makes our company stand out from the crowd. Design ability, color knowledge, typography, user interface aptitude are attributes that most professional level graphic designers share. But few can create their own quality content and fewer still have professional illustration experience. These are the differences I wanted to be sure to highlight on our website. I did that in a few ways, one of which was creating digital paintings of our two team members.

Digital paintings are not digitized photographs, but rather are painstakingly created by hand using brush tools in Photoshop. You create paintings such as this much in the same manner as you would a traditional oil painting. I begin with a pencil sketch on paper and then scan the sketch on my flatbed scanner. Now I am able to take the scan of my sketch into Photoshop. A mouse is not the proper tool to create a quality digital painting. You need a pen and tablet which is similar to a mouse and mouse pad except the pen looks like a typical pen. You can "draw" right on the tablet and the results are seen on your monitor. Wacom makes a great tablet. I use the basic Intuos 2. The pen is even pressure sensitive and the brush tools in Photoshop do a decent job of mimicking oil paint brushes, water color or pastel. I enjoy making most of my digital paintings look like chalk pastel which is achieved using the "sponge" brushes.

Below are high resolution versions of the digital paintings that are featured on my website.

Digital painting of Jeff Troupe


My Logo Creation Process

Many clients and potential clients have asked me about my logo design process and some have wondered why I typically spend between 10 to 15 hours on a logo. I always explain it like this: The best logos clearly and concisely communicate your brand to your customers and potential customers. Many times the final result can appear deceptively simple. But many hours must go into research and exploring various ideas that the client may or may not have thought of so we can be sure that we arrive at the best result, not just a result. The first idea that a designer comes up with is rarely the best. My process has been effective in producing logos and branding that are effective, that the client is satisfied with, and the client has been a part of each step of the way.

I break it down into three basic steps: sketch, comps, and final logo. For the sketch part I complete dozens of sketches to explore several ideas. I submit the best 7 or so to the client for feedback and get input. This is an important step as I can explore many variations of the original idea a client may have had.

The next step is to take 3-5 of the sketched logos that the client is most excited about to a more polished vector version. These comps will give the client a good idea of what a final version of the logo will look like. I also explore fonts at this stage and will solicit feedback from the client before they choose the final logo.

I take the chosen comp to its final vector stage. I also provide the client with specific RGB values for colors used in the logo and the name of fonts in the final presentation as this will be key to defining the company's brand and can be used when creating brochures, pamphlets, business cards, or any other company materials. I always give my clients the source art so they can have that for when they need to create high quality reproductions of their logo. I save out the logo into various sized jpg and png files for the client to use as well. The great part about creating logos in vector art is that they can be reproduced at any size from billboard to business card size and not lose any quality.

There are cheaper options out there but they will not go through this process, they won't be nearly as thorough, access to the source art will probably not be available, and many times they have reused elements of old logos in yours. Here is a great article on logo design pricing:

Candles and Journals logo sketches


Jeff Troupe Designs Website Update

We originally launched JeffTroupeDesigns.com back in July shortly after launching our graphic design and web design company, Jeff Troupe Designs. At that time a basic version of the site was launched with no integrated portfolio or blog. The testimonial page was also not finished and a few design concepts that were more technical to implement had not been added. We wanted to get the site up and running quickly, but we are now very excited that it now reflects the original vision.

All of these missing elements are now present in the current version of the site. This is a 100% custom website that we built from concept to artwork to code and implementation. There are a couple of open source javascript plugins that have been added to enhance the functionality, but all of the site architecture was created by Jeff Troupe Designs.

The site is clean with no distracting elements. We added a few flourishes like the paint tube buttons and the laptop illustration in the header and the footer. We wanted to make it easy for potential clients to look at the site and quickly and easily find out what services we offer and what we are about. I think we were successful in that.

One fun element that we added was in the header image of the laptop computer. It starts out dark, but upon rollover, the task light turns on and brightens up the entire image. This was done in css by having two images stacked one on top of the other and taking the opacity of the top image (the dark image) to 0% and thus revealing the light image beneath.

Jeff Troupe Designs portfolio page


Candles and Journals

I had the pleasure to work with Heidi Escalante at CandlesAndJournals.com. She had an existing site that was in need of a designers touch to better convey her messaage: high quality candles and journals at discount prices to benefit YWAM (Youth with a Mission).

We took the time to clean up all the product photography, rewrite descriptions, unify font styles, and add a eye catching home page graphic with an obvious call to action.

Visit Candle and Journals on-line store

Before and After product photography

Travel Tin shop page


About YWAM page


Remember When...

My church Victory Baptist needed a series of ads which will be run in our local paper The Mountain Trader.  I created the sketches and painted them in Photoshop.  The layout in the ads was achieved with InDesign.  I wanted the ads to have a bit of a retro feel so I limited and desaturated the color a bit, and added some noise to the background to give the artwork a grainy feel.


Portfolio Website

My personal portfolio page for my digital work is live and also optimized for mobile.   visit: www.jefftroupe.com This has been a long time coming.  The photoshop mocks are done and the art assets are completed.  The next step is to write the html and css and get it live which should happen by early next month.  The image in the banner was created in illustrator and depicts my home in Montana overlooking the Flathead Valley and the gateway to Glacier Park.

Portfolio Home Page
Header detail

Portfolio Project Page
Portfolio Traditional Media Page


Grow Banner Art

I created this series of artwork to be banners that will hang at my church, Victory Baptist, in Kalispell.  They were created in Adobe Illustrator and have a travel poster feel to them.  Each visual image is a common reference in the bible.
Main Banner for the 'Grow' theme behind churches pulpit.  4ft x 8ft are the final dimensions

The seedling image is a 3ft x 8ft banner that flanks the pews





Client Event Apps for QuickMobile

While working with Somatone, I had the privilege of working with Quickmobile to create client specific versions of their event management app.  Mockups had to be created for the 4 main screens of the iPhone app using graphics, colors, and fonts provided by the client.  Once the layout was approved, I created artwork for the remaining app screens, then modified the artwork to suit the iPad and Android devices.  The final step was so save out all assets to the correct naming convention.

Nimbly Games Doodle It Concepts

Sketch book theme main menu

Stickers and crayons theme main menu

lined paper theme main menu

turtle mascot concept

penguin mascot concept

Dash City

color roughs for final building art for Playfirst's Dash City which was never released.

sketches for hospital and japanese restaurant


Gree Jackpot Slots--Wolf Winnings

I provided art direction as well as concept art for the 'Wolf Winnings'  slot game which was part of a larger game called Jackpot Slots.  The assets also needed to be resized and reconfigured to work on multiple devices and saved out into files with a strict naming convention which I was also responsible for.  The name was later changed to 'Lupine Loot'.


Concursion Final Assets

Concursion Main Menu

Concursion Options Screen
Here are a couple of the screens I designed for Concursion which was released on Steam earlier this year.  I created all the design, artwork, and animations using Photoshop and Flash.


BlackJack Tournament

Game Screen: Photoshop and Flash Artwork

Dialogue Screen: Photoshop and Flash Artwork
These are some screen shot sample from Blackjack tournament, a game I worked on for Casualing.  I worked on all the visual layouts, concept, and final artwork.


Concursion Early Concept Art

This project has been a joy to work on.  I have been working to lead the Somatone Art Team to create all of the visuals for this game.  I have set the tone for the art style which was very challenging as there are five distinct art styles which define five unique game worlds.  What makes this game unique is that the player seamlessly traverses the five different genres all in a single level.  The game is still a work in progress but in coming along splendidly.
hero concept

rescue background concept

hero actions


Haptic Muse Preview App

Haptic Main Menu Navigation Screen
Haptic Sci Fi/Fantasy Screen

Haptic Sci Fi/Fantasy Screen Touch Points

Haptic Casino

Haptic Catalog Page

Haptic Muse App 
Article on Immersion.com

Haptic Effects are vibration effects on Android mobile devices that enhance the overall user experience in games and apps.  The Haptic Muse is preview app that Somatone created for Immersion to showcase their Haptic effects by pairing the effects with powerful visuals and sound effects.  I was was very fortunate to work on this project with the great team over at Immersion.  I coordinated the visual art effort on this project and created all the initial visual concepts.  We designed the app to provide the experience of exploring an Exploratorium.  Within each hall in the Exploratorium, the user would have the opportunity to interact with different objects by touching them in specific points.  The touch would trigger a cool animation with a coordinated sound effect.  I recommend downloading the free app if you have an Android device.

Making Fun Bloodream Trailer

This is a trailer that was created for the release of BloodRealm by Making Fun.  I provided visual art direction and editing in After Effects.  I also coordinated efforts with Somatone's audio team to ensure that the visuals and audio were in sync to deliver a powerful experience to the viewer.


Rumor Mill App Artwork

Little Bird
All My Gossip
Add Nickname
Start a Rumor


PopShare App

Gallery Screen

Main Menu Screen

Share Screen