動画素材が手元になくても背景に動画敷くウェブサイトを作る工程 - MEMOGRAPHIX
このまえ、こういうサイト作った。 Azusa Colors Keynote Theme by sanographixこのサイトでは背景に動画を敷いている。背景に動画敷くサイト、最近よく見る。自分でいくつか作っているうちに徐々に作り方が分かってきたので書きます。 動画を用意するそもそも動画素材を用意するのがわりと大変で、日頃から素材を撮り貯めている人はあまりいないと思う。ぼくも今まで自分で撮った動画は、なんか公園で鳩が動いてる動画とか、使いどころのないやつばかりだった。 動画素材が手元にない場合、クリエイティブ・コモンズ・ライセンスで動画配布しているサイトがあるので、活用するとよい。 Mazwaiかっこいい動画がいろいろある。Life Of Vids - Free Videos for Designers, Web Creatives & anyoneこっちはCC0なのでライセンス表記不要。
ペライチのWebページをすばやく作り始められるやつ「Rin 3.0」作った - MEMOGRAPHIX
Rin 3.0 というのを作った。 Rin - A lean, gulp-based HTML and SASS boilerplate by sanographix僕はいわゆるペライチのWebサイトを作ることが多いんだけど、そういう制作時に使っているフレームワークというかBoilerplate的なやつです。 フレームワークといっても、BootstrapのようにCSSをモリモリ書いて汎用コンポーネントを用意しまくる、というふうにはしていない。結局各webサイトでデザインの要件が大きく異なる場合が多いので、CSS部分の記述をできるだけ少なくして、各サイト向けに柔軟にスタイルを書けるようにする方針をとっている。一方でビルドツールに求められることは割と毎回一緒なことが多いので、gulpですばやく環境構築して、スタイルは各サイトでよしなに、みたいな雰囲気。 Rinは、だいたい下記のようなことがすば
WebデザインのスクラップはIcebergsが良い - MEMOGRAPHIX
Webサイトをスクラップするアプリケーション、Emberとか、Inboardとか、いろいろある。ぼくはIcebergs使ってる。 https://icebergs.com/site Icebergs、Pinterest感のあるEvernoteみたいなやつで、いろんな画像とかコンテンツをまとめて保存できるみたいなやつ。Pinterestと違うのは、スクリーンショットが簡単に撮れるという点で、Chrome拡張をインストールするとボタン一発でキャプチャ撮れる。サイト上の画像をドラッグ＆ドロップでIcebergsに送ることもできる。 webアプリケーションなのでローカルの容量食うこともない。無料プランでは500MB使えるけど、スクリーンショット集めるくらいだったらこれくらいあれば充分だと思う。
自分のwebサイト作る工程 - MEMOGRAPHIX
2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ
PhotoshopでGIFアニメ軽くする - MEMOGRAPHIX
gifアニメ、ちょっと軽くしたいときがあると思う。Photoshopで「web用に保存」でgifアニメを保存するとき、いろいろオプション出るけど、今までなんとなく設定してた。そこで、どこをどうすればファイルサイズ減らせるのか実験した。 前提前提として、 解像度が小さいほうが軽いコマ数が少ない方が軽いこの2点はクリアしているとして、さらにファイルサイズ減らす方法について調べた。 元の画像元の画像。例によって tumblr で見つけた。1050kbある。 減色する ファイルサイズ減らすのには一番効果的な方法。写真とかだと減色すると変だけど、セル塗りっぽい画像だと減色してもさほど変にならない。大抵は64〜128色くらいが良いと思うけど、このgifアニメはもともと色が少ないシーンなので32色まで落としてもさほどおかしくなかった。 1050kb -> 740kb ディザを減らす 多少効果的な方法。デ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
