UIデザイナーの私がPhotoshopからSketchへ乗り換えた9つの理由 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
初めまして。アメリカからやってきたUIデザイナーのCorey（コーリー）です。 LIGの転職サービス「Poole」でUIデザインをしています。 PhotoshopやIllustratorをメインとして使うデザイナーは多くいると思いますが、私はPhotoshopをほとんど使いません。1年前にSketchへ乗り換えたからです。 現在、日本のデザイン界ではSketchはそれほど使われてないかもしれませんが、海外ではSketchが大ブームになっています。 今回は私が最強なPhotoshopからSketchへ乗り換えた理由をお伝えします。 Sketchへ乗り換えた理由（Why I Use Sketch） http://bohemiancoding.com/sketch/ 1. UI Design中心 Sketchは完全にWebとモバイルUIデザインの専用ツールなので、それ以外の余計な機能が入っていま
Photoshopで1クリックの時代がきた！Webページ用のグリッドも簡単に作成できる便利すぎる無料の機能拡張 -Bootcomp 2.0
Webページやスマホアプリのデザインカンプを作成する時に、大幅な時短になる便利な機能がたくさん詰まったPhotoshop CC2015.5対応の機能拡張を紹介します。 Bootstrapでつくる時はもちろん、それ以外のデザイン作業でも強力な機能を発揮します。 Web制作に携わるすべての人が、入れておいて損はない機能拡張です。 Bootcomp Bootcompの特徴 Bootcompのインストール Bootcompの使い方 Bootcompの特徴 先日当ブログで紹介したBootcompが昨日、CC2015.5にも対応してアップデートされました。1.0でも便利でしたが、2.0で更に便利になっています！ OS X, Win両対応で、日本語にも完全対応の無料の機能拡張です。
今どきデザインはこれ！拡散型シャドウの基本から作成方法まで（PSチュートリアル + HTML/CSSスニペット付）
最近ウェブサイトやUIデザインなどを見ていると、ふわりと浮いているような奥行き感を表現しているものがあります。これは拡散型シャドウ（英: Diffuse Shadow）と呼ばれる新しいグラフィックトレンドで、2016年に入って多く見かけるようになっています。 今回は、この拡散型シャドウの基本的な使い方や、PhotoshopやHTML/CSSなどによるさまざまなデザイン方法を、参考にしたいUIデザインと一緒に見ていきましょう。 拡散型ドロップシャドウって何？ 英語でもきちんとした名前はまだ決まっていないようですが、この拡散型シャドウ（英: Diffuse Shadow）と呼ばれるこのテクニックは、通常のドロップシャドウに比べ、奥行き感をより表現できます。フラットデザインから派生したスタイルのひとつとも言え、今のデザイントレンドを反映しています。 Image Source: VOID Conf
Photoshopで線画抽出する方法 〜手書きイラストをスキャンした場合〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近Photoshopをゲットしたライターのしゅーへいです。 LIGデザイナー陣のデザイン技術をチラチラ見ながら、Photoshopの勉強をしております。ちなみに打倒、王さんです。 今回の記事は、手描きのイラストをデジタルデータ化する方法です。 必要な物は「スキャナ」と「Photoshop」です。今から紹介する方法は、線画でも利用可能なので覚えておいて損はないです。 ストーリー 家にあった中二病ノートに2012年4月に書いたイラストというか文字がありました。なんか「イイナ・・・。」とか思ったので、このイラストをデジタル化しようと思います。 スキャンする まずはスキャナを使ってスキャンします。 320dpiのTIF形式でスキャンしました。綺麗にスキャンできるならJPEGでも良いと思います。 Photoshopでの作業 次に、Photoshopでの作業に移ります。 余計な部分の除去 そのままス
3分で分かる木の描き方！
ざっくり木を描いてみました。 所要時間は6分弱。 ラフでもそれなりに見えるので、細かい部分をじっくり描きこんでいくとめちゃくちゃいいのに仕上がります。植物苦手だって言う人は一回やってみて下さい。 〜この木のポイント〜 ・幹や根は流動的に曲線で描く。 ・葉っぱは絵の様なブラシを作ると一瞬で描けます。 ・葉っぱの色は濃い色から明るい色へ乗せていきます。 ・影は深緑、光の当たる部分は、太陽光を意識して黄色に近くて明るい緑。 ・木漏れ日や影は葉っぱの形で幹に描く。 ・影に青っぽい色を入れると影の部分の空気感が増す。 ・仕上げにハイライト。覆い焼きカラーでざっくりと描く。やりすぎ注意。 twitter: https://twitter.com/Fujigakure Blog: http://fujigakure.tumblr.com/ Pixiv: http://www.pixiv.net/mem
全くの未経験が独学でWEBデザイナーに転職するまで | SHIROMAG
私はWeb制作会社を経営しており、2023年現在で36歳になります。 28歳の時にWebデザイナーに転職してWeb業界でのキャリアをスタートさせ、32歳で独立しました。 この記事では、私が28歳の時に未経験から独学でWebデザイナーに転職した方法を紹介しています。 効率的な勉強方法や習得すべきスキル、転職活動のコツなど、Webデザイナーを目指している人におすすめの内容になっています。 また、今はWebデザイナーを採用する立場になっているので、「こんな人を採用したい」という視点も加わっています。 28歳（当時）の未経験がWebデザイナーに転職 Webデザイナーになるまでは、Webデザインどころか、デザインの仕事やプログラミング、Web関係の仕事すらやったことがありませんでした。 最初からデザインのセンスがあったわけでもなく、今見るとWebデザインの勉強を始めた頃作ったサイトは酷いものでした…
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6/CC含む) | Design Color
はじめに 先日ちょうどAdobe Creative Cloudを申し込みました。 Photoshopをまっさらな環境にする必要があるため、今回はまさに新品状態のCS6/CCの画面で解説をします！ もくじ 定規などの単位はpxで統一 「自動選択」で図形からレイヤーを選択する 「バウンティングボックス」を表示して選択や変形をしやすくする 「ピクセルにスナップ（エッジを整列）」で端がぼやけるのを解消 レイヤーコピー時に「〜のコピー」とつけないようにする スライス書き出し時に「images」フォルダを作成しないようにする 【CS6/CCの場合】カラーテーマをグレーにする 【CS6/CCの場合】切り抜きツールを「クラシックモード」にする 起動画面。か、かっこいい…！ CS6/CCはUIが黒いのですね。ちょっと慣れない。 従来のグレーにする方法も後ほどお伝えしますので、どうぞおつきあいください！ 1.
photoshop（フォトショップ）で髪の毛を自然な形で切り抜く方法 | 楽してプロっぽいデザイン | Forty-N-FiveBlog
フォトショップでは様々な切抜きの方法があり、パスを使って切り抜くことが多いですが、髪の毛を切り抜く際、先端部分をパスで綺麗に切り抜くことは至難の業です。そんな時「チャンネル」を利用して切り抜きを行えば、髪の毛部分も自然な形で切り抜くことが出来ます。 「チャンネル」を利用して髪の毛を自然な形で切り抜く方法 パスでおおよその輪郭を選択します 「ペンツール」を選択し、パスパレットよりパスを新規作成します。おおよその輪郭のパスをとっていきます。ポイントは、髪の毛の部分は内側にパスをとることです。 髪の毛部分をなげなわツールで選択します 「なげなわツール」より髪の毛の先端部分を囲んでいきます。ある程度適当でかまいません。 なげなわツールで選択範囲が取れれば、Ctrl+Jを押してみます（今選択した部分のみコピーされ新規レイヤーに追加されます。） 「チャンネル」での処理 現状レイヤーには、基画像と、手順
WEB制作｜デザイン会社｜超簡単! 髪の毛の画像を1分で切り抜く方法まとめ
お客様に最適なWEB戦略で、 ブランド価値の向上、お問い合わせの増加、迅速な情報の配信、 営業・広告費用の削減、顧客満足の向上、リピート率の増加 の成功事例を実現しております。 切り抜き・マスク作業で、もうイライラしない！ 誰でも、切り抜き30秒・調整30秒で完成できる方法。 WEBサイトやLPのキービジュアルでは画像を使うことが多い。 しかし、お客様から素晴らしい画像の支給があるとは限らない。 「これ、マスクしないといけないじゃないか！」 昔からマスク専用のアプリケーションがあるほど、 マスク作業・切り抜き作業というのは 利益にならないのに、手を抜けない根気が必要な作業。 しかし、今なら誰でも簡単に、1分あればできる。 今更だが、やっとAdobeのCS5シリーズをまともに使い始めたので ここで、Photoshop CS5を使った、超簡単マスク術を紹介したい。 お題の写真 こちらが今回のお
Webデザインで使えるフリーシームレステクスチャ100枚 – poyosi.com
初めまして、@poyosiです、こんにちは。 Webデザインなどで壁紙を作る際に便利そうなテクスチャを100枚作りました。 このブログの制作や、他Webサイト制作でノイズがかった背景や、ちょっと変わった背景が必要だったので自分用にちょっとした加工で簡単に背景が作れるテクスチャを色々用意しました。 大きめの画像にしたので、Webサイトの背景などで繰り返し（リピート）使用しても繰り返し部分が目立たなくなるようになっています。個人利用可、商用利用可なので、もしよろしければWebサイトの背景やバナーの背景を作るときに自由に使ってみてください。 テクスチャ一覧 Photoshopでテクスチャを使ってみよう 1：パターンを登録しましょう。 パターンに登録したいテクスチャ画像をPhotoshopで開きます。 「編集」 > 「パターンを定義」からパターンを登録します。 2：背景画像を作ってみましょう。 新
ひとりでWebサイトを作れるまでに必要な本や記事集めました 〜①デザイン編〜
「Webサイトを作れるようになりたいけど何から始めればいいかわからない」そんな人のために完全な素人の人がひとりでWebサイトを作れるまでに必要な本や記事集めました。 この記事テーマは３つの記事に分かれています。 一つ目は今回の、 完全素人がひとりでWebサイトを作れるまでに必要な本や記事集めました 〜①デザイン編〜 後日公開予定の、 〃 〜②コーディング編（HTML&CSS）〜 〃 〜③集客・Webマーケティング編〜 以上の３つです。 Webサイトの制作手順 初めての方は「Webサイトをどういう順番で作るか？」について知らないと思いますので、説明します。Webサイトを作成し、公開してたくさんの人に見てもらうまでには大きく７つのステップがあります。 ①どんなWebサイトにするか考える（企画） Webサイトを作るためにまずはどんな目的で、誰に、どんな情報やサービスを届けたいのかを考え
日本語で読めるPhotoshopチュートリアル集 まとめ | 日刊ウェブログ式
Photoshopのチュートリアルというと英語が多いですが、日本語の方がサクサク読める（私の場合）ので、日本語で解説してくれているチュートリアル集をまとめてみました。 フォトショップでつくるキラキラに輝く人物の作り方 フォトショップでリアルな炎を出しながら走るバイクの作り方 フォトショップで夕日に輝く幻想的なライティング効果を作る方法 映画のタイトルロゴのような光と文字を描画するPhotoshopチュートリアル フォトショップでキラキラに輝く背景画像を作る方法 布地テクスチャーにペイント フォトショップでキラキラに輝くライティングエフェクトをつくるチュートリアル Photoshopで六角形のキラキラに輝く背景画像をつくる方法 フォトショップでオーロラが輝く地平線に太陽が沈む様子を描く方法 基本的な光の作り方2 基本的な光の作り方3 Photoshopで美女の画像に効果を入れる方法 フォトシ
美しくて機能するウェブデザインを作成するPhotoshopの7つのテクニック
クリーンで、エレガントで、美しく、そしてしっかりと機能するウェブデザインを作成するのに役立つPhotoshopのテクニックを紹介します。 7 Photoshop tips for designing clean and modern websites [ad#ad-2] 下記は各ポイントを意訳したものです。 1. Space(ホワイトスペース) 2. Depth(奥行き) 3. Detail(ディテール) 4. Definition(明確) 5. Interest(興味) 6. Perspective(遠近法) 7. Readability(リーダビリティ) 1. Space(ホワイトスペース) スペースはボックスやラインやグラフィックなどを使用しないで、デザインエレメントの見た目での分離を可能にするもので、モダンデザインの中でも最も重要なテクニックです。これはコンテンツのプレゼンテーショ
Webデザインの1pxを作るためのPhotoshopのレイヤースタイルいろいろ
色んな Webサイトを見ていると、1px にこだわって作られたキレイなデザインがたくさんあります。私は Photoshop を使っているので、Photoshop のレイヤースタイルを使って、1px の細かい所を作る Tips をまとめてみました。基本的な操作ばかりなので、これから Photoshop で Webデザインをやってみたいなーという人向けの記事です。 色んな素敵なデザインの Webサイトを観察していると、1px の細かいところまでこだわって作られてるデザインってとても多いですよね。1px … Webデザインでは一番小さいサイズ。「神は細部に宿る」という言葉もあるけれど、1px までしっかり作られたグラフィックはとても美しいですね！ 今回は Photoshop を使って、いろんな 1px を作ってみました。とは言っても難しいグラフィックデザインを作るわけではなくて、レイヤースタイル
WEBデザインに使いやすいPSDパーツ素材をまとめたサイト集「10 Awesome Websites With Free PSD Resources for Download」
WEBデザインに使いやすいPSDパーツ素材をまとめたサイト集「10 Awesome Websites With Free PSD Resources for Download」 webデザイン制作で便利に活用できるpsd素材ですが、都度インターネットなどを検索し、欲しい素材を探すのには手間と時間がかかってしまいます。そこで今回紹介するのが、さまざまなテイストのデザインパーツ素材サイトを集めた「10 Awesome Websites With Free PSD Resources for Download」です。 （Free web design resources & layered PSD files on Freebies Booth） シンプルな素材に強いサイトから、可愛らしいデザイン素材を取り扱うサイトまで、さまざまなサイトが紹介されています。中でも気になったのもをいくつかピックア
「Photoshop」で人物を上手にマスクするテクニックとは | クリエイティブ | マイコミジャーナル
アドビ システムズは都内にてクリエイター向けのセミナー「デジタルフォト&デザインセミナー2011～トップクリエイターのテクニックとアイデア～」を開催した。セミナーでは、「HP WorkstationとAdobe CS5.5による写真と動画の最先端レタッチテクニック」が行われた。 セミナーでは、「Photoshop」のパペットワープを使ったレタッチテクニック、「Illustrator」の「エンベローブ」を活用した画像処理テクニックに続いて、「Photoshop」で人物をマスクするテクニックが、フォートンのプロデューサー 兼子研人氏とレタッチャー toppy氏によって紹介された。 Photoshopで人物をマスクするテクニック この画像の子供のマスクを作成する まず始めに、画像の子供の部分を範囲選択し、「選択範囲→境界線を調整」を選ぶ。次に「エッジの検出(スマート半径)」を使い子供の輪郭に沿っ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
【公式】ワコムストア（Wacom） - ペンタブレット、液晶ペンタブレット
新着記事
