格子模様を作成する (Photoshop Tips)
Photoshopで格子模様を作成する手順を紹介します。 概要 格子模様の作成の方法は何通りもありますが、ここでは、パターンを作成し「塗りつぶしツール」でパターンで塗りつぶす方法で格子を作成します。 手順 はじめに、格子のもととなる正方形の画像を作成します。 全体を選択します。 [編集]メニューの[境界線を描く]を選択します。 「境界線」ダイアログボックスが表示されます。格子の線の幅となる数値の半分を入力します。下図では4を入力していますので、幅8pxの格子が出来上がることになります。位置は選択範囲の内側とします。 境界線が描画できました。 再度全体を選択し、[編集]メニューの[パターンを定義]を選択します。 パターン名ダイアログが表示されますので、パターン名を入力し[OK]ボタンを押します。 続いて、作成したパタンで塗りつぶしをします。ツールボックスから[塗りつぶしツール]を選択します。
PhotoShopのレイヤーから画像とHTMLとCSSを出力するJSX | KnockKnock
久しぶりの更新になります。今回はWebGLから離れて、仕事の効率化に関してのネタになります。 以前ですが、PhotoShopをFlashに読み込む（インポートする）JSXとJSFLという記事を投稿しましたが、今回はPhotoShopから画像とHTMLとCSSを出力するJSXを作りました。 PhotoShopから画像を出力するツールとしてはMacではSlicyが有名ですが、画像出力に関しては似たようなイメージです。 ちなみにJSXとは、Photoshopを制御するJavaScriptAPIを実行するためのJavaScriptファイルの事をいいます。拡張子は.jsxです。 詳しく知りたい方向けに、参考にさせて頂いたサイトをピックアップしました。 Adobe Photoshop Scripting Adobe公式のドキュメント API Documentation（com.adobe.photos
フォトショップの作業が楽になる、覚えておきたい小技テクニック29選
2018年8月5日に公開された記事を、サムネイル画像など再編集、アップデートしています。 フォトショップの作業が速くなる秘訣は、ずばりショートカットキーによる時短テクニック。 その理由は、「もっと早く知りたかった」と思うほど、ラクラクな手軽さで、面倒な作業をすぐに片付けてしまうから。 「レイヤーの重なり順を変えたい」 「細かい部分の作業を行いながら、同時に全体表示で確認したい」 「不要なレイヤーを非表示にしたい」 そんな普段からよく行う作業も、効率アップさせる時短テクニック18個が揃いました。 フォトショップがもっとうまくなりたいと思っている人こそ、まずは試してみませんか。
Photoshop内でFont Awesomeを使えるようにする・「Font Awesome PS」
Font Awesome PSはPhotoshopでFont Awesomeを使えるようにするエクステンションです。Adobeが投稿したものとは異なるエクステンションの様です。Photoshop CC 14.2とPhotoshop CC 2014に対応との事。エクステンションマネージャが最新である事を確認してからインストールして下さい。 Font Awesome PSインストールの手順
レスポンシブを前提にしたPhotoshopでのカンプ作成、ちゃんとできてますか？ - Tortoise Shell
レスポンシブを前提にしたカンプ作成、ちゃんとできてますか？ 変化の激しいWeb業界では、技術的変化やトレンドに合わせて現場でのワークフローも変わり続けています。 数年前まではPhotoshopやFireworksでしっかりとカンプを作りこんでスライスを切って、やっとコーディング…という流れでしたが、これも通用しなくなってきています。 今更書くまでもありませんが、今日ではエンドユーザーがWebを閲覧する環境も多様化しています。 そうすると、従来のデバイス毎にがっちりとカンプを作りこんで管理しておくというワークフローは無理が出てくるわけです。 今求められているのは、どのような環境からアクセスしても快適にコンテンツを見ることができるような、スケーラブル（拡張性のある）なレイアウトなのです。 そこで、カンプ作成の段階でもレスポンシブを前提としたワークフローの導入が必須になってきました。 とはいえ、
Photoshopスクリプトをつかって楽チン作業 - entacl Lab.
Phosotopの機能にある「スクリプト」機能使っていますか？スクリプト自体はWeb等で無料配布されているものも沢山ありますので、有効的に活用することで作業効率を図ることができると思います。 Photoshop作業効率の決定版 Photoshopスクリプト Photoshopスクリプト使っていますか？ 以前に「コマンドを使って作業効率をアップしよう」でFlashの「コマンド」を紹介しましたが、同様なものがPhotoshopにも存在します。あらかじめ登録しておいたスクリプトを実行させることで複雑な処理を一瞬で処理してしまう。のですね。 「そんなもん言われなくても使ってる」な方はスキップ対応でお願いします。 が、初耳な方は是非ともこの機会にスクリプトを試してみてください。 スクリプトを使ってどんなことができるの？ スクリプトは自作するという方法ももちろんありますが、ここはひとつgoogle先生
Photoshopの整列あれこれ（キーボードショートカット、キーオブジェクト、等間隔に分布、指定間隔で分布）｜DTP Transit
Photoshopは元々オブジェクトベースで何かするアプリではなかったので、整列に関しては次の点で弱かったりします。 パネルでなく、オプションバーなので、状況によっては表示されない キーボードショートカット：デフォルトでは設定されていない キーオブジェクト：できなくはないけれど面倒い カンバスの中央（や端）に整列：できなくはないけれど面倒い 等間隔に分布：（なぜか）スクリプトを使わないとできない 指定間隔で分布：スクリプトを使わないとできない 整列コマンドのキーボードショートカット Photoshopで整列を行うには、オプションバーのボタンを利用します。 しかし、長方形などのライブシェイプを［パスコンポーネント選択ツール］（黒い矢印）で選択すると、オプションバーではグレーアウトしてしまいます（［レイヤー］メニューの［整列］からなら、なぜか実行できる）。 そこで、整列にキーボードショートカッ
HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント
デザイナーに注意してもらう10のポイント さて、このExtractサービスは、クラウド上のコンピューターがPSDファイルを解析してさまざまな情報を取り出す仕組みなので、当然のことながらコンピューターが読みやすいようにPSDファイルを作る必要があります。乱暴に作られたPSDファイルでは、さすがのExtractサービスも価値ある情報を提供できません。 では、コンピューターが解釈しやすいPSDファイルとはどんなものか、具体的に見ていきましょう。 1. レイヤーは階層化して整理 人間にとっても、機械にとっても、レイヤーは整理されていたほうがよいに決まっています。 Extractサービスによる画像の切り出しやCSSの生成、計測などは、レイヤー（またはレイヤーグループ）ごとに行われます。複数のレイヤーからなるパーツは、レイヤーグループにまとめてもらいましょう。Extractサービスを使えば、複数のレイ
tychpanel — Lumens bröllopsfotografi och bröllopsfilm
What is Tych PanelTych Panel is an extension for Adobe Photoshop that automates diptychs and triptychs creation. It supports an arbitrary number of layouts using a powerful row/column compositing paradigm. Together with a super easy panel interface, Tych Panel is the ultimate diptych, tripych & ntych automation tool. Tych Panel is released as open source and licensed under the MIT license.
デザイナーが確認しておきたい、デザインリソース完全ガイド 2016年度
オンラインホームページ作成ツール Webydo で働いている現役デザイナー達が、普段からよく利用している、作業を楽にするオンラインツールやリソース75個をまとめています。 ウェブサイトでよく利用する写真の見つけ方や最適化方法から、アイコンやフォント、配色などデザイナーが一度は困ったことのある問題を解決してくれる凄腕ツールが揃っています。現在の制作フローに活用し、より快適な作業を実現しましょう。 コンテンツ目次 イメージ画像・ビデオ動画の関連ツール アイコン関連ツール 書体、フォント関連ツール 配色カラーツール モックアップ＆プロトタイプツール ウェブサイト制作ツール コラボレーション、作業効率ツール デザインコミュニティーサイト オンライン・ラーニング、スクール イメージ画像・ビデオ動画 ShowBox – ブラウザ上からスタジオ制作されたような、高品質なビデオ動画を作成できます。 Cov
【スライス不要】Photoshop画像アセット生成の基本とつまずきがちな5つのコト | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
独学でつまずいていませんか？ Photoshopの使い方を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） スライスせずに書き出せるPhotoshopの「画像アセット生成」って？ 画像アセット生成とは、ファイルのレイヤーやレイヤーグループのコンテンツからJPEGやPNG等の画像アセットを生成するという、スライス作業を不要とする機能です。PhotoshopCCから実装されている機能で、CC2014以降は画像に加えてSVGの書き出しも可能となりました。 普段からコーディングもしているデザイナーさんは効率化のために早くから使ってい
Photoshopの作業効率をアップする便利すぎるエクステンションのまとめ
最後の一つだけ有料ですが、あとは全部無料の便利すぎるPhotoshopのエクステンションを紹介します。 ガイドや角丸の作成もレイヤー管理・パーツ管理も今まで以上に楽になるはず！ ガイド引きの効率アップ -GuideGuide 角丸の作成も修正も簡単にできる -Corner Editor PhotoshopのレイヤースタイルをCSS3にする -CSS3Ps レイヤー周りの機能を強化する -12 Pro Photoshop Time Savers 複数の画像で雑誌風のレイアウトを作成 -Tych Panel よく使うパーツを格納できる -Pixel Dropr ガイド引きの効率アップ -GuideGuide レイアウト用のグリッドを設計したり、エレメントの中心をだしたり、余白を確保するのに便利なエクステンション。 GuideGuide（無料） 対応バージョン Photoshop 2.0.3(f
Adobe CC2015にzxp形式の拡張機能をインストールする
CC2015からはCC2014まで使っていたAdobe Extension ManagerによるインストールがDeprecatedになり、直接的なzxp形式の拡張のインストールが出来なくなってる。 For CC 2015 and later, you can no longer install Add-ons directly using Extension Manager. Users must install through the CC Desktop App. Product Migration to Adobe Add-ons IMPORTANT: Extension Manager Deprecated Extension Manager is obsolete in CC 2015. CC 2015 users MUST NOT use Extension Manager C
Distribute Horizontal | Morris PhotoGraphics
This script distributes all selected layers horizontally, so that the layers are evenly spaced. To download this script, right-click (Ctrl-click on the Mac) on the appropriate version below, and choose "Save Target As". Distribute Layers Horizontally Version: 0.2.0 (April 17, 2011) Download for: Photoshop CS3+ Download the script and copy it into your "Adobe Photoshop CS#/Presets/Scripts" folder.
オリジナリティ満載＆ポップなダーク系ポートフォリオ用ウェブデザイン40個まとめ
自分のスキルや制作実績をクライアントなどに見せる場合にポートフォリオサイトがあると便利です。 色使いなどのデザインセンスなどもそれぞれ異なり、見ているだけでもたのしくなってきます。 海外デザインブログInspiiiredで、ダーク系でまとめられたポートフォリオデザインを40個まとめたエントリー「40 Kick Ass Dark Portfolio Websites」が公開されていたので、今回はご紹介します。 レイアウト、枠組みなどをあまり意識せずに、思いのまま制作しているポップなデザインがたくさん紹介されています。 今後ポートフォリオサイトを作ろうと考えている方は、ウェブデザインの参考にしてみてはいかがでしょう。 詳細は以下かr。 ダーク系にまとめられたポートフォリオサイトまとめ Yummy Wakame なんともユニークなウェブサイト名となっていますが、背景にボケ(英: Bokeh)デザ
【Photoshop】初心者からの脱却!! スライスの効率を上げる４つの方法｜BLOG｜株式会社エムハンド
【Photoshop】初心者からの脱却!! スライスの効率を上げる４つの方法 新人コーダーにとって、スライス作業の効率化は一つの大きなテーマではないでしょうか。 かく言う私もまだ入社して間もなく、様々な方法で作業を行い、試行錯誤の中で効率よく作業を進めていく方法を模索しています。今回は、その中でも簡単に導入できて、実際に作業の効率化を図ることが出来た方法をご紹介していきます。 imagesフォルダが作成されないようにする初期設定では、スライスした画像を『web用に保存』で書き出すと、imagesフォルダを作り、その中に画像が保存されます。わざわざ、imagesフォルダから画像を移動させて、imagesフォルダを削除という作業はもうやめましょう。 方法1.書き出したい画像をスライス後、 メニューバーのファイル→書き出し→Web用に保存（ショートカットctrl+alt+shift+s）をクリッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
?utm_expid=80881555-0.QJWGp6K-TKiTJ3p8q1zLGQ.0
FontAwesomePS {FREE} - Font Awesome icons right inside Photoshop.
creativedo.co
https://morris-photographics.com/photoshop/scripts/downloads/Distribute%20Layer%20Spacing%20Horizontal%200-2-0.jsx