フォントワークスがGitHubで無料公開しているフォントをPhotoshopなどで使ってみよう

emiと申します。USAGI DESIGN emi.というWebサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 この記事では、 …

「スマートフォン時代のWebデザインスクール」がご自宅で動画受講できます

スマートフォン時代のWebデザインスクール

「スマートフォン時代のWebデザインスクール」は、現在動画受講が可能です。初回体験レッスンも受講可能です。

Adobe XDをはじめ、新しいWeb技術やデザインワークフロー、新しい端末などに対応するため、授業内容はリニューアルし新しい内容となっております。

Photoshop・Lightroomの新機能「スーパー解像度」が使える場合と使えない場合について

この記事ではPhotoshopの新機能「スーパー解像度」を試し、他社の機能と比較した場合のメリットやデメリット、使えるケースと使えないケースについてまとめています。 「スーパー解像度」は記事執筆時点ではPhotoshop …

Webデザインツールはどれを使えばいいの?

emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 Webデザインのため …

Photoshopの「覆い焼き」や「なげなわ」って何?という話

Photoshopを初めて使う方にとって、効果がわかりにくいツールはたくさんあると思います。 その中でも、「覆い焼き」「焼き込み」「なげなわ」ツールは特に効果がわかりにくいツールではないでしょうか? この記事では、そもそ …

「Web制作に役立つIllustrator入門講座」という無料講座を開催します

Illustratorを使用したことがない方やWeb制作は未経験の方に向けて、Web制作でIllustratorをどのように使うのか、Photoshopとどのように使い分けたらよいかという話からGoogleのマテリアルデザインと呼ばれるデザイン手法の話、マテリアルデザインに基づいたアイコン制作をIllustratorで行う実習などを行います。

フィルムカメラで撮影した写真を自分で現像・プリントしてみた

フィルムで撮影した新宿の写真を自分で現像・紙焼きしたところ、数十年前に撮影した写真のような不思議な雰囲気になりました。

Webデザイナー目線で見たiPad版Photoshopの驚きの完成度について

Adobe CCを基礎から学べる「スマートフォン時代のWebデザインスクール」を渋谷で開講します 「スマートフォン時代のWebデザインスクール」というWebデザイン入門スクールをご自宅で動画受講可能です。 Photosh …

PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売

ここ最近はたった1つのアプリでWebデザインを完結させるワークフローを実践していますが、とても快適なのでその方法についてこの記事で紹介したいと考えています。
このワークフローは現在WindowsおよびMacで実践可能です。今後iPadでもできるようになるはずです。

「CS6以降のアプリがいつでもすべて使える」という売り文句のAdobe CCで過去のアプリが使えなくなった件

正直タイトルの時点でひどすぎると感じていますし、このような記事を書くのは本望ではないのですが、これを許してはいけない、受け入れるわけにはいかないという気持ちがどうしてもありますので記事を書くことにしました。

Photoshop、Illustrator、XD、Sketch…結局どれを使ってWebデザインすればいいの?

Webデザイン制作で使用するアプリは多様化しており、これからWeb制作をはじめたい方にはどれを選べば良いか分かりにくいかもしれません。
この記事では、Photoshop、Illustrator、XD、Sketchに絞り、それらのアプリケーションの特徴についてまとめています。

「世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書」という本を書きました

この書籍は完全所初心者ではなく、PhotoshopやIllustratorをある程度使える方向けの本となっております。
「Webデザインスクールや他の入門書などで基本操作はわかったけれどさらにステップアップしたい方」、「普段Web制作をしているが最近のAdobe CCの新機能をキャッチアップできていない方」などに良いのではと思います。

ペンツールで曲線を描くときに知っておきたい、たった1つのこと

Illustratorで何かを制作したいという方にとって最初の関門は、おそらくペンツールで曲線を描くことではないでしょうか。
ペンツールの動作はお世辞にも直感的とは言えず初めて使う方は戸惑うことが多いと思います。
しかし、たった一つのことを頭に入れて作業するだけで、初めての方でもある程度自分が描きたい曲線が描けるようになると思います。

Photoshopでぼかした色の境界が暗くなる時の対処法

Photoshopで画像を制作している時、ぼかした色の境界が暗くなったり濁った色や不自然な色になってしまうことがあります。 また、他の方が制作したデータでカラー設定を合わせているはずなのに境界部分の色が変わってしまうとい …

スマートフォン時代のWebデザインスクールとコーディングスクールを開催して

今年から開催した「スマートフォン時代のWebコーディングスクール」は昨年まで開催していたWebデザインスクールから完全に内容をリニューアルしたのですが、約1年かけて資料を準備した甲斐があったと思えるリニューアルでした。

Twitterのステッカーは本当に消すことができるのかPhotoshopで検証してみる

Twitterで、Twitterアプリのステッカー機能は剥がすことができる、つまりステッカーのない元の写真に戻すことが可能であるというツイートが話題になっていたため、実際に可能なのか、写真補正アプリである Adobe Photoshop CC 2017 で検証しました。

DOCTYPE宣言、IE対応、デザインカンプの解像度などのアンケート結果

DOCTYPE宣言はHTML5かXHTMLか、IEはどのバージョンまでサポートするか、RetinaディスプレイのPhotoshopでカンバスサイズはどうしているかなど、Web制作で気になっていたことをアンケートで調べてみました。

Illustrator代替アプリAffinity Designerをセールで買ってみたけどいい感じ

Adobe Illustrator の代替アプリとして知られる Affinity Designer というMac用アプリが半額セールで ¥3,000になっていたので購入してみました。
しばらく使った感じ、なかなかよい感触だったので、使ってみて良いと感じたところと良くないと感じたところ、気づいたことなどまとめてみました。

WebデザイナーのためのAdobe CC 2015の新機能と不具合まとめ

Photoshop、Illustrator、DreamweaverなどのCC 2015版の新機能と不具合を、Web制作者目線でまとめています。

「PhotoshopでWebデザインするときの悩み」にスクーの生放送で答えます

普段PhotoshopでWebデザイン制作をされている方でも、意外とできないことがあって悩んでいたり、効率のよいやり方がわからず困っていることがあるかもしれません。

この授業では、事前に「PhotoshopでWebデザイン制作するときの悩み」を投稿していただき、スクーの授業にて、その解決方法を実際の操作を交えながら生放送でお話しします。

WebデザイナーのためのPhotoshop CC 2014の新機能まとめ

この記事は、Photoshop CC 2014 の新機能をWebデザイナー視点からまとめた記事です。
6月19日の「Adobe Create Now 2014」および、6月23日の「アドビ 報道関係者向けCreative Cloud 最新製品 デモセッション」で聞いた話を含みます。

Photoshopで選択範囲に段落テキストを作成するスクリプト

Photoshop で段落テキストを作成する時、数値を指定して作成するのは地味に面倒だったりします。
そこで、「長方形選択ツール」などで選択範囲を作成し、実行するとアンチエイリアスなしの段落テキストを作成するスクリプト(JSX)を作成しました。

Photoshop CCの画像アセット機能でSVGを書き出す裏技

SVG は Illustrator で書き出すことができますが、これまで Photoshop ではプラグインなどを使わなければ SVG を書き出すことができませんでした。
しかし、Photoshop CCの「画像アセット」機能を使用して SVG を書き出す裏技を見つけたので紹介します。

WebデザイナーのためのPhotoshop関連記事まとめ

これからPhotoshopでWebデザインを始めたい方から現役Webデザイナーの方向け。
Fireworks からの乗り換えの方向けの記事からより速く制作するためのテクニック、Adobe が開発中の CSS をコピーしたり画像アセットをダウンロードするためのWebアプリなど。

神速Photoshop [Webデザイン編]を書きました。

神速Photoshop [Webデザイン編] は、Photoshop を使ったWebデザインカンプ制作ができる方向けに環境設定からカンプ制作、画像の書き出しなど各ジャンルにわたって時短テクニックをまとめた本です。
神速Photoshop [Webデザイン編]

Photoshop CC、ついに外部ファイルをリンクできるように

Photoshop でWebデザインカンプを制作している方には嬉しい、外部ファイルをスマートオブジェクトとしてリンクする機能が Photoshop CC 14.2 でついに搭載されました。

Photoshop CC(14.1.2)の「属性」パネルでシェイプのサイズや位置を変更する方法

Photoshop CC では、長方形などのシェイプを作成した際に「属性」パネルでシェイプのサイズや位置を変更することができるようになりました。しかし、Photoshop CC を 14.1.1 以降にアップデートすると、移動ツールでシェイプを選択しても「属性」パネルでサイズや位置を変更できなくなりました。
この記事では、この問題を解決する方法を紹介します。

Web制作者必見!Photoshop CCにSlicyのような画像アセット(Generator)機能が追加

2013/9/9 に、Adobe Photoshop CC がバージョン 14.1 にアップデートされました。
アップデートされた機能の中で、Web制作者にとって重要なのは画像アセット(Generator)機能だと思います。
この記事では、Generatorの使い方、使ったほうが良いケースと使わないほうが良いケース、問題点やバグなどについて解説しています。

[閲覧注意]アメリカのPhotoshopの本って…

アメリカというか、英語圏の Photoshop の本の表紙って、なぜこんなことになっているのでしょうか。

「プロになるためのWebデザイン入門講座」を執筆しました

私が執筆した「プロになるためのWebデザイン入門講座 実践で役立つPhotoshop&Illustrator徹底ガイド」が7月24日に技術評論社より発売されました。
この記事では、書籍の内容について詳しく解説しています。

プロになるためのWebデザイン入門講座

Adobe CC検証会を開きます

7/16(火)19:30〜渋谷「Stocker.jp / Space」にて、Adobe CCに関する情報交換を目的とした検証会を開きます。
これは特定の方の話を聞くタイプのセミナーのようなものではなく、参加者同士が情報交換する勉強会です。

Adobe Photoshop CCファーストインプレッション

Adobe Photoshop CC がようやく公開されたので、早速レポートです。
Photoshop CCは、見た目はほぼ Photoshop CS6 と同じですが、パネルを使用したシェイプサイズの変更や角丸の再編集など、Webデザイナーにとっても地味に便利な機能が追加されています。

「PhotoshopによるWebデザインカンプ制作はFireworksに比べて効率が悪い」という都市伝説について

Fireworks からの移行先アプリケーションの候補の1つである Photoshop について、Twitterを見ていると「Photoshop でのWebデザインは制作効率が悪い」という方が多いようですが、私はそんなことはないと思っています。
なぜそう言えるのかについて、簡単にまとめてみました。

「Webデザインの基礎と実習」の無料動画講座を開講します

4/11(木)21:00より、schoo(スクー)というオンライン動画スクールで「Webデザインの基礎と実習」という講座を3週連続で行ないます。
生放送には Ustream を使用しており、どなたも無料で視聴頂けます。

Photoshopで長方形などのシェイプを移動・変形・複製するJSXをアップデート

PhotoshopでWebデザインカンプなどを制作している方にはかなり役立つ、「シェイプを移動・変形・複製」するJSXをアップデートし、シェイプを移動・変形・複製する際に、まれに数値のズレが発生するバグを修正しました。 …