Website Front Page

For this exhibit, the goal was to create a 3D subject and include it in a design. I choose to design a front page of a webpage for a company called "Strokes" that teaches and sells calligraphy lessons and stuff. The idea surged from the desire to learn the art of stroking for painting as well as for lettering. As for the 3D subject, I decided to do a 3D text that stands by itself.

• I started my design by making the 3D object first. I found a photo of the word Calligraphy and decided to cut out the background. Because the background was a solid color, I used the background eraser tool to remove it.

• In a different file, I opened a board and created a new background using the rectangle tool. Then I changed the background color using the color picker and chose a soft gray. Then I went to gradient overlay, changed the blending mode for soft light, and reduced the opacity. I also added a little bit of noise and then used Gaussian blur to smoother the surface.

• Then, I imported my cut out and placed the Calligraphy word into this new background. I added some effects using the layer style option found at the bottom of the layer menu. I changed the color text to match the background better and added drop shadows. I switched the blend mode to overlay to soften the shadow's thickness. Then I applied level and emboss.

• To create a more dramatic 3D effect, I applied bevel and emboss, changed the style to inner bevel, and started manipulating the other default settings until I got the desired result.

• Then I added a cast shadow under the object aligning it to the proper position to create a nice blend to each other. I brought down the opacity for the shadow layer group.

• I applied a little bit of reflection to add some realism to the piece. I did that by duplicating the text layer, adding Gaussian blur, and reducing the value of the pixels. Then I reduced the opacity of that layer.

• To create the web page, I used grids and guides to build a great composition. Getting the alignment right will help the user to read clearly.

• I then decided to add motion to my 3D form. I created a paint stroke pattern out of a cutout and placed it behind the 3D text while also surrounding it. I reduced the opacity in sequence to create a nice gradient pallet.

• I decided to create a vertical menu bar above the named company instead of placing them on the top to let the 3D form stand by itself and at the same time make it easier for the viewer to find the menu in cleaner background.

Social Media Icons - www.fontawesome.com

Typography - "Galvji", "Brandon Grotesque"

Strokes & figure - www.pexels.com