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

cakePHPのSSL設定+jQueryのError Loading Page

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

no image

携帯のUIに関して

いまさらながらスマホのUI表示に苦戦してます。 まあ、現状のWEBサイトを作る場合、BtoCでもBtoBでもスマホ対策は必須ですよね。 私の場合、デザインが本業でないこともあり、ちょっとサボっていまし …

no image

CSSの概要 主に適用ルールについて

昨日までリーダブルコードを読みまして正しいコーディングについて書いてきました。 本日からは正しいCSSについてみていこうと。 Contents1 CSSとは?2 CSSの書き方3 CSSの挙動4 プロ …

no image

compassについて

sassをベースにしたフレームワークがcompassです。 Contents1 compassとは?2 使用方法3 参考リンク compassとは? sassの記法をベースにCSSファイルの作成が可能 …

no image

CSSでのtableについて

tableで気を付けたいポイントなど。 Contents1 ボーダー表示2 テーブルの背景色とボーダーのスタイル3 tableのレイアウト3.1 table-layout auto3.2 table- …