skillup

技術ブログ

UI デザイン

UIまで手が回らないプログラマのための画像加工サービス&ツール紹介など

投稿日:

本業はプログラマ―なんですが、ガチンコ塾のブログの画像を作る程度の加工などをちょこちょこやってます。

プログラマーといえどUIを全く気にしないのは問題ですし、中小企業だと広く浅くできる人間が求められるのでデザインも少しだけ勉強しています。

フォトショとかイラレをがっつり使っている方はこのページを見る必要はないです(笑)

あくまで手軽で簡単に扱えるツールの紹介をします。すべてフリーです。

Bootstrap

http://getbootstrap.com/

超有名ですね。

お手軽にきれいなページが作れるCSSフレームワークです。

私もこれでランディングページを作成したところ、お手軽かつ簡単にそこそこのページを作ることができました。有名どころなんでいろんな解説ページがあるのがうれしいです。

GIMP

http://www.gimp.org/

フォトショの代替といわれていますが、個人的には

  • フォント関連の機能が充実していない(表示が見にくい、動的に変更の様子を一覧できない)
  • 各種エフェクトがいちいち実行しないとわからない
  • 文字のレイヤーがつかみにくい

というのが難点です。

fotor

http://www.fotor.com/jp/

簡単なコラージュの画像などを簡単に作れるウェブサービス。

とはいえ、こったものは有料でないと難しいようです。

pixlr.com

https://pixlr.com/editor/

WEBで使えるフォトショの簡易版みたいなものですかね。

昔、フォトショを使っていましたが、簡易的な機能だったら大体備わっているなーという印象。

個人的には「レイヤースタイル」で文字の縁取りなどが簡単にできるのがおすすめ。

GIMPと併用してますが、こっちのほうが使えるなーという印象です・・・

上達のコツ

  • ネットサーフィンで自分が作りたいもののイメージを探すこと
  • その画像に合わせてどうやったら近づけられるかを考えること(もちろん完全に同じものは意味がないです。)
  • 最初はできるだけ簡単なものから試すこと(バナーとかブログの1枚の画像など)

ダメな学習法

  • 本とかをみて頭から全部のテクニックを身につけようとすること

ここらへんはプログラムの勉強と少し似ているかも・・・

参考にしたリンク

http://qiita.com/okappy/items/119e31cae9aa9bd9da6d?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&utm_campaign=6dfcb230a9-Qiita_newsletter_176_10_06_2015&utm_medium=email&utm_term=0_e44feaa081-6dfcb230a9-32934897

-UI, デザイン
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

アプリケーションの画面構成に関して

アプリケーションの画面の設計スタイルに関してよく使われるものを。 Contents1 2パネルのセレクタ2 カンバスとパレット3 1ウィンドウでのドリルダウン4 代替表示5 ウィザード6 オンデマンド …

no image

WordPressのカリキュラムを考える

WordPressを触っていますが、ちょっと体系的に覚える必要がありそう。 結構長い間、触ってきましたが、体系立てて覚えていないのでいざこの処理は?ときかれると案外迷います。 例えば0から初心者に教え …

no image

sassについて

以前ちょろっと勉強していたことはあるんですが、仕事で使うことになりそうなんで復習。 Contents1 sassとは2 インストール&コンパイル3 一般的な記法など4 参考リンク sassとは 一言で …

no image

cakePHPのSSL設定+jQueryのError Loading Page

cakeで作ったアプリの認証画面でhttps環境だとError Loading Pageというエラーメッセージがでてしまい、ログインできないという事象が発生。 最初はSSLが原因かとおもっていたんです …

no image

transition関連

cssのanimationに関して。 例えばhoverしたときに色が変わる仕様はよくあることだと思いますが、transitionを入れることで時間差をつけることができます。 [crayon-5ae22 …