デザインビギナーズ第19回 もくもく

[willnet]

今日の成果を貼り付けましょう！

貼り付けの指針

みんなから意見をもらいやすいように、わかりやすく成果をまとめましょう！

• なるべく画像を使う
  • 写真をとって貼り付けたり、スクリーンショットをとってみたり
• 作業前、作業後の画像を貼る
• 力を入れた点や、見て欲しい点をコメントに書く

[willnet]

• Adobe が提供している、イラレのチュートリアルを読んでいました
  • 寿司ゆきの作者の人が書いてる
  • 入門記事一覧 | Web制作の入門サイト | Adobe Pinch In
• 全6回の記事中3回目まですすんだ
• 設定終わったらいきなりワイヤフレーム作り始めるのよい
• 入門書だと紹介されてなさそうな情報あって良い感じでした

[machida]

middleman blog のテーマ作りました

レスポンシブ

ノイズを付けた

フォントと色をあとで変える予定です

[iidzuka]

今日は自分の作っているページに適用するjQueryプラグイン等を探したりしていたらだいたい終わってしまいました。
現状はこんなかんじです。

やりたかったこと
　・今ラジオボックスになっているものなどをかっこ良くしたい
　　・付箋のようなメニューにしてそれを選択するような感じにしたい
　・ノートのような見た目にしたい

ということで色々と調べ、baseline.jsというのを見つけてしたの2つのページを見ながら
これを適用してみよう、と思ったら出来ずに時間切れ
https://github.com/daneden/Baseline.js
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-baseline-js.html

[ir3]

【概要】
イメージファイルへの加工について知見をまとめる

【問題意識】
画面コピーや撮影した.jpgファイルに対して、文字や図形などを載せて加工し、別のイメージファイルを作成する際に、ツールの選択に悩んだ

【前提条件】
0. 基本的にはMac環境での作業としたい。

1. 高額な ad***社のツールは利用可能ではない。
2. OmniGraffle は利用できるので活用したい。
3. Sketchも利用できる。
4. Gimpも利用できる。

【事例１】
写真に書き込みをつけたい

→
1.OmniGraffleにて新規にシート(キャンバス)を開く
2. メニューの「ファイル」→「イメージを配置..」で該当.jpgを背景に読み込む
3. 図形ツールで図形を選択したり、オプションを触ったりして追加する
4.「ファイル」→「書き出し」で.pngに書き出す

【事例２】
画面コピーなどを.jpgで採取し、一部をモザイク化などしたい

→

1. Gimpで該当.jpgを読む
2. 選択ツールで編集したい箇所を範囲指定する
3. 「filters」→「noise」→「...」で画像にフィルターをかける
   4.「file」→「Export as」で名前をつけて保存

【事例３】
画面コピーなどを.jpgで採取し、直線で囲んだりしたい
→

1. 何とOmiGraffleが使えない！
2. mac標準プレビューの編集を使う→ skitchを使えば良いとの助言を頂いた♪

→ skitchの成果

[tatsuosakurai]

ヘッダの微調整してました。

高さの異なる複数の要素があったとき、縦を中央にしたい。
各要素で padding の調整はめんどくさそうだったのでしたくなかった。
vertical-align: middle とかやってみたんだけど、ぜんぜんダメであっという間に時間なくなった。。。；ｘ；

町田さんに聞いたら、position: relative で位置調整するのがラクでいいですよって、一瞬で解決した〜。
町田さんは top( n px)ていう mixin 作ってるらしいです。

.hoge
  position: relative
  top: 6px

before

after

まだバランスおかしい気がするので要調整

[oakbow]

公開できませんが、会社のツールやってました。

・分かりにくそうなボタンを非表示
・Webフォントを使う

CoffeScriptのテンプレートにecoが使われているんですが、コメントアウトはHTMLと同じでした。