Webデザイナーのスキルアップに役立つ便利なチートシートのまとめ
先月は「Web制作時に備えておくと便利なチートシートのまとめ」でデベロッパ向けのチートシートを紹介しました、今回はデザイナー向けのチートシートをまとめました。 Photoshopの各バージョンに対応したショートカット、ブラシやペンツールの使い方、初期設定をはじめ、デザインの要素と原則、カラーセオリー、タイポグラフィ、グリッドシステム、レスポンシブなど、デザインの現場で役立つものばかりです。 Adobe Photoshop Keyboard Shortcuts Photoshop 5-7, CS1-4, CCまで、Win/Mac用のキーボードショートカットがそれぞれPDFでダウンロードできます。 また、ショートカットがない便利な操作にショートカットを割り当てたショートカットファイルもダウンロードできます（チートシートでは「c」がついています）。
Sketchの使い方: 初心者がマスターしておきたいSketchでのデザイン作業がぐっと効率的になるチップス | コリス
10 Sketch Tricks for Designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 レイヤー間でスタイルをコピペ レイヤーの移動 カラーピッカー 角丸の半径を個別に設定 再利用できるシンボル ツールバーのカスタマイズ iOSデバイスでデザインレビュー Sketchの便利なプラグイン Sketchでプレゼンテーション iPhone, iPadの画面を録画 レイヤー間でスタイルをコピペ レイヤーに同じデザインをコピペしたい時は、カラーコードなどをコピペするのではなく、スタイルをレイヤー間でコピペできます。 レイヤー間でスタイルをコピー ⌘ + Option + C レイヤー間でスタイルをペースト ⌘ + Option + V レイヤーの移動 レイヤーを上下に移動させたい時は、ドラッグ&ドロップの代わりにキーボード
あまり知られていないけど超便利！Webデザイナー向けPhotoshopのショートカットのまとめ
Photoshopを使いこなすには、キーボードショートカットを覚えることも大切。Adobe系のショートカットは他のアプリより複雑ですが、用途が広く、非常に便利なものが揃っています。 数多くあるショートカットの中から、Webデザインの作業に役立つあまり知られていないPhotoshopのショートカットを紹介します。 Professional Photoshop Shortcuts for Web Designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ※画像は日本語環境のものに変更しています。 ドキュメントから複数のレイヤーを指定 レイヤーのコンテンツを複製 デザインの補助となるガイドやグリッドを一括で非表示に 選択範囲やシェイプを正確なサイズで正確に配置 テキストの編集状態を終了 選択範囲やシェイプを描画色・背景色で塗る 複
Illustratorでのデザイン作業に変化を与えた便利な機能・テクニックのまとめ
Illustratorも他のソフトウェアと同様にバージョンアップを繰り返し、より使いやすくより便利なものに進化し続けています。 デザインをIllustratorでする際に変化を与えた、ここ数年の間に学んだ便利な機能、新しいテクニックをSpoonGraphicsから紹介します。 Illustratorはクオリティの損失なしで拡大縮小が無限にできるベクターのアートワークを扱います。あなたがそのサイズを変える時、アートワークが太ったり痩せたりして困惑してしまうことはありませんか？ もしその線幅や効果を一緒に拡大縮小したいのであれば、環境設定パネルを確認してみてください。 設定方法 「環境設定 - 一般」の「線幅と効果も拡大・縮小」をチェック はさみツール
最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ
最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。 それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ 対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+ sectionやdivを垂直に配置した縦長ページで、背景を固定し、各コンテンツがカーテンを引き上げるようにスクロールするシンプルなテンプレート。
2015年これからのWeb制作業界の流れ、伸ばしておきたいスキル、Webデザインのトレンドなどのまとめ
数多くのブログで2015年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目すべきキーワードは、Material Designの本格始動、マイクロデザイン、スクロールコンテンツ、スマフォ・タブレットユーザーの更なる増加、そしてHTML/CSSのフレームワークの陰り。 写真：re:splashed 2015年、現在のWebデザインを確認しながらこれからのトレンドを探る 2015年、Web制作業界全体の流れ 2015年にあなたが目にするWebデザインのトレンド 2015年に大きく変化するウェブデザインの10の傾向 2014年のトレンドで良かったもの、ダメだったもの モバイルデザインに向けたWebデザインの7つの戦略 2015年、IT系で求められているスキル 2015年、現在のWebデザインを確認しながらこれからのトレンドを探る
これは貴重！商用利用無料のかっこいい動画素材がダウンロードできる -Mazwai | コリス
背景いっぱいに動画を表示したページを作りたい！ でも動画をつくるのは大変、、、そんな時にはかっこいい動画素材が揃った「Mazwai」。 Mazwai Mazwaiの紹介の前に、、、動画をページに使いたい時は、先日紹介したスクリプトがスマホも配慮されており簡単です。 動画をブラウザいっぱいやエレメントの背景として配置できるスクリプト（スマホにも配慮） -Vide MazwaiではまさにWebページで使いやすい動画のフォーマットが2種類用意されています。 .mp4 .webm 動画もいい感じのものがたくさん揃っています、風景、人物、街中、オブジェクトなどいろいろ！ ダウンロードできる動画は、2種類が用意されています。 ショートバージョンは各サムネイルを右クリックでダウンロードでき、ロングバージョンはサムネイルをクリックして動画を全画面表示し、右下のアイコンからダウンロードできます。
Photoshopがもっと便利になるすごい機能拡張・プラグインのまとめ
Photoshopは標準機能だけでも便利なツールですが、もっともっと便利になる機能拡張やアクションを紹介します。 定番として入れておきたいものから、特別な使用シーンに使うものまで、優れ物ばかりです。 Photoshopでのガイド引きに欠かせない強力な機能拡張 定番のGuideGuideは3.1.2にバージョンアップ 幅の異なる複数のガイドを一気に作成できる優れ物 Photoshopのスウォッチをフォルダで管理 カラーピッカーを開かずにカラーのコードを簡単コピー 複数のさまざまなオブジェクトのカラーを一元管理 手元の画像からシームレスなテクスチャを1クリックで作成 ビットマップのオブジェクトをベクターに変換 画像にパースをつけてかっこよく見せる パラグラフのレイアウトを段組みに変更 要素のサイズやエフェクトやフォントなどの情報を書き出す エレメントやマージンのサイズを書き出してくれる 黄金比
2014年総まとめ、jQueryのプラグインとスクリプト100選
毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ
これは使える！レスポンシブ対応のさまざまなHTMLメールが簡単に作成できる無料のオンラインサービス -BeeFree
ビジネス用のニュース、プロダクトのリリース、プロモーションなど、さまざまなレイアウトのHTMLメールをドラッグ&ドロップで簡単に作成できるオンラインサービスを紹介します。 デスクトップ・スマホ両対応で、プレビューやメールアプリでのテストなど機能も非常に充実しています。日本語もOKでした！ BeeFree 使い方は簡単です。 上記ページの「Let's get started」をクリックし、HTMLメールを作ってみましょう。 ※HTMLメールの作成やファイルのダウンロード時に登録は必要ありません。作成したメールをサーバー上にキープする時だけ登録が必要です。 まずはテンプレートの選択をします。 2カテゴリ各4種類、画像やテキストが仮配置された「Rich Templates」。
Googleのサービスを利用する際に知っておくべき大切なURLのリスト
Googleで検索したり、Gmail, YouTube, Googleマップ、カレンダーなど、Googleのさまざまなサービスを利用する際に知っておくべき大切なURLを10個、紹介します。 Googleアカウントが使えなくなった時の設定とかしてありますか？ 10 URLs That Every Google User Should Know written by Digital Inspiration Googleのアカウントを作成・管理 広告の設定 Gmail, YouTube, カレンダーなどのデータを保存 違反コンテンツを見つけたらGoogleに報告 位置情報の管理 検索に使用した文字も記録されています Googleアカウントの使用を止めた後のデータの扱い 自分のGoogleアカウントを第三者が使っていないか調べる アカウントの権限を一括管理 Googleアカウントがハッキングされた
2013年総まとめ：ウェブ制作に役立つエントリーBest 20
2013年、当サイトのウェブ制作に役立つエントリーBest 20の紹介です。 去年までは、はてブ数が多かったエントリーをピックアップしていましたが、今年はPocketからのアクセスが多いものにしました。 コリス 当サイトの購読は、RSS Feedをご利用すると便利です。 コリスのRSS Feed FeedBurner経由の方は、変更をお願いします！ [ad#ad-2] 2013年、Pocketからのアクセスが多かったエントリー 2014年用、漢字も揃っている日本語のフリーフォントのまとめ -商用サイトだけでなく同人誌などでの利用も明記 一つのカラーから配色セオリーに基づいてカラースキームを作りだす配色設計に役立つツールのまとめ Photoshopの作業効率をアップする便利すぎるエクステンションのまとめ Photoshopで文字をよりシャープにクリアに見せるこつ -1px未満のこだわり ウェ
シンプルで操作も簡単！電卓、単位変換、黄金比計算ができる美しいiOSアプリ（コリス限定無料） -Kalc
コリス タイアップ企画で、金土日のこの週末はなんと無料！ iOSの電卓・単位変換・比率計算アプリはいろいろ使ってきましたが、これはかなりオススメです。 電卓機能はシンプルで操作しやすく、履歴も残せ、また同様のインターフェイスで長さ、重さ、面積、質量、温度、年月日時分秒、スピードの単位変換もできます。 単位変換は、フィートをメートルになどだけでなく、寸・尺・丈・間・町・里といった日本の昔の単位にも変換できます。 また、黄金比、白銀比などの比率計算ができるのも嬉しいポイントです。 Kalc 掲載時の価格：無料（8/23-25） カテゴリ：ユーティリティ 販売元：YUTA OKAJIMA 条件：iPhone 3GS、iPhone 4、iPhone 4S、iPhone 5、iPod touch（第3世代）、iPod touch (第4世代)、iPod touch (第5世代)、およびiPad に対
これはイイ！写真画像にさまざまなかっこいいエフェクトを与える無料のPhotoshopのアクション -Special FX
Freebie: 8 Special Effects for Photos ※上に見えてる「Download」はAdSenseの広告です。 ダウンロードした「Special FX by SparkleStock.zip」を解凍します。 中にある「Special FX by SparkleStock.zxp」をダブルクリックすると、Adobe Extension Managerが開くので、指示に従いインストールします。 ここで、一旦Photoshopを再起動します。 Photoshopのアクションパネルの右上の三角形をクリックすると、「Special FX by SparkleStock」を選択すると、アクションパネル内に「Special FX by SparkleStock」が登録されます。 Extension Managerを使えない、使いたくない人は、Photoshopのアクションパネ
動画で学ぶ、Photoshopでフラットなスタイルのウェブページを作成するチュートリアル（素材ダウンロード可）
フラットなスタイルのデザイン素材を数多くリリースしているDesignmodoから、彼らの素材を使ってどのようにフラットなスタイルのウェブページをデザインするかを動画で学ぶチュートリアルを紹介します。 動画のキャプチャ 動画では、彼らがフラットなUI素材でどのようにグリッドを使ってPhotoshopでデザインしているか見ることができます。 約18分と長めなので、お茶でも飲みながらお楽しみください。
黄金比・黄金螺旋・黄金三角形などをページのレイアウトや写真の構図にあてがうPhotoshopの機能拡張
対角線 Divine Proportions Toolkitのインストールと使い方 Toolkitの対応バージョンはPhotoshop CS5, 6です。 インストール 下記ページのDownloadから「divine_proportions_toolkit_1_0_4.zip」をダウンロードし、解凍します。 Divine Proportions Toolkit 解凍したフォルダ内にCS5, CS6のフォルダがあるので、利用する環境に合わせて選択してください。 フォルダ内の「Divine Proportions Toolkit.zxp」をダブルクリックすると、Adobe Extension Managerが開きます。 指示にしたがって、インストールします。 インストールが完了したら、Photoshopを再起動します。 使い方 使い方は簡単です。 メニューバーの[ウインドウ]-[エクステンショ
1-4時間で実践できる、Illustratorのさまざまなテクニックを学べるチュートリアルのまとめ
2013年春の新作、Illustratorのチュートリアルをvector tuts+から紹介します。 チュートリアルはステップごと詳しいキャプチャ付きで、英語が苦手な人でも雰囲気は伝わると思います。
CS6対応！Photoshopの作業効率をアップするショートカットをまとめたチートシート -PS CS6 Shortcuts
Photoshop CS6対応のツールとアクションのショートカットをまとめたチートシートを紹介します。 あと、Photoshopで作業する時に欠かせない、ツールやパネルの表示、選択ツール周りの便利なショートカットも。 PS CS6 Shortcuts チートシートの見方 グレーのテキスト ツールのショートカット ※入力モードを英字で ブルーのテキスト アクションのショートカット ※コマンドキーと一緒にキーを押す 作業効率をアップする便利なショートカット チートシートの下半分にある、ツールやパネルの表示、選択ツール周りの便利なショートカットです。 ツールの切替 shift + 各ツールのショートカット グループ内のツールの切替 選択 真ん中から選択 option + 選択(M) 選択範囲を加える shift 選択範囲を減らす option 交差範囲を選択 shift + option 選択範
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料でしかも高品質！レスポンシブ対応の美しいWebページを作るためのHTML5/CSS3のテンプレートのまとめ
[CSS]2013年、素敵なアイデア満載のスタイルシートのテクニックのまとめ