skillup

技術ブログ

UI デザイン

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

投稿日:2015年11月12日 更新日:

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

プログラマーといえど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枚の画像など)

ダメな学習法

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

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

参考にしたリンク

非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選

-UI, デザイン
-, ,

執筆者:


comment

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

関連記事

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …

no image

CSS floatについて

以前もちょっと書きましたが、CSSのfloatについて。 http://skill-up-engineering.com/?p=1708への追記 親から見るとfloatした子供は存在しない状態 flo …

no image

css中央ぞろえ

よく出る中央ぞろえテクに関して 横センタリング   [CSS]高さが分からない要素を天地・左右・天地左右の中央に配置するテクニックのまとめ 中央センタリング たった4行! CSS3 Flex …

no image

pcサイトのコーディングに関しての注意点。

PCサイトのコーディングをしていて気づいたことなど。 最近スマホばっかりやっててPCサイトのコーディング自体ものすごい久しぶりでした・・・ 幅が縮むということを常に意識する。 縮めた時にページが崩れた …

no image

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。 まず通常のHTML …