sketchデータ(.sketch)をPhotoshopデータ(.psd)に簡単に変換する方法。
COLUMN sketchデータ(.sketch)をPhotoshopデータ(.psd)に簡単に変換する方法。 みなさんデザインツール何を使っていますか? photoshop、Illustrator、Adobe XD、fireworksなどのadobe cc系ソフトに、 新興勢力のSketch、Affinity Designer…。 弊社では昨今デザインする「コンテンツ」と「デバイス」が多様化し、 プロジェクト毎に関わるスタッフや案件の特性も異なる為。 どのデザインソフトで制作するのが最も効率的か、都度使い分け模索してきました。 その中で2017年末現在、弊社で使用頻度が急上昇しているデザインソフトがSketchです。 Sketchの魅力は何と言っても「圧倒的な動作の軽さ」です。 「軽さ」はそのまま「検証」と「手数」の多さに還元され、限られた時間の中でより精度の高いアウトプットを行う事が可
photoshopの「レイヤーからの画像アセット」機能でスライス切りからサヨナラできるかも。 | バニデザノート
photoshopの「レイヤーからの画像アセット」機能。 前から気になっていたのですが、やっと試せました。 これは速いですねー。photoshop CC 2014.2.2リリースのバージョンでの 使い方をすこし解説します。 今までは、psdカンプを作成したあと、「スライス」ツールを使って スライス枠を作り、書き出し用のファイル名を別ウィンドウで書き込み、 「Web用に保存」ウィンドウを開き、出力設定を行い、 さらに背景などを切り出し・・と、htmlでコーディングするためのパーツを書き出すためにはたくさんの手順が必要でした。 「レイヤーからの画像アセット」機能でも、ウェブ用のパーツを書き出すのですが 上記手順に比べるとすごく少ないステップでパーツが書き出せるようになります。
Photoshop無しでPSDファイルをさくっと開き、画像編集もできてしまう！オンライン無料サービス -Photopea
PhotoshopのPSDファイル、GimpのXCFファイル、JPEG, PNG, GIF, BMP, WebPなどの画像ファイルを開き、編集もできてしまう無料のオンラインサービスを紹介します。 UIは簡易版Photoshopという感じで、PSDのレイヤーやグリッド、エフェクトなども読み込むことができます。 そのレイヤーやグリッドやエフェクトを編集することももちろん可能です。 Photopea 写真: ぱくたそ 対応ブラウザの明記はありませんが、Chromeでアクセスすれば問題ないでしょう。利用にあたっては完全に無料で。登録など面倒なことは必要ありません。 さっそく、昨日の「ワイヤーフレームやフローチャートに使える素材のまとめ」でダウンロードしたPSDファイルで試してみました。 通常のアプリと同様に「File:: Open」からファイルを選択して開きます。
ほんの数クリックで完成！文字をかっこよくするPSテキストエフェクトまとめ
Photoshopを利用し、短時間で手軽に、みんながあっと驚く高品質なデザインを作成する方法はいくつかあります。 そのなかでも、文字を挿入し、ボタンを数クリックするだけで、見違えるほど魅力的にするテキストエフェクトは、グラフィックデザインにぜひ活用したい素材です。今回は参考にしたい PSD ファイルを、ファイルの基本的な使い方、カスタマイズ方法と一緒にご紹介します。 詳細は以下から。 ファイルの編集、カスタマイズ方法 では実際にファイルをダウンロードし、どのように編集するのか具体的に見ていきましょう。今回はデモとして以下のファイルを利用しています。 Molten Text Effect – DealJumbo まずPhotoshopでファイルを開き、レイヤーパネルを確認します。パネルの一番上に配置された、サムネイルの右下にアイコンが表示されているレイヤーは、スマートオブジェクトレイヤーであ
Photoshop CC2015を使いこなす定番テクニックから、あまり知られていない便利なテクニックまでのまとめ
Photoshop初心者も、普段使ってる人も知らないともったいないPhotoshop CC2015を使いこなす便利なテクニックを紹介します。 この記事を書くにあたって、WinとOS XのPhotoshop CC2015でそのテクニックを確認したのですが、けっこう知らないこともあり、かなり参考になりました！ 最後にはボーナスとして、全操作の動画もあります。 28 Awesome Tips and Tricks for Photoshop CC 2015 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ※各ショートカットは、OS X用です。 Windowsの場合は、下記のように置き換えて利用してください。 Command = Ctrl Option = Alt Delete = Backspace 01: 歯を自然な白さに美しくレタッチす
こんな簡単でいいの？便利すぎるPhotoshopのプラグイン23選
デザイン制作の大半をPhotoshopで作業する人も多くいらっしゃいます。 そんなPhotoshopですから、自分仕様に環境を整えておくことで作業の快適具合も大きく変わってきます。 今回は、Photoshopでの作業を効率化する使い勝手の良いプラグインを28個に絞りご紹介します。 フォトショッププラグインとは、標準機能を拡張するファイルのことです。必要に応じてインストールすることで作業効率を飛躍的にアップさせることが可能です。 全てインストールする必要はありませんが、気になるものがあれば是非一度使ってみてください。 便利すぎるPhotoshopのプラグイン23選 1.Velositey http://dandkagency.com/extensions/velositey わずか数回のクリックであっという間にホームページのレイアウトを作るプラグインです。 ヘッダからコンテンツ、フッターなど
Fireworksで作ったデータ（.png）をPhotoshop形式（.psd）に変換する方法 ｜ 福岡のホームページ制作会社・メディア総研株式会社 マグネッツ事業部
どうもこんにちは。最近本格的にPhotoshop修行を始めましたがツンデレPhotoshopさんにツンツンされっぱなしで一向に仲良くなれないかわさきです。そろそろ少しはデレてほしい(´・ω・｀) さて、マグネッツでは普段、WEBページのデザインはFireworksをメインに使用して行っております。 （2013年5月にFireworks開発終了のニュースが流れまして、ゆくゆくは段階的に他のソフトに移行しないとなぁ…という感じです。しかしFireworksはWEB制作に特化した非常に使い勝手のいいソフトでなので、とても残念です…） たまにFireworksで作成したデザインデータ（.png）をPhotoshop形式（.psd）にてクライアント様にお渡しする必要がありまして、そのまま変換してみたら当たり前だけど結構変わってしまうなぁ…となって四苦八苦… で、今後同様の作業が必要になった時やりやす
Photoshopで手書き風の鉛筆タッチなイラストを描いてみよう！ | SONICMOOV LAB
こんにちは！イラストレーターのあんみです。 最近はデジタルで手描き風にイラストを描くことにひっそりはまっています・・・！ アナログのような表現ができるブラシを作ることが楽しいです＾＾ こちらの鉛筆ラフですが、実はPhotoshopで描いています。 今回はこのように鉛筆でスケッチを描いたように見せることができるブラシの作り方をご紹介しようと思います。 PhotoshopのバージョンはCS6です。 鉛筆ブラシの作り方 メニューの「ウィンドウ」→「ブラシ」を開き「楕円（ハード8）」を選択します。 「シェイプ」「滑らかさ」にチェックします。 「テクスチャ」にチェック ●パターンピッカーを開く→右上の三角▼をクリック→アーティスト→「麻布」を選択 ●「反転」にチェック ●拡大・縮小「50％」 ●明るさ「-10」 ●コントラスト「42」 ●「描点ごとにテクスチャを適用」にチェック ●描画モード「減算」
PhotoshopでのUIデザインが楽になる！レイヤーの作業を便利にする無料の機能拡張 -LayerCraft
PhotoshopでWebページやアプリのUIデザインをしている時に役立つ、レイヤー作業が便利になる無料の機能拡張を紹介します。 各ページのデザインを作るためにヘッダとフッタだけがあるPSDにしたい、ナビゲーションやボタンなどパーツのみのPSDが欲しい、スマホ用の画像を書き出したい、などいろいろです。
イラスト風の劇画タッチも表現できるオススメ無料Photoshop絵の具ブラシ9選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。 幼い頃、祖父母のスパルタ油絵教育から逃げ出した過去を持つ、デザイナーの佐藤タカアキ（@sato_tkaaki）です。 そんな過去にリベンジすべく、今年のお盆休みは、4日間の油絵講習を受講してきました。 さて、僕の主な業務の1つに背景ジャックのデザインがあります。 使用しているツールはPhotoshopです。 下記の画像のような劇画チックなデザインをする上で、絵の具ブラシに非常に助けられました。 が、自分の求める絵の具ブラシを探すのに、思いのほか時間がかかってしまいました。 特に駆け出しデザイナーの方には、同じ思いをしてほしくない！ そこで今回は、そのうちきっと役に立つ、使い勝手のよい絵の具ブラシをまとめさせていただきました。 これらのブラシツールを上手く使いこなせば先程の画像のようなデザインだってちょちょいのちょいです。 あまり使用する機会のない絵の具ブラシかもしれませんが、
Photoshopのシェイプでできること。
PhotoshopをWebデザイン制作として使ってると、画像を編集する事よりも、シェイプを使って図形を描く事の方が多い気がします。Illustratorで描くのと違って、ピクセル具合も気にしながら描けるので、小さいアイコンなんかはPhotoshop上で作った方がきれいに描けたりします。それでいてパスなので、拡大しても劣化しないし、ダブルクリックでカンタンに色を変えられるし、もちろんIllustratorでも使い回せるし、いろいろ重宝ポイントがあるんです。 そんな万能シェイプの機能や特長について、個人的なまとめです。 ※この記事では、主にPhotoshop CS4を使っていますが、Photoshop CS6との違いも、分かる範囲で注釈入れてます。 ※OSはMac OS X 10.6 Snow Leopardを使ってますが、Mac OS X 10.8 Mountain Lionとの違いも、分か
Photoshopで線画抽出する方法 〜手書きイラストをスキャンした場合〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近Photoshopをゲットしたライターのしゅーへいです。 LIGデザイナー陣のデザイン技術をチラチラ見ながら、Photoshopの勉強をしております。ちなみに打倒、王さんです。 今回の記事は、手描きのイラストをデジタルデータ化する方法です。 必要な物は「スキャナ」と「Photoshop」です。今から紹介する方法は、線画でも利用可能なので覚えておいて損はないです。 ストーリー 家にあった中二病ノートに2012年4月に書いたイラストというか文字がありました。なんか「イイナ・・・。」とか思ったので、このイラストをデジタル化しようと思います。 スキャンする まずはスキャナを使ってスキャンします。 320dpiのTIF形式でスキャンしました。綺麗にスキャンできるならJPEGでも良いと思います。 Photoshopでの作業 次に、Photoshopでの作業に移ります。 余計な部分の除去 そのままス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
便利すぎ！Bootstrapベースのデザインカンプ作成がびっくりするほど簡単にできてしまうPhotoshopの機能拡張 -Bootcomp
HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント
新着記事
フラットなデザインに効く30種類のUIパターン、PhotoshopやSketch用などが揃った商用利用無料の素材 -Awesome UI Kit
新着記事
Flipsblog.jp
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
新着記事
