fortes.com

Here’s a flyer for a great upcoming show displayed in Avalon:

Let’s take a quick look at how this was constructed. First, the background image was found on the excellent Stock Exchange. Next, we’ve used Noe Stout, a font by Dan Noe which was found via the very useful FontLeech. We’ve also made use of Candara, one of Microsoft’s new fonts for Longhorn.

The flyer’s layout is contained within a Grid, which is placed inside of a Viewbox in order to provide automatic scaling.

Most of the layout here is straightforward, so I’ll go over only the new or tricky parts.

I’ve used small caps for the names of the performers; small caps can be enabled easily through the Typography.Capitals property, like so:

<Bold Typography.Capitals="SmallCaps">DJ Baby Shower</Bold>

The words “DJ Baby Shower” (in the top-left corner) are shifted a bit to give a cut-out effect; the RenderTransform property is used to apply a TranslateTransform to the entire TextFlow.

<TextFlow.RenderTransform>
  <TranslateTransform X="-5" />
</TextFlow.RenderTransform>

Because this offsets all of the text contained within the TextFlow, I then applied a bit of Margin on the other Paragraph elements.

Finally, because the lower portion of the image isn’t as dark, I’ve applied a translucent background to some of the text, as well as some opacity on the Button and TextBox. For the text, I used a semi-transparent gradient background on the containing Border:

<Border Background="VerticalGradient #9fff #4fff" ... />

Note that I’ve used a shorthand syntax for the colors: the first hexadecimal digit is the opacity, and the next three are the rgb values.

Here’s the complete markup (If you’re trying this at home, make sure you download the font and image I’ve used — name the image street.jpg):

<Viewbox
  xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
  xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
  Margin="10" 

  <Grid >
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="350" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Image Source="street.jpg" Stretch="Uniform"
           Grid.ColumnSpan="3" Grid.RowSpan="3" />

    <TextFlow FontFamily="Noe Stout Bold"
              Foreground="White"
              Grid.ColumnSpan="3">
      <TextFlow.RenderTransform>
        <TranslateTransform X="-5"/>
      </TextFlow.RenderTransform>

      <Paragraph FontSize="200" LineHeight="135">
        DJ baby<LineBreak/> shower
      </Paragraph>

      <Paragraph FontSize="93" Margin="0,10">
        +special guests
      </Paragraph>

      <Paragraph FontSize="60" Margin="10,50">
        5-8pm @<LineBreak/> bed, bath, and beyond
      </Paragraph>

      <Paragraph FontSize="60" Margin="10,50">
        1114 18th st, next to <LineBreak/>
        applebee's
      </Paragraph>
    </TextFlow>

    <Border Background="VerticalGradient #9fff #4fff"
      Grid.Column="2" Grid.RowSpan="3"
      VerticalAlignment="Bottom"
      HorizontalAlignment="Right" Margin="8">

      <TextFlow FontFamily="Candara" FontSize="23"
                Margin="15">
        <Paragraph FontSize="32" FontWeight="Bold"
          Typography.Capitals="SmallCaps">
          Last Chance
        </Paragraph>

        <Paragraph>
          Join
          <Bold Typography.Capitals="SmallCaps">DJ Baby Shower</Bold>
          on the final stop of his blockbuster tour:
          <Bold Typography.Capitals="SmallCaps" >
            Miss Manners Presents:
            The Expectant Couple
          </Bold>.
        </Paragraph>

        <Paragraph Margin="0, 10">
          Openers
          <Bold Typography.Capitals="SmallCaps">MC Crate & Barrel</Bold> and
          <Bold Typography.Capitals="SmallCaps">Mix Master Trimester</Bold>
          will rock the mic early.
        </Paragraph>

        <Paragraph Margin="0, 10">
          Don't miss out on this
          <Bold Typography.Capitals="SmallCaps">Invite-Only Event</Bold>!
          Bring a baby monitor or bouncy seat for drink specials!
        </Paragraph>
      </TextFlow>
    </Border>

    <TextBlock FontFamily="Candara" FontSize="22"
               Margin="10,10,10,0" Foreground="#9fff"
               Grid.Row="1" Grid.ColumnSpan="2" >
      <Bold Typography.Capitals="SmallCaps">
        Add Yourself to the Guest List:
      </Bold>
    </TextBlock>

    <TextBox Opacity=".7" FontFamily="Consolas" FontSize="16"
      Grid.Row="2" Margin="10,0,0,10">
      you@example.com
    </TextBox>
    <Button Opacity=".7" FontFamily="Candara"
            FontSize="16" FontWeight="Bold"
            Grid.Row="2" Grid.Column="1" Margin="0,0,10,10">
      Add
    </Button>
  </Grid>
</Viewbox>