タグ

テクニックとPhotoshopに関するicicaのブックマーク (27)

  • Photoshopのパペットワープで自由自在に写真加工する方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは、デザイナーの白浜です。 今回はPhotoshopのパペットワープの機能をご紹介したいと思います。 「ググってわからないこと」が一瞬で解決するかも? Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します! ▼少しでも気になる方は、ぜひ公式サイトをご覧ください! ※2013年5月23日に公開された記事を再編集したものです。 パペットワープの使い方 レイヤーを選択して「パペットワープ」を選択 使い方は、該当レイヤーを選択して、「編集」→「パペットワープ」を押します。 するとこのようにメッシュ状の編集点が出てきます。 注:変形させたいオブジェクトは、切り抜いておいたほうがより正確な編集を行えると思います。 ここでメッシュを細かくすることもできま

    Photoshopのパペットワープで自由自在に写真加工する方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • photoshopで枠線つき吹き出しをつくるときのちょっとしたコツ

    ご存知の方も多いかもしれませんが、最近発見したので覚え書き。 吹き出しって三角の位置を微妙に修正することが多いと思うのですが、枠線つきの吹き出しって修正しづらくないでしょうか? ※作成・確認環境は、Photoshop CS6です 例えば自分が配布しているSVGの吹き出しもそうなのですが、三角の部分を移動したり大きさを変えたい場合、パスが全て連結されていて動かしにくかったりします。 三角の部分を動かすには、土台の図形と三角部分を別々にすると良いですね。 吹き出しの図形をそれぞれシェイプで描きます。 このとき、吹き出しの三角の方は、パスを閉じないようにします。 ※訂正です、パスは閉じても閉じなくても表示は変わりませんでした。 良く確認せず申し訳ありません…。 2つの図形をちょうど良いところで重ね、ショートカットキーの「Ctrl + E」で結合します。 (レイヤーのところで右クリック→「シェイプ

    photoshopで枠線つき吹き出しをつくるときのちょっとしたコツ
  • DreamweaverとPhotoshopを使い、神速でスライスする方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、高円寺のワーキングスペース「こけむさズ」さんで勉強会があると聞いて行ってまいりました。 講師は「神速Photoshop」の著者の一人・石嶋さんで、フォトショを使って、わりとぽっちゃりな人をかなりすっきりにするテクや、ガサガサの残念肌をツルツルの潤い肌にするテクなどを教わってきました。 「カワイイはつくれる!」ということを実感いたしました。 そこで教えてもらった中でも、 「DreamweaverとPhotoshopを連動させて超効率的にスライス&タグに埋め込むテク」がすごかったので、ご紹介させていただきます。 これを使うと、 とにかく早い 後からデザイン修正が発生した際、直すのが楽 シャドウがある画像でも正確に切り取れる などのメリットが!フォトショでもFW並か、それ以上に楽ができると思います。 そ

    DreamweaverとPhotoshopを使い、神速でスライスする方法 | 株式会社LIG(リグ)|DX支援・システム開発・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でWeb制作する前にやっておくといい設定8(CS6/CC含む) | Design Color
  • [Photoshop]パターンを使って破線・点線を簡単に描く方法 | サイブリッジラボブログ

    こんにちは。 デザイナーのYKKです。 今回は、Photoshopにでの作業効率がグンと上がる、 「パターン」についてご紹介致します。 凝ったものは自作するのが一番ですが、配布されているものを利用するのが便利です。 シンプルで使える!Photoshop パターン素材 – musign Simple Patterns http://www.trck4th.com/musign/2011/02/musign_simple_patterns.html 普通は模様(柄)として利用する為のパターンなのですが、 破線を描画したい時にも利用できます。 PhotoshopにはIllustratorのように破線を描く為のツールがありません。 かなり需要あると思うんですけどね。 Photoshopで破線を描くには、 ブラシの描画間隔を調整するやり方と、テキスト打ちの「——」を使用するやり方と大きく二通りの方法

    [Photoshop]パターンを使って破線・点線を簡単に描く方法 | サイブリッジラボブログ
  • 身につけておきたいWebサイト高速化テクニック #4|最適な画像書き出しの基本 | DevelopersIO

    みなさんこんにちは、クラスメソッドWeb担当の野中です。 昨日行われたAdobe MAXの発表でFireworksの新機能開発が終了 *1だそうですね。びっくりです。 さて、前回の身につけておきたいWebサイト高速化テクニック #3|画像形式の基礎知識では、画像の品質を保ちながらファイルサイズを抑えるためにそれぞれの画像形式の特性について紹介しました。 第3回でリクエスト数の削減について先に解説すると記載していますが、文章の構成を考えると画像の書き出しについて先に説明した方が流れとしてわかりやすいので順番を変更しています。 題 今回はPhotoshopやIllustrator、Fireworksを使った最適な画像書き出しの基的な手法について紹介したいと思います。 前回の記事で得た知識を前提に解説しますので、まだ前回の記事を読んでいない方は必ず読んでおいてください。 この記事の対象者 W

    身につけておきたいWebサイト高速化テクニック #4|最適な画像書き出しの基本 | DevelopersIO
  • Photoshopで人物の髪の毛を「境界線の調整」を使って簡単に切り抜く方法 | ページ 2 / 3 | 東京上野のWeb制作会社LIG

    こんにちは、デザイナー兼フォトグラファーのおまめ (@omame_creator) です。 今回はPhotoshopで写真を切り抜く方法、髪の毛のような細かいものをきれいに切り抜く方法、背景と馴染ませる方法を解説します。 どれも私が試して一番短い時間で簡単にできた方法なので、ぜひ試してみてください! 独学でつまずいていませんか? Photoshopの使い方を効率的に学びたい、プロのデザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい!」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2022年3月に編集部が情報を更新しました 「選択とマスク」を使って髪の毛を切り抜く方法 髪の毛を目立たせるため、強めになびかせた

    Photoshopで人物の髪の毛を「境界線の調整」を使って簡単に切り抜く方法 | ページ 2 / 3 | 東京上野のWeb制作会社LIG
    icica
    icica 2013/05/07