海外のサイトでよく見かけるレタープレスのエフェクトを実装するスタイルシートをLINE 25から紹介します。 Create a Letterpress Effect with CSS Text-Shadow demo レタープレスのエフェクトはCSS3で実装されているため、デモはSafari3, Firefox3.5などCSS3に対応したブラウザでご覧ください。 HTMLとCSSはシンプルです。 HTML
海外のサイトでよく見かけるレタープレスのエフェクトを実装するスタイルシートをLINE 25から紹介します。 Create a Letterpress Effect with CSS Text-Shadow demo レタープレスのエフェクトはCSS3で実装されているため、デモはSafari3, Firefox3.5などCSS3に対応したブラウザでご覧ください。 HTMLとCSSはシンプルです。 HTML
TOP > Design , Photoshop > 写真補正の手間を軽減してくれるphtoshopアクション集「30 Photoshop Actions for Touch Ups」 以前Designdevelopで「写真を美しくするphotoshopアクション60選「60 Photoshop Actions for Photo Touch-Ups and Enhancements」」と言う記事で紹介したアクション集のpart2に当たるエントリー「30 Photoshop Actions for Touch Ups」を紹介したいと思います。 50 Photoshop Postwork Actions 今回もちょっとした手間の部分を簡単にできるアクションが全部で30用意されています。今回も紹介されているアクションの中から気になったアクションをピックアップして紹介したいと思います。
Photoshopには拡張機能(エクステンション)をユーザーが独自に実装できる便利な機能があります。 これらの機能を積極的に利用して、無駄な作業時間を短縮しましょう。 実際に仕事で多用しているオススメのエクステンションを紹介します。 CanlinkitはPhotoshopレイヤーに他のPSDファイルを、スマートオブジェクト化して配置出来る便利なエクステンションです。 ヘッダーやバナーエリア、ナビゲーションやフッターなどサイト全般の共通部分などをテンプレート化しておけば、複数ページの面倒なデザイン変更などを一括で行えます。 更新作業の多い案件や修正の多い案件では非常に強い見方です。 下記にちょっとした使い方を紹介します。 配置したいファイルを読み込もう たとえば下記のようなコンテンツページにヘッダーを読み込ませたい場合。 コンテンツページのPSDファイルを開いた状態で、CanLinkItのウ
PNG EXPRESS レイヤーのPNGへの自動書き出しとデザインの設計仕様の表示が出来る高機能エクステンション PNG EXPRESS http://www.pngexpress.com/ PNG EXPRESSは、任意のレイヤーまたはグループのpng画像への書き出しと、デザインの仕様(オブジェクトの位置、オブジェクトの幅や高さ、フォント名・スタイル・サイズ行の高さや色、レイヤー間のマージン等)の表示が出来る高機能なエクステンションです。 予め命名規則にそってレイヤーを構成しておくことによって、PSDファイル内のオブジェクトをワンクリックでエクスポート出来ます。 シェアウェアで$29で販売中です。 簡単な使い方 PNGへの書き出し まずはPNGに書き出したいレイヤーまたはグループにタグを入れ定義する必要があります。 タグは下記のような感じになっており、レイヤーまたはグループ名の頭に追加し
こんにちは、さち です! 今回は、Photoshop Elements に レイヤースタイルを追加する方法を紹介します。 では、さっそくその方法を見ていきましょう! レイヤースタイルを手に入れる レイヤースタイルは自作もできますが web上には高品質なものが無料公開されています。 今回は例で DesignWalker 様で公開されている 「42 Button Layer Styles」 を使用します。 → ボタンに使えるPhotoshopレイヤースタイル42種類 (DesignWalker 様) DesignWalker 様では 他にも多くのレイヤースタイルが紹介されています。 → Photoshopレイヤースタイルいろいろ (DesignWalker 様) レイヤースタイルを追加する Photoshop Elements 「7.0」「6.0」「5.0」の各バージョンで レイヤースタイルを
##photoshop と front の仕事 frontend の仕事をしていると photoshop から画像を切り出してポジションを出すという作業が 少なくない機会訪れるでしょう。 ##position の割り出し方 この作業は非常に面倒。 楽したいなら、プラグイン とか、 sketch を使うとか いろいろ手はあります ##昔ながらの絶対座標なケース 時には絶対座標でレイアウトするとかってケースは多々あります。 こういうときに欲しいツールがない。。。 ならば自作だ!!! #photoshop plugin つくりましょうよ jsx photoshop の preset/scripts のフォルダにファイルを打ち込めばok #ソースコード これは自分用なので結構汚いし、用途があれですが、、、 全てのレイヤーのポジションを網羅していくスクリプトです。 でそれをテキストファイルに書き出し
2014年10月17日2018年2月24日photoshop, WEB制作 水に関するphotoshopのブラシをまとめてみました。 素材集などから合成したり自作でブラシを作ったりするのもいいですが、フリーのブラシを使用すると作業効率も上がるし表現の幅も広がります。 使い方によっては人物合成の際のエフェクトに使ったり、グランジデザインなんかに役立つのでダウンロードしておきたいところですね。 無料のブラシをまとめていますが、商用利用可などのライセンスは明記されていない所もあるので、都度ご確認ください。 ※画像クリックで拡大表示、配布先へのリンクはテキストリンクです。 水滴、水しぶきなどのブラシ Water Brushes Vol. 2 | Webdesigner Lab Water Brushes Vol. 2 Water Brushes VOL3 Water Brushes VOL3 Sp
2014-01-11 Photshopのレイヤーパターンを自分で作る方法 最近外と冷蔵庫の中が同じ温度になっている気がします。それくらい寒いってことです。どうも、つもまー(@tsumomah)です。 今回はPhotoshopで使うパターンの作り方について話します。 Webサイトでも見る背景が水玉模様(ドット柄)ってどうやっているの?こんな疑問あったと思います。いちいち円を描いていくなんて手間は撮りたくない!わかりますよ、その気持ち! 背景の見せ方ももちろん大切です。しかし、案件となるとボタンなどアイコンやナビ、コーディング・・・とやることがたくさんあります。いかにサクサク作業していくことが重要になっていきます。 ■Photoshopのレイヤースタイル 少し話しはズレますが、こういった作業効率化+デザインの見せ方の幅のひとつとしてレイヤースタイルというものがあります。 これを使うことによって
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く