About The Patterns:

Back To Site Index

While designing the look of the yearbook pages, I initially wanted them to look like a yearbook laying open on a table. However, after seeing some of the Islamic motifs the photography students captured while out on the town, I attempted a tiled pattern, something more unique to our experience.

The patterns framing the yearbook pages were developed from examples I found in "Art of Islam, Language and Meaning", Titus Burckhardt, which is referenced at the bottom of Lesson 5 of a Dartmouth College math course.

Using an example from Burckhardt...
Burckhardt, Plate 38

...within a drawing application I assembled a geometric base, using a circle within a square which is then sub-divided into halves, quarters, eighths, etc...
Baseline Geometry

...and filled in the resulting boxes and triangles to get a feel for the Burckhardt examples.
Pattern in blue

I imported the graphic into Photoshop, and used the extrusion tool in an attempt to simulate the look of raised blue tiles used to provide texture to mosque exteriors.
Textured pattern in blue

Using this basic pattern, I pieced together a large mosaic in Photoshop, and scaled it to a managable size...
mosaic in blue

...which I then clipped portions from, measured so that pieces would (hopefully) fit together without seams when used to frame yearbook pages. I then drew straight edging by drawing long boxes, filling with blue, and extruding. These I pasted onto the mosaic clippings to frame the portions that wouldn't be touching other mosaic clippings in the final image.
framed mosaic clippings

Finally, an HTML table was used to set the graphic elements on a computer display.

<table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="717" HEIGHT="467" > <tr> <td ROWSPAN="3"><img SRC=".left.jpg" BORDER=0 height=467 width=40></td> <td><img SRC="top_left.jpg" BORDER=0 height=40 width=276></td> <td ROWSPAN="3"><img SRC="center.jpg" BORDER=0 height=467 width=5></td> <td><img SRC="top_right.jpg" BORDER=0 height=40 width=276></td> <td ROWSPAN="3"><img SRC="right.jpg" BORDER=0 height=467 width=40></td> </tr><tr> <td></td> <td WIDTH="276" HEIGHT="387"> <!-- text goes here --></td> <td><!-- text goes here --></td> <td WIDTH="276" HEIGHT="387"></td> </tr><tr> <td><img SRC="bottom_left.jpg" BORDER=0 height=40 width=276></td> <td><img SRC="bottom_right.jpg" BORDER=0 height=40 width=276></td> </tr> </table>

The final result, before content was added:

Back To Site Index