9月22 JavaScript で PSD Parser を作り始めました はじめに JavaScript で PSD ファイル (Photoshop Document) をパースする psd.js というのを作り始めました。 以下のURLで公開しています。 https://github.com/imaya/psd.js psd.js と聞いて、なんか前に聞いた事あるって言う人もいると思いますが、以前話題になった psd.js は Twitpic へ譲渡されたあと GitHub で公開しなくなったようなので、３日ほどでまったく新しく作り始めました。 現在できること まだざっくりとしか実装していません。 基本的な parse Image Data, Channel Image Data からキャンバス生成 未実装の部分はすごく大雑把にデータを切り出しているだけです。 将来的にやりたいこと ブ
こんにちは、デザイナーの王です。「とりあえずタイトルに興味を持ったけどいまいちピンとこなかった」という方もいるのではないでしょうか。 ずばり、Photoshopのスクリプト機能を利用して、表題の作業を自動的に処理させるということです。僕みたいな怠け者で楽をしたい人にはぴったり！ 今回主に紹介したいのは自作のスクリプトで、Webに特化した作業を簡単にしてくれます。 ダウンロードはこちら（ダウンロードが開始されます）： https://liginc.co.jp/demo/2012/09/PhotoshopScripts.zip スクリプトを使うには？ まずはスクリプトの使い方について説明していきます。 スクリプトをダウンロードし解凍したら、拡張子が「jsx」のファイルが幾つか入っていると思います。それらを下記のフォルダにコピーし、PCを再起動させます。 Windows：PhotoshopPre
数週間前から、「Adobe Photoshop CS6 は写真合成機能が大幅に向上している」という報道を見ることが多くなってきました。 例: GIZMODO しかし、Webデザインに関係ありそうな部分といえば「段落スタイル」と「パフォーマンスの向上」くらいで、これはスルーした方がいいかな…と思っていたのですが、試しに CS6 Windows 版のベータ版を使ってびっくり。Webデザインに関連する部分も大きく進化していました。 正直、「これは買い」だと思っています。 この記事では、私がこれまでに見つけた Adobe Photoshop CS6 の Webデザインに関連しそうな部分の変更点についてまとめています。 一部、私のWebデザインスクール の生徒の方が見つけたものもあります。この場で御礼申し上げます。 ※この記事は Photoshop CS6 ベータ版（Windows版）をもとに書かれ
色んな Webサイトを見ていると、1px にこだわって作られたキレイなデザインがたくさんあります。私は Photoshop を使っているので、Photoshop のレイヤースタイルを使って、1px の細かい所を作る Tips をまとめてみました。基本的な操作ばかりなので、これから Photoshop で Webデザインをやってみたいなーという人向けの記事です。 色んな素敵なデザインの Webサイトを観察していると、1px の細かいところまでこだわって作られてるデザインってとても多いですよね。1px … Webデザインでは一番小さいサイズ。「神は細部に宿る」という言葉もあるけれど、1px までしっかり作られたグラフィックはとても美しいですね！ 今回は Photoshop を使って、いろんな 1px を作ってみました。とは言っても難しいグラフィックデザインを作るわけではなくて、レイヤースタイル
Webデザインにおけるメインのデザインツールとして多く使われているPhotoshopとFireworks。我々の業界内において、どちらの方がデザインツールとして便利か、という議論がよく行われますが、いずれか一つしか使いこなしていないユーザによる比較論ではあまり意味がないでしょう。日頃から使いなれているツールの方が使いやすい、と感じるに決まっているからです。ここで参考になるのは、両方のツールを同等に使った経験を持ち、かついずれにも過剰なこだわりや愛着を持ってないデザイナーの声なのではないでしょうか。 実は私自身はもともとPhotoshopでWebサイトのデザインを作っていました。しかし以前勤めていた会社でFireworksを使っていた人が多かったため、あるプロジェクトで一時的にFireworksを使ってみたところ、色々な面でFireworksの方が優れていると感じ、Fireworksに乗り換
アドビは世界を変えるデジタルエクスペリエンスを提供しています。アドビのクリエイティブ、マーケティング、ドキュメントソリューションは、新進アーティストからグローバルブランドまでのあらゆるデジタルコンテンツを適切なタイミングで適切な人に提供することで最高の結果の実現を支援します。
大量の画像を書き出す場面に遭遇して( ꒪⌓꒪)ってなるのはWEB屋の宿命のようなものですが そんな書き出しを一瞬でもはやくやっつけたい。 むしろやりたくない。なにもかも機械に任せたい。 機械がやってくれてる間にはとサブレ食いながら優雅にFaceBookをたしなみたい。 そんなめんどくさ効率を追求するために調べたまとめです。 なにかお役に立つものがみつかればうれしいです。 書き出しをとにかく速くしたい スライスチップ作成パレット スライスチップ作成パネル-CS4用 | Dearps スライスがFireworksみたいになるエクステンション。ほんとうに助かってます。 ワンクリックでスライスができるのでガイドつくってちまちまやるより数倍速いです。 Flash Helper Scripts Flash Helper Scripts：JavaScriptで「Flash＋Photoshop」連携をパワ
Today's PSD download is clean and modern 60 editable web buttons for website projects. The huge pack of 60 call to action buttons come in Photoshop PSD format and PNG format. The font used in the buttons is Arial, an easily available font in every system, and you can customize the font and text including size and color. Each layered button folder is named and organized for easy identification and
AstroでPandaCSSを使ってみるAstroを触ってみようかな？ と思い、まずは公式のチュートリアルを一通り終わらせてみました。以前から気になっていたPandaCSSの勉強も…と思ったので、AstroでPandaCSSを使ってみることに。PandaCSSのインストールマニュアルを見ながら各種設定を終え、npm run devしてみても、CSSが反映されず。原因は単純なミスでした。 LaravelでjQueryを使ってみるデータベースに登録、更新、削除を行なった際に、簡単なflashメッセージを表示させてみようかと。一定時間が経過 or ボタンクリックでメッセージが消えるアニメーションを、jQueryで実装してみたいと思います。npmを使ってインストールしたjQueryを使うと、javascriptの実行順が意図しないものになってしまい、jQueryが実行されなくなってしまいました。色
フォトショップのグラデーションファイルは作業を早めるのに役立ちますし、テンプレートだと色の参考にもなります。PhotoshopやGIMPの色合いが美しいグラデーションを厳選してまとめました。 追記: 2010/12/04 グラデーション追加/リンク切れチェック Photoshop Gradients Nice photoshop gradient set Download Source Web 2.0 Photoshop gradients Download Source Ultimate Web 2.0 Gradients - FREE Download Download Source 黄金比グラデーション・白銀比グラデーション | DesignWalker Download Source 日本の伝統色グラデーションファイル | DesignWalker Download Source
制作・文 三浦 悟（Sunny Sizes） url http://www.sunnysizes.com/ 使用ソフト Photoshop CS/CS2 最初に、紙にダーマトで矢印や塗り面を描き、スキャンする。続いて、これをPhotoshopで開いたら、イメージメニュー→“色調補正”→“2階調化...”で、ダーマトで描いた部分のみが強調されるようにした1-1。ここで、背景レイヤーのサムネールをoptionキーを押しながらクリックして、レイヤーに変換しておく。 1-1 次に、選択範囲メニュー→“色域指定...”で、白い部分をスポイトで指定して選択範囲を作成。このとき、白い部分全体に選択範囲が作成されない場合は、［許容量］の値を上げて調節しよう。ここでdeleteキーを押して、ダーマトで描いた部分以外を削除した2-1。さらにそのまま選択範囲を反転し、白で塗りつぶした2-2。ここではわかりやすい
This is my second article about about advanced Photoshop techniques for web designers. In case you missed my previous article, we have already covered buttons, navigation, shadows and a few other useful techniques. In this article we look at how to create fold and light Effects as well as 3D elements. This is going to be a long tutorial so grab your favorite biscuits and cup of tea and let’s get s
こんにちは。きんくまです。 今回はPhotoshopの拡張パネルをFlashで作れるPhotoshop Panelについてです。 以前の記事はこちら >>[Photoshop] Photoshop用のswf拡張パネルを作ろうとしたらAPIが3種類もあって迷った件 まずはswcをダウンロード >> Photoshop Developer Center 上のページからPhotoshop Panel Developer’s Guideをダウンロードします。 今回のエントリは上のファイルの中に入っていたチュートリアルのままのせていきます。 jsxを作成 ExtendScript ToolKitを立ち上げて、以下を入力します。 ファイル名は「ShortcutButtons.jsx」にします。 ExtendScript ToolKitは別になくてもテキストエディタでも問題ないと思います。 その際は文字
98125356/ iStockphoto/ Thinkstock かっこいいアイコンを自分で作りたい。 そんなときに参考になるのが、『35 icon design tutorials in Photoshop and Illustrator』。クオリティーの高いアイコンデザインチュートリアル集です。 Photoshopと、illustratorのチュートリアルがたくさん紹介されていますね。かなり細かく解説されているのでわかりやすいのと、psd、ai(eps) ファイルがダウンロードできるものもあります。 How to Make a Professional Buddy Icon in Photoshop Photoshopでスーツ姿の男性のアイコンを作るチュートリアル Icon design tutorial:How to make a Calendar icon iCalのような、カレ
支給されたロゴがビットマップのみで、かつ背景が透過されていないといったケースがあります。 トレースしようにも解像度が低くてムリ、こんなときに使えるテクニックをご紹介します。 この記事の元ネタは、CreativeTechs Tips » Isolate a Logo on a Transparent Background.です。 斜体の「背景」レイヤーになっている場合には、レイヤー名をダブルクリックして「レイヤー0」に変更します。 ロゴの透過を確認するための新規レイヤー（レイヤー1）を作成し、適当なカラーで塗りつぶします。「レイヤー1」は「レイヤー0」の下に移動します。 「レイヤー0」のサムネールをダブルクリックして、［レイヤースタイル］ダイアログボックスを表示します。［ブレンド条件］の「このレイヤー」にある白いスライダーを左方向にドラッグします。 「レイヤー0」の白地が透けますが、フリンジ
photoshopでWEBを作る人のためのWEBデザインチュートリアル「20 High Quality Photoshop Web Design Tutorials」 WEB制作は人によって使うツールは様々だと思いますが、その中でも多くのWEBデザイナーが利用しているツールphotoshop。今日紹介するのはphotoshopでWEBを作る人のためのWEBデザインチュートリアル「20 High Quality Photoshop Web Design Tutorials」です。 Create a Clean and Classy Web Design in Photoshop 様々なデザイン感のWEBデザインをphotoshopで制作するのはどうしたら良いのかという、実例を交えたチュートリアルが多数公開されています。 詳しくは以下 ■Awesome Portfolio Design ポート
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く