Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: Photoshop

[UI Design] iOS 9 UI Kit – Artboards PSD – アートボード形式のiOS 9 UIテンプレート

  • Pocket
  • このエントリーをはてなブックマークに追加

iOS 9のUIテンプレート。よくあるPSDでの配布ですが、このテンプレートはアートボード形式で保存されているので、1つのPSD内に複数の画面のUIがまとめられています。UIデザインする時にPhotoshopのアートボードを使う人には使いやすいと思います。アートボード確かに便利ではあるんだけど、画面数増えてくるとPhotoshopの動きが鈍くなるのがアレなんですよねぇ・・・。

[Freebie] iOS 9 UI Kit – iOS 9のUIテンプレートPSD

  • Pocket
  • このエントリーをはてなブックマークに追加

iOS 9のUIテンプレートがPSDフォーマットで配布されています。この前公開されたばかりですからね、UIテンプレート出てくるの早いですね。ダウンロードする際にはiPhone 5, iPhone 6, iPhone 6 Plusの3機種から選ぶ事ができます。これら現役の3機種はそれぞれ画面解像度が違うので、制作するものに合ったサイズを選んでネ、という事なんでしょう。UIデザインする時に役立ちそうです。

[Freebie] Apple Watch vector mockup PSD – ベクターで作られたApple WatchのモックアップPSD

  • Pocket
  • このエントリーをはてなブックマークに追加

ベクターで作られたApple Watchのモックアップ。PSDフォーマットで配布されています。ベクターなのにAIじゃなくてPSD?と一瞬思いましたが、結局この手のモックアップ使った作業のフィニッシュってPhotoshopで行う事が多いので、この方が合理的なのかとも思いました。WatchOS 2になって劇的に変わるのかと思いきや、それほど今までと変わんないWatchたんですが、それでも俺は毎日付けてます。よく人に「それ何かの役に立つの?」と聞かれて「時間が分かる(`・ω・´)」程度の事しか言えませんが、それでも毎日付けています。

[Typography] 25 Insanely Creative Text Effects You Can Use For Free! – クールなテキストエフェクトの作例まとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

いやー5連休終わっちゃいましたな。けど人によっては9連休だそうで。9日も休んだらなんだか社会復帰できなくなりそうで恐いとか思ってしまうくらいの社畜っぷりではあります。はー家に引きこもって1日中メタルギアしたい。
そんなわけでこの記事で紹介されているテキストエフェクト、なかなか趣味がイイので紹介しておきます。リンク先からPSDをダウンロードできるので、テキスト情報の再編集も簡単に出来そうです。ロゴや見出し作る際のネタ帳としてナイスです。
けど2日仕事したらまた休みじゃーん! ヒャッハー!

[Freebie] Designer Mill – Webや印刷の素材に使えそうなデザインリソースまとめサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

Webや印刷物、UIデザインなんかに使えそうな様々なデザインリソースの配布サイト。PSDやSketch、AI素材なんかを紹介してます。各素材はカテゴリ分けされて掲載されているので、目的に応じた素材探しができそうです。まだわりと新しいブログのようで掲載数はそれほど多くはないんですが、紹介してる素材の趣味がイイので、数が増えたらスゴい便利なアーカイブサイトになりそう。

[Photoshop Plugin] HTML Block – カンバス内にHTMLエリアを作る事のできるフォトショップ用プラグイン

  • Pocket
  • このエントリーをはてなブックマークに追加

これなかなかアツいです。カンバス内にHTMLブロックを設ける事のできるPhotoshopプラグイン。どういう流れでHTMLブロックを作るのかは、サイト内にある動画を見ると「へぇ〜」と納得できます。専用のパネル内にHTMLを直書きする事で、任意のレイヤー内にHTMLが描画されるようです。描画に使われるのはWebkitエンジンだそうで、Web上のイメージの読み込み、外部CSS、Webフォントなども使う事ができるそうです。PhotoshopのレイヤーやレイヤーフォルダなどをHTML化するプラグインは前からあったけど、これはその逆パターン。コーディングしつつのWeb制作において途中でデザイン要素が出てきた場合や、既存HTMLのあるサイトのリニューアルする時なんかに使えそうです。

[Photoshop] 50 free Photoshop actions – フォトショップアクションのまとめ記事

  • Pocket
  • このエントリーをはてなブックマークに追加

Photoshopで使えるアクションをまとめた記事。様々なアクションが紹介されていますが、写真フィルター系が多いです。5ページに分けて、合計50のアクションが掲載されています。アクションってPhotoshopの中じゃわりと古い機能だけど、意外と根強く残ってますよね。印象的な写真加工をしたい時なんかに便利そうなまとめ記事。

[Photoshop Plugin] Ditto: Use variables in Photoshop – 複数のレイヤーを一括で操作できるようになるプラグイン

  • Pocket
  • このエントリーをはてなブックマークに追加

レイヤーに属性付けをする事で、1つのパネルから複数レイヤーを一括で操作する事ができるようになるPhotoshopプラグイン。言葉で説明してもよく分からないかもしれませんが、リンク先にあるアニメーションGifを見ればなんとなくどういうものか分かると思います。これよく見ると、レイヤー名の末尾に「#btnText」といった感じでCSSみたくIDが付いてるんですね。で、パネル内から色やテキストを変更すると、このIDが付いたレイヤーがまとめて変更されるという仕組み。ボタンなどの要素が重複するUIパーツに使うと一括編集できるようになるので、生産性上がりそうですね。