SaCSS vol.50

SaCSS vol.502013年11月30日(土)10:00から札幌市民ホールで開催されたSaCSS vol.50に参加してきました。北海道でJavascriptのプログラムを中心にフリーランスで活躍されているh2hamさん主催のセミナーです。

今回はいつものセミナー形式と違い、CSS3のアニメーションをグループに分けて制作、発表する内容です。

Gitの導入

制作にあたり、各PCにGitを導入してファイルの共有を行いました。ただ、PCの環境がWindows XP、7にMacと違ったため、導入に時間がかかり、結局設定してもらい環境を揃えました。Gitはすごく便利なツールですが、各人が導入設定できる前提でないと使いづらい点が問題と感じました。

CSS3アニメーション

CSSアニメーションはローディングに出てくるアニメーションということで、文字のアニメーションと、円や線、丸を使ったアニメーションを作りました。その後、各人で自由なアニメーションを作り、発表しました。

ブラウザにより挙動等の問題はあるようですが、CSSで多彩なアニメーションが簡単に作ることができることが分かり、勉強になりました。今後このあたりを使う機会が増えそうな印象を受けました。

SaCSS vol.49

SaCSS vol.492013年10月26日(土)18:00から札幌市民ホールで開催されたSaCSS vol.49に出席してきました。北海道でJavascriptのプログラムを中心にフリーランスで活躍されているh2hamさん主催のセミナーです。そのまとめとなります。

@MarlboroLand :綺麗なリボンを作る方法(Photoshop編)

SaCSS vol.47で作ったリボンをPhotshopで作ってみた時の違いと注意点について説明しました。
  • テクスチャを使用するときにはイメージに合うかどうか確認する
  • レイヤーには不透明度と塗りがあり効果を含むかどうかの違いがある
  • パスのポイント位置によりボケことがあるのでスナップするように設定変更する
  • マスクは3種類あり、作る物にあったマスクを使う
  • レイヤー効果はレイヤーのグループフォルダにも適用できる

@MarlboroLand :各ソフトによるスライスの方法

AdobeのWebデザイン系用途で使用するソフトのスライス支援機能について説明しました。
  • Slicy:Macのみシェアウェアで今のところ一番評価が高い
  • Cut&Slice me:両方OS対応CS6のみの拡張機能。PNGのみ書き出しに対応
  • PNG EXPRESS:両方OS対応CS5以上のシェアウェア。JPGとPNG書き出しに対応
  • Photoshop CC:最近実装された支援機能。JPEG、PNG、GIF書き出しなど機能が充実している
  • Fireworks Generate Web Assets:両方OS対応CS6以上対応の拡張機能。JPEG、PNG、GIF書き出しに対応
  • Illustrator aislice:両方OS対応CS6以上対応のプラグイン。PNGのみ書き出しに対応

@ma2ken_zawa :webデザイナーがvirtual boxを使う理由

virtual boxを入れると現環境を汚さず任意OSの環境構築が可能になり、現環境とシームレスに操作できます。また、virtual boxにはIE6~11もあるので各ブラウザの確認作業にも使えます。

@masashi0923 :黒い画面とお友達になろう

コマンドプロンプトやターミナルの操作ができるようになると、小さい修正作業の効率化や特定のログを取り出し、DBのバックアップなども可能など、作業の幅が広がります。

@kuma_hati :「ぷろぐらま」の話

WebデザイナーもPGもお互いに相手のイメージを勝手に抱いてるため、大きなズレが生じます。さらにそれら業種の内容を一般人に伝えるのは非常に難しいです。このことを踏まえ、他業種や職種への対応を考えると仕事がよりスムースに進められそうです。

@sase1ya :Canvasによる画像変形と柔軟体表現

HTML5とJavascript、Canvasを使い画像の変形や柔軟体表現がリアルタイムで出来るようになりました。現在は対応ブラウザが少ないのですが今後こういった表現がより簡単にできるようになりそうです。

@kozyuro :おじいちゃんとUI

高年齢層の人達はインターネットに関する一般常識に疎いため、文字を大きくする、日本語を使うなど、それらを踏まえたUIデザインを考える必要があります。