tag:crieit.net,2005:https://crieit.net/tags/Canva/feed Crieitでタグ「Canva」に投稿された最近の記事 2019-06-28T11:48:01+09:00 https://crieit.net/tags/Canva/feed tag:crieit.net,2005:PublicArticle/15172 2019-06-28T11:48:01+09:00 2019-06-28T11:48:01+09:00 https://crieit.net/posts/WPF-5d157fe1294ab <p>今回は、画面のタイトルバーにアイコンを表示したいと思います。<br /> アイコン自体は無料のサービス「Canva」でちゃちゃっと作ってみました。</p> <p><a target="_blank" rel="nofollow noopener" href="https://www.doraxdora.com/blog/2017/05/31/post-1089/" target="_blank" rel="noopener" data-blogcard="1">無料で使えるデザインツール「Canva」でブログタイトル画像を作る</a></p> <h2 id="アイコンを作成する"><a href="#%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B">アイコンを作成する</a></h2> <p><a target="_blank" rel="nofollow noopener" href="https://www.canva.com/" target="_blank" rel="noopener">https://www.canva.com/</a></p> <p><img src="https://www.doraxdora.com/wp-content/uploads/2017/08/WpfIcon000.jpg" alt="Canvaでアイコン作り" /></p> <p>Canva で 猫のシルエットのイラストを適当に追加します。</p> <p><img src="https://www.doraxdora.com/wp-content/uploads/2017/08/WpfIcon001.jpg" alt="ダウンロード" /></p> <p>ダウンロードボタンをクリックしてダウンロードします。</p> <h3 id="透過させる"><a href="#%E9%80%8F%E9%81%8E%E3%81%95%E3%81%9B%E3%82%8B">透過させる</a></h3> <p><img src="https://www.doraxdora.com/wp-content/uploads/2017/08/WpfIcon002.jpg" alt="Gimp" /></p> <p>Gimpというツールを使って作成した画像の背景を透過させます。</p> <p><img src="https://www.doraxdora.com/wp-content/uploads/2017/08/WpfIcon003.jpg" alt="ファジー選択ツール" /></p> <p>先ほど作成した画像をドラッグアンドドロップで表示したら、<br /> ツールから「ファジー選択ツール」を選択します。</p> <p><img src="https://www.doraxdora.com/wp-content/uploads/2017/08/WpfIcon004.jpg" alt="透過処理" /></p> <p>背景色（白い）部分をクリックすると、同じ色の箇所が選択状態となります。</p> <p><img src="https://www.doraxdora.com/wp-content/uploads/2017/08/WpfIcon005.jpg" alt="背景色を削除" /></p> <p>背景色が選択された状態で、「Delete」キーを押下すると選択された部分が透過されます。</p> <p><img src="https://www.doraxdora.com/wp-content/uploads/2017/08/WpfIcon006.jpg" alt="保存" /></p> <p>ファイルメニューから「名前を付けてエクスポート」を選択して画像を保存します。</p> <h2 id="画像をアイコンファイルに変換"><a href="#%E7%94%BB%E5%83%8F%E3%82%92%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AB%E5%A4%89%E6%8F%9B">画像をアイコンファイルに変換</a></h2> <p>こちらもフリーで出来るサービスを利用して「PNG」→「ICO」ファイルに変換します。</p> <p><a target="_blank" rel="nofollow noopener" href="http://app.tree-web.net/icon_converter/" target="_blank" rel="noopener">アイコンコンバーター</a></p> <p><img src="https://www.doraxdora.com/wp-content/uploads/2017/08/WpfIcon008.jpg" alt="アイコンコンバーター" /></p> <p>ページを表示したら、「ファイルを選択」ボタンをクリックして<br /> 先ほど作成した画像ファイルをアップロードします。<br /> <img src="https://www.doraxdora.com/wp-content/uploads/2017/08/WpfIcon009.jpg" alt="ダウンロード" /></p> <p>色々なサイズに変換してくれるので、32 x 32 の大きさをダウンロードします。</p> <h2 id="アイコンをリソースに追加"><a href="#%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%82%92%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%81%AB%E8%BF%BD%E5%8A%A0">アイコンをリソースに追加</a></h2> <p>ソリューションエクスプローラで、<br /> プロジェクトを右クリックし「追加」＞「フォルダ」を選択、「Resource」フォルダを作成します。</p> <p><img src="https://www.doraxdora.com/wp-content/uploads/2017/08/WpfIcon010.jpg" alt="リソースの追加" /></p> <p>作成した「Resource」に作成した「ICO」ファイルをコピー&ペースト等で追加します。</p> <h2 id="画面を修正する"><a href="#%E7%94%BB%E9%9D%A2%E3%82%92%E4%BF%AE%E6%AD%A3%E3%81%99%E3%82%8B">画面を修正する</a></h2> <p>Windowのオプションを追加します。<br /> （リソースのパスは次のようにします。）</p> <pre><code>/プロジェクト名;component/Resource/アイコン名.ico </code></pre> <h3 id="通常版"><a href="#%E9%80%9A%E5%B8%B8%E7%89%88">通常版</a></h3> <pre><code>Icon="/WpfApp1;component/Resource/Cat.ico" </code></pre> <h3 id="サイズ変更版"><a href="#%E3%82%B5%E3%82%A4%E3%82%BA%E5%A4%89%E6%9B%B4%E7%89%88">サイズ変更版</a></h3> <p>こちらは Window のオプションではなく、別途追加してサイズを変更する方法です。<br /> （メトロウィンドウ）</p> <pre><code> <Controls:MetroWindow.IconTemplate> <DataTemplate> <Image Source="/WpfApp1;component/Resource/Cat.ico" Width="22" Height="22" /> </DataTemplate> </Controls:MetroWindow.IconTemplate> </code></pre> <p> </p> <p><img src="https://www.doraxdora.com/wp-content/uploads/2017/08/WpfIcon011.jpg" alt="変更後画面" /></p> <p>アイコンを表示した画面です。<br /> ちょっと小さすぎましたが、アイコン作成時にちゃんとしたサイズを意識すれば問題ありませんね。</p> <p>今回はここまで。</p> <p>ではでは。</p> doraxdora