Gepost door: antonidol | dinsdag 20 mei 2008

Kickoff: Droplet

Om mee te beginnen wil ik een projectje delen, waarin ik geprobeerd heb het logo van een interactieve TV aanbieder in XAML te bouwen. Het bleek een leuke exercitie, met een resulaat dat veel had van het origineel:

In XAML bleek een eenvoudige droplet een combinatie van twee cirkels en een ‘cashewnoot’ Path Shape voor de glimmer. Deze laatste heb ik met de hand getekend in Blend, maar ze zijn eenvoudig te maken door van een cirkel het onderste punt met een “Direct Selection Tool” omhoog te trekken tot voorbij het midden van de cirkel…. De druppels aan elkaar was echter een ander verhaal: hoe krijg je die druppels zo dat ze in elkaar overvloeien?

Uiteindelijk werd het een combinatie van het buitenste Path, aanvankelijk samengesteld uit drie cirkels, maar daarna omgebouwd tot een Path Shape. Het gewenste overvloei effect werd bereikt door een BlurBitmapEffect op de binnenste cirkels te zetten. (Ik snap dat dat niet werkt in Silverlight…)

Dit is de XAML code voor een enkele Droplet:


<Grid Width="100" Height="100">
 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="*"/>
  <ColumnDefinition Width="10*"/>
  <ColumnDefinition Width="*"/>
 </Grid.ColumnDefinitions>
 <Grid.RowDefinitions>
  <RowDefinition Height="*"/>
  <RowDefinition Height="10*"/>
  <RowDefinition Height="*"/>
 </Grid.RowDefinitions>
 <Ellipse Stroke="#FF000000" Grid.ColumnSpan="3" Grid.RowSpan="3">
  <Ellipse.Fill>
   <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
     <GradientStop Color="#FF008000" Offset="0"/>
     <GradientStop Color="#FF64C800" Offset="0.5"/>
     <GradientStop Color="#FFC8FF00" Offset="1"/>
   </LinearGradientBrush>
  </Ellipse.Fill>
  <Ellipse.BitmapEffect>
   <DropShadowBitmapEffect ShadowDepth="15" Color="#FF64C800" Opacity="0.5" Softness=".5" Direction="315"/>
  </Ellipse.BitmapEffect>
 </Ellipse>
 <Ellipse Grid.ColumnSpan="3" Grid.RowSpan="3">
  <Ellipse.Fill>
   <RadialGradientBrush>
    <GradientStop Color="#00008000" Offset="0.697"/>
    <GradientStop Color="#FF008000" Offset="0.947"/>
    <GradientStop Color="#FF035303" Offset="1"/>
   </RadialGradientBrush>
  </Ellipse.Fill>
 </Ellipse>
 <Path Grid.Column="1" Grid.RowSpan="2" Width="80" Height="40" Stretch="Fill" VerticalAlignment="Top" Margin="0,5,0,0" Data="M146.95618,2.9995805E-06 C226.86218,0.013676752 273.86514,51.703491 289.14128,86.956135 297.95685,107.29974 276.17844,138.9885 252.71411,133.96005 236.26232,130.4344 223.33633,102.23228 145.78051,103.40737 68.224695,104.58246 52.948524,129.25931 31.324356,135.89577 10.824717,142.18711 -9.2624218,105.47439 4.5678474,81.502538 22.194617,50.950246 63.516652,-0.014275423 146.95618,2.9995805E-06 z" >
  <Path.Fill>
   <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#00FFFFFF" Offset="1"/>
    <GradientStop Color="#FFFFFFFF" Offset="0"/>
    </LinearGradientBrush>
  </Path.Fill>
 </Path>
</Grid>


Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit / Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit / Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit / Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit / Bijwerken )

Verbinden met %s

Categorieën

%d bloggers op de volgende wijze: