タグ

ブックマーク / blog.fenrir-inc.com (6)

  • 約5万点の素材からドラッグするだけで、プロ並みのデザインが仕上がる新サービス “Picky-Pics (ピッキーピックス)”、本日リリースです!

    こんにちは、新プロダクト担当の林です。 日、ブラウザ上でプロ並みのチラシや名刺をデザインする新サービス “Picky-Pics (ピッキーピックス)” をリリースしました。 Picky-Pics を使う 約5万点の素材とドラッグ&ドロップ Picky-Pics は、約5万点の写真やイラストの素材をドラッグ&ドロップによる簡単な操作で自由にレイアウトし、プロ並みのデザインを作成できるウェブサービスです。名刺、ハガキ、プレゼンテーション、フライヤー等の多彩な用紙を選択して、手持ちの写真や Picky-Pics ライブラリの素材をキャンバスにドラッグ&ドロップすれば、すでに完成したも同然です。 あとは色やテキストを変更したり、お好みのレイアウトパターンを選ぶだけで、プロ並みのデザインに仕上げられます。つくったデザインは PNG・ PDF・ウェブに出力可能で、自動でサーバーに保存されるので、自宅

  • Jenkins がもっと便利になるおすすめプラグイン 8 つ

    こんにちは、開発担当の松です。 今回は、Jenkins にたくさんあるプラグインの中からおすすめのプラグインをいくつか紹介します。 ジョブ一覧にアイコンを追加できる: Custom Job Icon 今年8月にリリースされた比較的新しいプラグイン。名前の通りプロジェクトごとにアイコンを登録できて、それがプロジェクト一覧に表示されるようにできます。 利用するには、プラグインインストール後にアイコンを登録する必要があります。 「Jenkins の管理」→「システムの設定」ページに「Custom icons」セクションが追加されていますので、そこでファイルを追加しておきます。追加しても「Refresh icon list」をクリックしないと表示が更新されない点に注意。 なお、画像の拡大縮小あまりきれいに行われないので、アイコンのサイズは 24 x 24 にしておくのがよいみたいです。 アイコン

    Jenkins がもっと便利になるおすすめプラグイン 8 つ
  • リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。 (フェンリル | デベロッパーズブログ)

    こんにちは、イメージ担当の長谷川です。 今回は Apple がデザインしている iCloud アイコンのような美しい金属調の質感を Fireworks で表現してみました。 アレンジ次第で水平のエッチングやブラスト加工のようなイメージも簡単に作ることができます。 ぜひ Web や UI デザインの参考にしていただければと思います。 1. ベースのテクスチャを設定する まずグラデーションの設定をします。 長方形ツールで作成するボタンなどのサイズより少し大きいサイズの四角を描き、グラデーションの塗りを円錐にします。 以下のように白とグレーを交互に設定します。右端と左端を同じ色にしないとグラデーションに線が出来てしまいますのでご注意ください。 ここでは濃いグレーを #666666、両端の薄いグレーを #999999 に設定しています。 次にノイズを適用量:10で追加します。これが同心円状のヘアラ

    リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。 (フェンリル | デベロッパーズブログ)
  • 【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。

    こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード(ヒント付き) こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記: ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--

    【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
  • リッチに見せるデザインテクニック。美しいぼかしで魅せる 『MAX 塗り』のすすめ。

    こんにちは、イメージ担当の長谷川です。 今回は 1px にこだわったリッチな Web や UI デザインを更に立体的で奥行きのある雰囲気にする『MAX 塗り』を取り入れたグラフィック作成手法をご紹介します。 ところで『MAX 塗り』ってご存知ですか?ガンプラなどが好きな方はピンと来たと思いますが、プラモデルなどに興味がない人は全く分かりませんね。 『MAX 塗り』とはプラモデルに立体感を出すためにエッジから中央に向かってぼかしていく、昔からある「ぼかし塗り」や「グラデーション塗り」の技法です。 この技法で塗装されたプラモデルは単純に塗装したものより格段に迫力や存在感が上がります。プロモデラーの MAX 渡辺さんが良く使うプラモデルの塗装技術として通称『MAX 塗り』と呼ばれています。 Web や UI にこの『MAX 塗り』を取り入れる方法は簡単です。 作ったボタンや背景などのグラフィック

    リッチに見せるデザインテクニック。美しいぼかしで魅せる 『MAX 塗り』のすすめ。
  • ずっと使えるデザインテクニック。すっきり美しく見せる『余白』と『文字』の使い方。

    こんにちは、デザイナーの長谷川です。 今回は僕が普段気をつけている、ちょっと意識するだけでスッキリしたデザインになるレイアウトのコツをご紹介します。 デザイナーじゃない方も、企画書や簡単な UI のモックアップ、Web や雑誌のレイアウトなどに応用できると思いますので、ぜひ参考にしていただければと思います。 1. 上下左右のマージンを均一に Web デザインや UI デザインの要素全てに対して隣り合う要素との間隔やバナー、ボタンなどの外側と内側の要素の上下左右マージンをできるだけ均一にすることで、デザインがスッキリ見えます。 2. 内側のマージンは外側のマージンより狭く レイアウトなど一番外側とコンテンツの間隔より文章のかたまりや画像同士の間隔を小さくします。基的にコンテンツのまとまりを作るためですので、デザインによっては広く取って区分ける場合もあります。 3. 段落の下は間隔を広く開け

    ずっと使えるデザインテクニック。すっきり美しく見せる『余白』と『文字』の使い方。
  • 1