【保存版】Illustratorでインターフェイスをデザインする時に役立つ時短テクニックのまとめ
Illustratorでウェブやアプリなどのインターフェイスをデザインする時に役立つ14の時短テクニックを紹介します。 Speed Design with Illustrator Illustratorの時短チップスを書いたのはVincent Le Moign氏で、彼の別サイト「WEBALYS」ではたくさんのフリー素材を配布しているので覗いてみてください。 WEBALYS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。無断翻訳・まとめ記事の転載をしているあのブログの注意喚起を海外のブロガーから聞くのでご注意ください。 時短でボタンをつくる 1クリックでテキストをデザイン カラー変更の強い味方「グローバルカラー」 モジュール式のデザイン アイコンフォントを簡単に扱う方法 グリッドの設計 グリッドにスナップさせる アートボードの活用 サイ
デザイン効率大幅アップ！Photoshopとスマホの画面がリアルタイムに同期される神アプリ『Skala Preview』
世の中にはこんなに便利なアプリがあったのかと驚きを隠せない霙(@xxmiz0rexx)です。なぜ今まで知らなかったのか！！なんて非効率な日常を送っていたのか！！悔やんでも悔やみきれないです本当に。。 というわけで、今日は存在を知って以来 毎日使ってしまっている超絶神アプリをご紹介させて頂きます:) スマートフォンサイトやアプリデザインに最適なのでマカーなあなたは是非チェックしてみてください！！ 『Skala Preview』とは Photoshopで開いているキャンバスをスマートフォンでリアルタイムプレビュー出来るアプリです！ 今までスマートフォン向けのデザインをする時は、Dropboxにpngを保存し、同期させ、実機で確認していた私。 同期にいちいち時間がかかり かなりストレスだったので、このアプリを知って大歓喜なのでございます♡ 公式サイト：Skala Preview, a Mac a
SublimeTextに開発環境変えました
またまた空いてしまいました。。。。いろいろとネタ書いていこうと思いますが、なかなかこちらの方まで手が回らないですわ～ さて、ここ最近になってようやく開発環境をSublimeText2に変えました。ドリームウィーバーからAptana3に変えてから1年、まあ、Aptanaには開発する限り特に問題ないのですがカスタマイズの点と起動が遅いのが気になりはじめ、ちまたでフィーバー中の恋するエディタSublimeTextに興味津々でございました。 使ってみて思ったのが初心者向きじゃないねってことです。カスタマイズ方法がチョット変わっている。プログラム書くようにコードを書き換えることでカスタマイズするようになっていていろいろなところで詰まったりしました。単純にブラウザ表示とかうまくできないし、FTPもプラグインで行えるなんて・・・・ しばらくは両方使っていたのですが、SublimeTextに乗り換えた決定
透明ノイズと紙テクスチャ。
ちょっとざらざらした質感とか、手触りを感じるテクスチャって、背景にさりげなく敷くだけで、ほんのり暖かみが出ていいですよね。このブログにも背景にうっすらノイズ画像を敷いてます。真っ白にするよりも何となく柔らかい感じになって好きなんです;)。 そんなざらざらノイズ画像を半透明にした「透明ノイズ」のつくり方についてまとめてみます:)。 透明ノイズ 「透明ノイズ」とは、ノイズ画像を半透明にしたPNG画像のこと。僕が勝手にそう呼んでるだけですけど。 Firefoxで、画像を右クリックして「画像だけを表示」を選んだ時に開くページの背景にも使われてました（※下図は2013年9月現在。今は透明じゃないノイズになってます）。 Firefoxの「画像だけを表示」 body要素のスタイルに、下記のように指定されてました（※下記ソースコードは2013年9月現在）。 body { background: #222
最近流行りのウェブ開発系ツールまとめ（主にデザイン） | keisuke.tsukayoshi
最近、ウェブデザイン周りの優良ツールがたくさん出てきていて、しかもちゃっかりみんな買っちゃうしアドオン系のソフトウェア界隈にも良い流れを感じるこのごろ。今回は、ぼくが買ったツールのうちこれは手放せないなとおもったものをピックアップしてアフィリンク付きでゲス顔で紹介したいと思います。主にMacです。 マークアップ系 Slicy PSDファイルから画像素材が出力できるアプリ。PSDファイルを読み込ませるだけでほとんど自由自在に画像素材を書き出せます。使い方はPhotoshopのレイヤーやフォルダに.pngなどの拡張子をつけておくだけ。 マークアップするときの画像書き出し作業が全然億劫じゃなくなったのが一番嬉しい。一度読み込ませると、あとはPSDが更新されたら自動で書きだす機能なんかもあります。スマホのRetina用に半分の画像も一緒に書き出せたり、MacのRetina用に二倍の画像も一緒に書き
【便利ツール】Emmet LiveStyle(Beta)で、ブラウザ・エディタ間のリアルタイム・スタイル反映を試す。 | DevelopersIO
以前、ブログでEmmetをご紹介いたしましたが、またまたEmmetが良さげなツールを開発中です。 現在はまだベータ版ですが公開されていたので一連の流れを試してみました。 アジェンダ Emmet LiveStyleとは？ 環境設定 動作確認 SCSS(Sass)・LESS等のメタ言語の対応は？ Emmet LiveStyleとは？ ブラウザとエディタ間のスタイルをリアルタイムで確認・編集ができるツールみたいです。現在公式サイトでデモ用の動画を確認できます。 環境設定 Emmet LiveStyle を確認するには、設定が必要なので動作確認ができるまでの設定をご紹介します。 今回の動作検証環境 Windows7 chrome Sublime Text 2 Sublime Text の設定 Sublime Text 側でパッケージのインストール Sublime Textを開き、[Ctrl] +
静かに流行り始めているポリゴン風デザインに挑戦！
2013年5月9日 Webデザイン, インスピレーション, 便利ツール 2013年を代表するデザイントレンドと言えばフラットデザイン。それを横目に、実は静かに流行り始めている「ポリゴン風デザイン」をご存知でしょうか？ローポリと呼ばれているものですね。今回はツールを使って写真からポリゴン風イラストを作ってみましょう！デザインの参考になるWebサイトやグラフィック・アートもまとめているので、オリジナルポリゴンアートに挑戦してみてください！ ↑私が10年以上利用している会計ソフト！ 「triangulator」でポリゴン風イラストを作成 ポリゴンは通常は3D系のソフトで作りますが、PhotoshopやIllustratorでも作ることができます。ただ、それではかなり時間がかかってしまうので、写真をサクッとローポリイラストに変換できる「triangulator」を使用します。こちらの動画をご覧頂け
色調補正の全体像 - Photoshop 10年使えるメモ帳
今回は色調補正の全体像を解説します。この流れを押さえておけば色調補正においてどのような作業を行えばよいかが理解できます。 ここでは上左図を上右図のように色調補正をここなう手順を解説します。 色調補正は修正すればするほど、どのように仕上げてよいか分からなくなることがあります。これは色調補正では目に見えない修正するべき部分が他の色の問題に隠れて見えなくなることがあるためです。 しかし、色調補正ではある一定の手順に従い修正することで、手早くより良い結果を残すことが可能です。 そのためには、色調補正にはどのような種類の補正があるかを理解し、その全体像をつかむことが必要になります。 色調補正の修正手順をまとめると以下のようになります。 １、画像を観察 ↓２、どんな仕上がりにするかを決める ↓３、［明るさやコントラスト］［色合い］の修正方針を決める ↓４、［明るさやコントラスト］を修正
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
東京都近郊｜エッチな出会いサイト【確実にセックスフレンドと会える信頼のサイトランキング】エッチ出会いクリエイト
creative-tweet.net
Webデザインのタネ | Web制作の効率化やトレンド・ノウハウ