Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
ラベル design の投稿を表示しています。 すべての投稿を表示
ラベル design の投稿を表示しています。 すべての投稿を表示

2014年12月12日金曜日

【プログラマー向け】よく使うフォトショ機能

Tech Women Advent Calendar 2014 の12日目として書いてます。

私は自分でアイコンやゴーファーを描いたりもしますが、 Photshop は既存の画像を加工する(Android SDK に入ってる画像の色を変えて利用するとか)のに使うことが多いです。

イラストや写真加工などガチな用途ではないですが、ちょっとした方法を知っておくといろいろと便利です。
そこで、私がアプリ開発や執筆でよく使う機能を紹介します。


1. 切り抜きツール



切り抜くサイズ(幅・高さ)を指定すると、エリア指定がそのアスペクト比になります。
切り抜いたサイズはそのサイズに自動でリサイズされます。

切り抜くサイズは幅・高さのどちらかだけ指定することもできます。
もちろん指定しない(=フォームを空にしておく)こともできます。
これらの場合はエリア指定のアクペクト比は固定されません。






2. マジック消しゴムツール



連続している同じ色のエリアを消してくれます。
背景色がついている画像で背景を透明にしたいときに便利です。



背景の円にあててみると...






3. スポイトツール



クリックしたピクセルの色がわかります。




4. ものさしツール



ドラッグした長さがわかります。
長さは上部のバーに表示されます。







5. レイヤースタイル

レイヤーに効果をつけます。
レイヤーのサムネイルをダブルクリックするとレイヤースタイルダイアログが開きます。



よく使うのが「ドロップシャドウ」と「カラーオーバーレイ」。

ピクトグラムの色を変えたいときに「カラーオーバーレイ」が便利です。
Android SDK に入ってる画像の色をかえるときとか。

「カラーオーバーレイ」


「ドロップシャドウ」



6. モザイク

原稿に載せるアプリのスクリーンショットでメールアドレスを消すのとかによく使ってます。
モザイクにしたい部分を選択ツールで選択してから
フィルター → ピクセレート → モザイク... で適用します。







まとめ

PhotoShop といえば、色調補正とかマスクとか写真加工に使うものというイメージがあるかもしれませんが、 アイコンの修正や加工にも便利なので、プログラマーで使ってみるといいと思います!


2010年8月28日土曜日

Android Get color of status bar

くごーさんがステータスバーの色を取得したいと言うので
がんばってみました。

 Xperia X10 のステータスバーは濃い青




 ステータスバーのレイアウトを指定している xml がこれです。

 frameworks/base/core/res/res/layout/status_bar.xml

 これを見ると、


<com.android.server.status.StatusBarView xmlns:android="http://schemas.android.com/apk/res/android"
android:background="@drawable/statusbar_background"
android:orientation="vertical"
android:focusable="true"
android:descendantFocusability="afterDescendants"
>
<LinearLayout android:id="@+id/icons"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">

<com.android.server.status.IconMerger android:id="@+id/notificationIcons"
android:layout_width="0dip"
...
/>
</LinearLayout>
</com.android.server.status.StatusBarView>


 com.android.server.status.StatusBarView というカスタムビューを
 使っています。
 ここで、背景画像を設定しています。
  android:background="@drawable/statusbar_background" 

 ちなみにこの画像は Android Open Source Project のここ
 で見られます。

 こんなやつ


 com.android.server.status.StatusBarView を生成しているのが、
 com.android.server.status.StatusBarService です。

 こいつ
 frameworks/base/services/java/com/android/server/status/StatusBarService.java

 StatusBarService.java はこことかでみられます。
 StatusBarView.java はこのへんで。


 この StatusBarService は変数として、StatusBarView
 (mStatusBarView)を保持しています。


public class StatusBarService extends IStatusBar.Stub
{
...

final Context mContext;
final Display mDisplay;
StatusBarView mStatusBarView;

...

/**
* Construct the service, add the status bar view to the window manager
*/
public StatusBarService(Context context) {
mContext = context;
mDisplay = ((WindowManager)context.getSystemService(
Context.WINDOW_SERVICE)).getDefaultDisplay();
makeStatusBarView(context);
mUninstallReceiver = new UninstallReceiver();
}

....

// ================================================================================
// Constructing the view
// ================================================================================
private void makeStatusBarView(Context context) {
Resources res = context.getResources();
mRightIconSlots = res.getStringArray(com.android.internal.R.array.status_bar_icon_order);
mRightIcons = new StatusBarIcon[mRightIconSlots.length];

ExpandedView expanded = (ExpandedView)View.inflate(context,
com.android.internal.R.layout.status_bar_expanded, null);
expanded.mService = this;
StatusBarView sb = (StatusBarView)View.inflate(context,
com.android.internal.R.layout.status_bar, null);
sb.mService = this;

// figure out which pixel-format to use for the status bar.
mPixelFormat = PixelFormat.TRANSLUCENT;
Drawable bg = sb.getBackground();
if (bg != null) {
mPixelFormat = bg.getOpacity();
}

mStatusBarView = sb;

...



 つまり、この mStatusBarView を取得して getBackground すれば
 背景画像がとれちゃうわけです。

 今回もリフレクションしますw

  *注! この方法は Reflection で内部クラスを使っているので、SDKのアップデートなどで使えなくなる可能性があります。

 ステータスバーの背景画像を取得する

private Drawable getStatusBarBackground() {

try {
ClassLoader cl = getClassLoader();
Class clazz;
clazz = cl.loadClass("com.android.server.status.StatusBarService");
Constructor constructor = clazz.getConstructor(Context.class);
Object obj = constructor.newInstance(this);
Class c = obj.getClass();
Field field;
//field = c.getDeclaredField("com.android.server.status.StatusBarService.mStatusBarView");
field = c.getDeclaredField("mStatusBarView");

if(!field.isAccessible()) {
field.setAccessible(true);
}
ViewGroup vg = (ViewGroup) field.get(obj);
Drawable d = vg.getBackground();
return d;

} catch (ClassNotFoundException e) {
e.printStackTrace();
return null;
} catch (SecurityException e) {
e.printStackTrace();
return null;
} catch (NoSuchMethodException e) {
e.printStackTrace();
return null;
} catch (IllegalArgumentException e) {
e.printStackTrace();
return null;
} catch (InstantiationException e) {
e.printStackTrace();
return null;
} catch (IllegalAccessException e) {
e.printStackTrace();
return null;
} catch (InvocationTargetException e) {
e.printStackTrace();
return null;
} catch (NoSuchFieldException e) {
e.printStackTrace();
return null;
}
}


 注: AndroidManifest.xml に
<uses-permission android:name="android.permission.EXPAND_STATUS_BAR" />
 を入れないと、Homeキーを押したときに落ちます


 おまけ:

  取得した Drawable は BitmapDrawable ではなく、
  NinePatchDrawable です。
  なので、
   "Bitmap, Drawableに変換 - hyoromoの日記"
  の方法では、Bitmap に変換できませんでした。

  そこで一回ImageViewに突っ込んでから、DrawingCache で Bitmap を
  取得しました。


@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

Drawable d = getStatusBarBackground();

if(d != null) {
ImageView iv = ((ImageView)findViewById(R.id.imageview));
iv.setImageDrawable(d);
}
}

@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
ImageView iv = (ImageView)findViewById(R.id.imageview);

iv.setDrawingCacheEnabled(true);
iv.buildDrawingCache();
Bitmap b = iv.getDrawingCache();
if(b != null) {
int x = b.getWidth() / 2;
int y = b.getHeight() / 2;
int c = b.getPixel(x, y);
((TextView)findViewById(R.id.textview)).setText("
"alpha: " + Color.alpha(c) +
" red: " + Color.red(c) +
" green: " + Color.green(c) +
" blue: " + Color.blue(c));
}
else {
((TextView)findViewById(R.id.textview)).setText("no drawing cache");
}
}


  かっとなって、アプリを公開しちゃいました。

  GetStatusBarColor AndroidOnly → http://goo.gl/WT24

 標準だと灰色なんだけど



 HTC Hero は黒でした。

2010年8月23日月曜日

Android デザイン関係の役立ちリンク

こないだひろみさんが Ust で紹介してくれたサイトとか、もろもろ。
忘備録です。

・"Icon Design Guidelines, Android 2.0 | Android Developers" ( http://bit.ly/bsfgXg )

・"インクスケープの使い方・基礎講座 (Inkscape basic lecture)" ( http://bit.ly/cmYqzD )

・"Inkscapeの使い方|『ブログが作りたい!』+FC2ブログの作り方+" ( http://bit.ly/aU8qm0 )

・"AndroidにおけるLauncherアイコン、背景画像の作り方 : アシアルブログ" ( http://bit.ly/9FL7UB )

・"Color Theory @ ColorJack" ( http://bit.ly/9JPP1K )

・"Google Docs Templates for Web Designers and Developers :Speckyboy Design Magazine" ( http://bit.ly/deyCLo )

2010年8月21日土曜日

デザイン部第2回 KsLauncher をいじり倒す

8月20日(金)の19時~大森の nifty さんの部屋をお借りして
デザイン部第2回を開催しました。

参加者はデザイン部メンバー + nifty さんの社員さんで
全部で20人くらい。

nifty さんは技術者向け勉強会の会場提供や動画配信協力
を行っていて、詳しくはこちらを見てください。
もしくは、@nifty_engineer さんにつぶやいてね。

KsLauncher という Android アプリについて、UI/UX 機能
などなどディスカッションしました。

ディスカッションの詳細はデザイン部のページをみてください。
#まだ書いてないです。もうちょっとまってね。

このディスカッションに参加して、私の印象に残っていることが、
「タッチパネル用の画面は、カーソル操作の画面とは違う」
ということ。

当たり前なんだけど。

KsLauncher のデザインがドラクエっぽかったので、ちょっと
考えたんだけど、例えばドラクエだと十字キーでカーソル(▼)
が移動するので、そこが押せる=何かアクションがある、という
ことがユーザーに伝わる。

戦闘シーンで、HPやMPにカーソルが行かないから、
ここは押せないってすぐわかる。
これは、いままでの携帯電話(=十字キーとテンキーで操作する)の
操作でも同じ。

でも、これがタッチパネルだったら?

カーソルなんて出ない

HPやMPも押せるって思っちゃうんじゃないだろうか?


タッチパネルの操作って、どっちかというとブラウザ + マウスに近いけど
すごく大きな違いがある。「ポインタ」。
押せるところと押せないところでポインタの形状が変わる。
これによって、ユーザーは押せる押せないが、すぐに分かる。


つまり、タッチパネルの画面において、いかにして

「どこが押せる(=アクションがある)かを、ユーザーが直感的にわかるようにする」

かがキモなのかなぁと思いました。


前に書いたエントリ Android UI Design Tips
* good interface design の原理 の「適切なフィードバックをする」とか
「予測可能にする」とかが当てはまるのかな。

例えば

 ・色を変える(コントラスト、白黒、グレーアウトなど)
 ・▼マークを付ける(web design だとよくあるそうです)
 ・グラデーション(キラッとした感じとか)
 ・立体感

とかかなぁ。



他には、「ロングタップはどこに使えばいい?」
昨日の結論 + 私の意見としては
 ・必須な操作、よく使う操作、にはロングタップは使わない
 ・あると便利(チップス的)な操作に使う


あとは、「どんなヒントや使い方ならユーザーにわかりやすいか?」
使い方って読んでもらえないよね。
マーケットの更新情報もだけど。

Google I/O 2010 の Android UI design patterns では
更新情報は Dashboard に書けっていってたけどね。

やっぱり
 ・画像を使った操作説明
かなぁと。

これについては、既存の iPhone アプリや Android アプリで
使われているいい方法を見つけて紹介できたらいいかも。



こんな感じでした。
第3回もよろしくです。

# KsLauncher はランチャーアプリじゃなくてタスク管理アプリじゃね?
# みたいな意見が多くておもしろかった。確かに高機能だしね。

2010年8月20日金曜日

Gimp 画像を着色する

Menu の背景を変えるというエントリ
http://y-anz-m.blogspot.com/2010/08/androidmenu.html
で Menuパネルのアイコンも色付きのに変更しました。

もともとのアイコンは Android のシステムのアイコンで
灰色です。

この辺りに一覧が
Android Drawables Comparison Chart

この灰色を別の色に変えたくないですか?
単にこのまま色だけ青とか赤とか緑とかにする方法です。

#私のノパソは Ubuntu なので、フォトショではなく、もっぱら Gimp です。

1. Gimp を起動する

2. 色を変えたいアイコンの画像(ic_menu_hoge.png とか)を開く



3. 色 -> 着色 を選択する

4. 色相、彩度、輝度を調整する




5. 保存する

おしまい。簡単。

ic_menu_star.png を青にしてみました。

2010年8月17日火曜日

アイコン集

この辺で集めてたアイコンサイトをまとめることにしました。
#ネタが追い付かないんです ><

フリーでフレッシュなアイコンセット30
http://phpspot.org/blog/archives/2010/08/post_491.html


シンプルデザインで汎用的に使えそうなソーシャルアイコンセット500
http://phpspot.org/blog/archives/2010/08/500_1.html


次にWEBサイトを作るときに使いたくなるような130個のアイコンセット
http://phpspot.org/blog/archives/2010/05/web_55.html


色々な場面で使えそう!という白黒アイコンセット120
http://phpspot.org/blog/archives/2010/05/post_475.html


ドット絵感がいい感じのWEBアプリにも使えそうなアイコンセット「Boolean」
http://phpspot.org/blog/archives/2010/06/webboolean.html


サイトで使える500近いフリーのPNGアイコンセット「spirit20」
http://phpspot.org/blog/archives/2010/06/500pngspirit20.html


いい感じにデザインされたフリーのアイコン30個セット「ComFi Telecom Icons」
http://phpspot.org/blog/archives/2010/07/comfi_telecom_i.html


80種類の綺麗なフリーアイコンセット「Free Mobile Berries」
http://phpspot.org/blog/archives/2010/07/free_mobile_ber.html


WEBサイトに使えそうな無料で使える75種類の32x32ピクセルアイコンセット
http://phpspot.org/blog/archives/2010/07/web7532x32.html


シンプルで色々な用途に使えそうな商用OKのアイコンセット「Reflection」
http://phpspot.org/blog/archives/2010/07/okreflection.html


32x32のMacやiPhoneの綺麗なアイコンセット「32px Mantra」
http://phpspot.org/blog/archives/2010/08/32x32maciphone3.html


他のサイトのもあったけど、、、見つけたら追記します!

2010年8月9日月曜日

Android UI Design Tips

Android UI Design Tips
という資料があったので、日本語でまとめてみました。





■ UIを意識すべきなのはどうして?
  良いUI 
   → ユーザーが洗練された質に気が付く
     → 評価が良くなる
      → アプリのランキングが良くなる
        → さらにたくさんのインストール&購入につながる

■ Agenda

  1. やるべきことと、やっちゃいけないこと

  2. デザイン哲学と考慮すること

  3. 絶対に使うべき UI framework の機能・特徴

  4. 新しい UI デザインパターン

  5. アイコンとガイドライン



■ やるべきことと、やっちゃいけないこと

 * やっちゃいけないこと

  ・単に他のプラットフォームのUIを移植しない!
    ・ユーザーがプラットフォームとアプリが合っていると感じるべき
    ・アプリのブランドとプラットフォームとのバランス

  ・modal progress と確認用ダイアログを使い過ぎない!

  ・柔軟性を持つ!(absolute-positioned layout はダメ)

  ・px単位を使わない!(dp(dip)やspを使う)

  ・小さい文字はダメ!


 * やるべきこと

  ・すべてのリソースに対して、high density screen 用バージョンを用意する

  ・ボタンやリストアイテムなど、明らかにタップするものは大きくする

  ・Android のアイコンガイドラインにしたがう

  ・適切なマージン/パディングを使う

  ・D-pad とトラックボールをサポートする

  ・activity stack を適切に運用する

  ・orientation changes(画面回転)を適切に処理する

  ・theme/style, dimension, color resources を使用して
   冗長性を減らす

  ・visual and interaction designer(s) と一緒に仕事する!!!



■ デザイン哲学と考慮すること

 * Android デザイン哲学

 ・ Clear vs. "simple"
   明確 vs シンプル

 ・ Conetnt vs chrome
   内容 vs 外観のカスタマイズ

 ・ Consistent yet engaging
   一貫性があり魅力的
    - エレガントなバリエーション

 ・ Enhanced by the cloud
   クラウドで機能強化
    - ユーザー環境をデスクトップとモバイルで維持する


 * good interface design の原理

  1. ユーザーにフォーカスする

  2. 正しいものを可視化する

  3. 適切なフィードバックを示す

  4. 予測可能にする

  5. fault-tolerant にする


 * ユーザーにフォーカスする

  ・自分のアプリのユーザーを知る
    - 年齢・スキルレベル・文化・身体障害、などなど
    - あなたのアプリで彼らが何をしたいのか?
    - 彼らはどんな種類のデバイスを使うのか?
    - どこで/いつ/どのように 彼らがそのデバイスをつかうのか?
 
  ・'user-first' mentality (ユーザーを第1に考えて)でデザインする

  ・実際のユーザーに早く/しばしばテストしてもらう


 * 正しいもの可視化する

  ・もっとも一般的な(頻繁に使われる)操作が、すぐ見えてすぐ操作できるべき
    = 左上が一番目がいきやすい

  ・付属的な機能は MENU ボタンに割り当てることができる


 * 適切なフィードバックを示す

  ・ すべてのインタラクティブなUI要素は、少なくとも4個の状態
   (default, desabled focused, pressed など)を
   を使って持つようにする

  ・ 1つのアクションの効果は、明確に見える(=わかる)ようにする

  ・ 控えめだけど十分なプログレスインジケータを表示する


 * 予測可能にする

  ・ ユーザーが期待することをする
    - activity stack の適切な運用
    - ユーザーが見ることを期待する情報とアクションを示す
    (テストと観測が必要)

  ・ 適切なアフォーダンスを使う
    - もしそれがクリック可能なら、クリック可能だとわかるようにする!!

  ** もし複雑な操作が必要ならば、デザインを考えなおすべき! **


 * fault-tolerant にする

  ・意味があるものだけ、操作可能にする
    - UI要素を適切に Enable/Disable する

  ・不可逆的なアクションの数を制限する

  ・確認ダイアログは '使わない'('undo') ようにする
    - 実際は、できるだけ少ない modal dialog を使う
     だって目障りだもん

  "If an error is possible, someone will make it. "
   - Donald Norman, author, The Design of Everyday Things




 * デザインで考慮すること

  ・物理的なスクリーンサイズ
  ・解像度
  ・縦画面 & 横画面
  ・主要なUIインタラクションメソッド
    - タッチスクリーン
    - Dパッド/トラックボール
  ・ソフト/ハードキーボード

  ・デバイスによって、方法が異なる可能性があるということに対する
   意識はすごく重要

  ・デバイスのUIバリエーションについてCDDを読んで学ぶ
    - http://source.android/com/compatibility

  ・スクリーンサイズと解像度に対応する
    - http://developer.android.com/resources/dashboard/screens.html



■ 絶対に使うべき UI framework の機能・特徴

 ・<RelativeLayout>

 ・1つの .apk にすべてのリソースを含む
   - drawable
   - drawable-hdpi
   - drawable-mdpi
   - layout
   - layout-port
   - layout-land
   - layout-large-land
   - layout-large-port

  ・システムが runtime時にどのリソースを使うか選択する

 ・9-patch drawables (foo.9.png)
  ・CSS3 border-image に似てる
  ・border pixels が拡張可能な領域を示す
  ・ -mdpi と -hdpi バージョンを用意する!!

 ・Selector (state list) drawables
  ・状態(state) (desabled, pressed, focused, default...)
   によってボタンの色や画像をかえる

 ・Layer drawables (XML + PNGs)
   foo_border.9.png + foo_mask.9.png
       + Drawable.setColorFilter(0xA4C639, ...);
     → Rendered output (resizable w/9-patch)


■ 新しい UI デザインパターン

もともとは、Google I/O 2010 の Android UI design patterns で話された内容
http://code.google.com/events/io/2010/sessions/android-ui-design-patterns.html

 ・Dashboard

 ・Action Bar

 ・Quick Actions

 Google I/O 2010 では、これに加えて

 ・Search Bar

 ・Companion Widget

 が紹介されている

 詳しくはこちら http://dl.google.com/googleio/2010/android-android-ui-design-patterns.pdf


 * Dashboard



  "このアプリで何ができるのか?"
  "新しくなったことはなにか?"

  を表示

  - Recommendations
   ・ 3 - 6 個の重要なアプリセクションにフォーカス
   ・ what's new にハイライトする
   ・ Be flavorful (魅力的に!)ー ここが第一印象


 * Action Bar



  "よく使うアクションをすばやく行う"
   ・検索、リロードなど

  - Recommendations
   ・アプリのキーやアプリ全体のアクションを画面上にみせる
   ・場所の感覚を伝えるのに役立つ
   ・アプリ内で一貫して使う
   ・'home'メカニズムを提供する - logo や 専用ボタン
   ・状況に依存したアクションは使わない!!


 * Quick Actions



  "このオブジェクトで何ができるのか?"


■ アイコンとガイドライン

 http://developer.android.com/quide/practices/ui_guidelines/icon_design.html

 新しいアイコンスタイル
  ・Tactile(触感)

  ・Rendered

  ・Forward Facing(正面向き)

  ・Top-lit(トップから照明)

  ・Synecdoche(提喩法、代喩:一部で全体を、
   または全体で一部を比喩で表現する方法)

  ・Diverse shapes, materials(さまざまな形状、質感)

2010年8月2日月曜日

Home画面を色分け

Android Bazaar and Conference のセッションで言った
自分の常用端末の色分けしているホーム画面を紹介します~



ホームアプリは「ADW.Launcher」というアプリを使ってます。
http://jp.androlib.com/android.application.org-adw-launcher-FEjB.aspx

壁紙は「色分け」というライブ壁紙(Live Wallpaper) です。
http://jp.androlib.com/android.application.ocean-android-colorseparate-jwnDA.aspx

アイコンに合わせた色にしています。

・右端(blue)



この画面が一番お気に入り


・右から二番目(green)



電源管理の緑と合わせてみました。


・中央



よく使うアプリ


・左から二番目(red)



Gmail のアイコンが赤なので、赤系を集めてみました


・左端(yellow)



マップに合わせて黄色系