CBC Print Logo: Final versions

White

Black

Greyscale

Full Color - Teal

Final vector versions developed for print use. Designed with Inkscape. Orbitron font.

CBC Web Design: Subpages for Featured Groups

Custom icons were designed for the church groups to be in featured content boxes on home page. They are linked by read more buttons to a specially styled subpages as opposed to the plain all text default suppages. I took the time to do photo extraction of a lovely photo of the First Lady and groups leader for this glossy content box. I also re-colored the pink heels to match here outfit.

CBC Web Design: Glossy Black Theme and its inspirations.

 [Click images to enlarged]

Finalized mockup for CBC welcome page. 

Compare to the 2 primary examples provided by the client:

the use of featured content boxes for layout

hip tekky design with dark background and metallic text

I needed something to reflect the client's 3D mantra and taste for chrome and gloss. The clients has objective of bring technology to an otherwise old fashioned traditional church. I wanted the design to reflect the churches respected history and tradition while looking toward the future and technology. The content was based on clients example websites like Bethel Baptist Institutional Church which used "advertisement-like" boxes to feature church activity. A flashy Jamal Bryant Ministries (refers to style and type of web site) inspired the black, glossy, metallic theme. An homage to the traditional shield type logo was used but with a Web 2.O twist. See previous post.

But I have to use my own design aesthetic for this Tradition meets Technology theme. Unique. Geometric. Coded with color. Metaphorical motifs. Far removed from the ubiquitous kitschy church websites.

I took inspirations from the following dark websites:

http://wearecyan.com/  teal/charcoal palette; icon use; cool background texture for header

http://www.ttthings.com/   starry background

http://www.futuretalent.org/ photo extraction with colored glow fade into black background; content box - glossy black w/ bright icon - MAIN INSPIRATION for sidebar in my theme

CBC Web Design: Evolution of Header and Letterhead

 [Click images to enlarged]

 First version with all the major elements established. Original Edwardian script for site title lack symmetry. The "3D MINISTRY' has balanced height, but 3D needs emphasized in center.

The The League of Moveable Type's Orbotron typeface (open source) was pivotal to the final design solution. This version is symmetrical with the "3D" emphasis front and center over the motto. This font not only provides both symmetrical height and width for the text elements, it fits the "technological", "futuristic"  theme of the black glossy, "iPad-looking" website interface. A few sparkles top it off.

Web site logo simplified for a print version. These early sketch need to be finalized in a salable vector image. Which can be re-sized with out degradation.

Designing a logo for this project has been very challenging.  None of the elements naturally fit together. I was charged with developing a logo based on an this amateur mall airbrushed T-shirt artwork. Finding the right font style for a composition using "3" and "D" on each side of "cross" took a lot of trial and error. I decided to incorporate the shield as a shape to enclose these 3 stubborn characters. The shield also provides an excellent visual motif for any Christian organization. It adds a touch of "traditional" imagery to the "modern" Tekky" design which reflects the church's objective to move the ministry of this 90 year old historic church into modern technology. The shield shape can be use in a varity of sizes, solid or outline, 2D or 3D in graphic design. See how the shield was used as icon throughout the Central Baptist web page design.

The cosmic rings from the website design has bee translated into two symmetrical "swooshes" for print.  The logo color scheme may adjusted by easily changing color/style of each background swoosh or as one ring. See upcoming post for examples.

Related articles

• How to Design Your Own Letterhead (brighthub.com)
• 10 Great Examples of Letterhead Designs (brighthub.com)
• Weekend Project: Styling Sidebar Headers (everything.typepad.com)
• 10 Free Business Letterhead Templates (brighthub.com)
• Unique Letterhead Printing That Works (business.ezinemark.com)
• Graphic Design Prices (adrinahdesign.com)
• Overview of Different Letterhead Styles (brighthub.com)

CBC Web Design: Glossy Black Theme and Grid layout established

Finally getting a clear design direction for the CBC website. I needed something to reflect the client's 3D mantra and taste for chrome and gloss. The clients has objective of bring technology to an otherwise old fashioned traditional church. I wanted the design to reflect the churches respected history and tradition while looking toward the future and technology. The content was based on clients example websites like Bethel Baptist Institutional Church which used "advertisement-like" boxes to feature church activity. A flashy Jamal Bryant Ministries (refers to style and type of web site) inspired the black, glossy, metallic theme. An homage to the traditional shield type logo was used but with a Web 2.O twist. See previous post.

But I have to use my own design aesthetic for this Tradition meets Technology theme. Unique. Geometric. Coded with color. Metaphorical motifs. Far removed from the ubiquitous kitschy church websites.

I took inspirations from the following dark websites:
http://wearecyan.com/  teal/charcoal palette; icon use; cool background texture for header
http://www.ttthings.com/   starry background
http://www.futuretalent.org/ photo extraction with colored glow fade into black background; content box - glossy black w/ bright icon - MAIN INSPIRATION for sidebar in my theme

Red Arrow marks "fold" line. All above the fold stays fixed.
Blue arrow marks options for featuring up-datable "events" info -  the main body, sidebar module, button link.
Yellow arrow points out the phrase "steps" that unifies the visual "shoes" concept with the client, CBC mission on the move theme.

CBC Web Design: Shield Logo Inspired Theme (cracked Webs.com CSS code)

Yahoo! I finally cracked into the Webs.com template CSS. Customer service wouldn't give me the CSS class to change nav bar color. DUH I finally thought to "View Page Source"  and not only did I change my nav color, I figured out side bar CSS to customize it with this cool glossy background for the titles with shield icon reminiscent of the CBC logo. I'll use black glossy buttons and shield motif to create a theme for the CBC site...good practice for creating Wordpress themes...my next goal.

Related articles

• Themeforest Complexity v2.1.2 Premium WordPress Theme (r4dezign.wordpress.com)
• Styling and skinning your apps with TravelTripper (googlewebtoolkit.blogspot.com)
• HTML&&CSS Experimenting (tinytitan.wordpress.com)

CBC Logo Development: Photoshop rendering

CBC Logo Development: 3D concept inspiration

CBC Project: Repair curb & brick in church photo

This was the results of my revisions to the church photo so far. (taking out phone line & parked car in previous posts)


I decided to continue inmprovements by fixing the crumbling curb, extending the newer lighter concrete sidewalk and lawn using Vanishing point techniques. In another layer I use VP to select and paste a better version of the brick I previously stamped in place of the removed car. I used the burn tool to age it a bit, then added a little more to the shrubs.

CBC Project: Removing and moving objects in photo

The original photo of the church has a lot of clutter that needs to be removed: telephone lines criss-crossing the beautiful clouds and blue sky and a car parked in front.

 

My first challenge was to remove the telephone lines. ( Methods explained in previous post.)



As my son would say, "Just for the LOLZ" I moved the car down the street. Basic steps: duplicate original layer, use move tool to place it down the street, trnasform tool to resize and distort to look natural in the perspective, duplicate the resized car, select the layer for the resized car go to EDIT>FILL... select 50% gray, rename layer shadow, use transform options to orient the shadow. I also used FILTER> Motion Blur to smooth out jagged edges of shadow shape. Last I created an elipse, filled with black #000000 for the darker shading under the car. (I used the original car as model) Last of all, I selected the moved car and desaturated to give it the effect of distance.

Here's the last revision removing the car completely! I used a combination of techniques to get rid of the car and create a landscape in its place. This was extremely complicated, because of so many elements with different textures colors  and shapes. I duplicated the car so the original wouldn't be destroyed in the process. I selected the car with the Magnetic lasso, then began the painstaking long tedious all night task of using the Clone Tool (Stamp Tool PS-CS4) to select, copy and stamp a thousand sections into the area of the selected car. After deselecting the car there were still areas outside of the selection that need to be edited. I used the Vanishing point techniques to create several panes for the finishing the details of the landscaping. I used one pane for the road to extend the shadow left behind. I used panes for the different shades of grass and extended the dark shaded grass to the end of the photo over the sunlit grass so the foreground would be the same. I got very detailed by using separate panes to build up the flower bed and extend corners of the landscaping logs on the corner of the building. Obvious the shadowing is not accurate to the laws of light & perspective, but it looks natural enough.

CBC Project: Removing objects from photo with Photo shop stamp tool and vanishing point.

Finally found this photo for Central Baptist Church web site. Its a full view of the from. No weird artifacts, but I'd like to get rid of thee telephone lines and the car. Using the Photo shop stamp tool and vanishing point...

1. I duplicated the original layer(above background)
2. Created new layer above "background copy" Named it "remove telephone lines"
3. Using stamp tool to remove telephone lines from clouds and sky ONLY.
4. Go to Filter > Vanishing point. Create grids for each plane on church roof, window, brick sides, etc that telephone line intersects
5. Use selection tool to select matching sections; ALT CLICK selection and move and paste over the telephone lines.
6. Helps to keep toggling the zoom back and forth so you can see pixels for editing and out to see how it looks at 100%
7. click OK when satisfied. Hope I didn't forget any steps.

Well, I think I removed the telephone lines with out disrupting the natural characteristics of the clouds and sky really well

Create Custom Banner for Web Template

 This is the first header I designed in Inkscape to replace the generic template header for the CBC website.

Now that I have a created a neat little vector image of the steeple I designed a unique new banner that includes the church motto.

Create Vector Image of Steeple from an Old Church Program

With the limited resource of the poor quality print of the church, I was able to conceive of creating a logo/avatar based on the churches own steeple. Simply created a simple vector drawing in Inkscape by tracing a cut from the original image.

Inkscape Mask Disguises Poor Image Quality

I am helping small church provide customize the template they are using for their first website. So they may have a visually unique website without incurring web hosting fees. Unfortunately they don't have a logo or any web quality images. The only they provide for the church is this scanned copy of the poorlly printed church bulletin. I decided to use graphic effects to disguise the terrible quality of the image. Inkscape to the rescue!  I used Inkscape to create a mask from the original that I can use as a background image for the Welcome Page