ホームページ  >  記事  >  ウェブフロントエンド  >  フロントエンド開発を効率化する「ワンクリック画像切り取り」_html/css_WEB-ITnose

フロントエンド開発を効率化する「ワンクリック画像切り取り」_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:33:411669ブラウズ

「カット」作業者として、まず図面をうまく素早くカットする必要があり、図面のカットに多くの時間を無駄にすることはできません。

新しい会社に到着して間もなく、同僚がスライスツールを使って写真を切り取っているのを見ました。画像を適切に切り取るには、画像を n 倍に拡大する必要がありますが、同時に、無駄な画像が大量に生成される可能性があります。面倒!

初めて写真をカットしたときに、友人のデザイナーから「ワンクリックカット」のテクニックを教えてもらって良かったと思います。写真を選択したら、F2 を押すだけです。絵は素直に丼に入ります!

ここにアイデアがあります: 複雑な操作プロセスを単純な Photoshop の「アクション」として記録します。

クイックチャンネル

【ダウンロード】そっとクリックするだけで「ワンクリック画像カットアクション」をダウンロードし、そのアクションをPSにロードして簡単に実行できます。

アクションをロードする方法を知っている場合は、PS で直接使用できるため、これ以上読む必要はありません。

デモ 1: アクションの読み込み

次のデモは、Photoshop cs6 にアクションをインポートするものです

[ステップ] メニュー バー?>ウィンドウ?>アクション

この手順に従ってアクション パネルを開き、アクション パネルの右上隅をクリックしますパネル (図の赤い部分) ボックス) をクリックすると、ドロップダウン メニューが表示され、[アクションの読み込み] を選択し、ダウンロードしたばかりの [ワンクリック画像切り取りアクション] を読み込みます。わかりました!

2: ワンクリック画像カット効果のデモンストレーション

「ワンクリック画像カットアクション」を正常にロードした後、F2 を使用してワンクリックで必要な画像をカットしてみることができます。

任意のPSDを開くと、デモは次のとおりです

[ターゲット] 写真の「ハート」を切り取ります。

【手順】

1. 図の左上にあるように、「移動ツール」で「自動選択」にチェックを入れ、「レイヤー」を選択します。

2. レイヤーパネルで「愛」の小さなアイコンをクリックすると、愛に対応するレイヤーが配置されていることがわかります。

3. レイヤーの前の小さな目をクリックし、「愛」が隠れているかどうかを観察して、本当に愛を選択したかどうかを判断します。

4. 次に、奇跡を目撃する瞬間が来ます。F2 をクリックすると、以下に示すように、小さな愛のアイコンがボウルの中に表示されます。

最後に、使い慣れた方法を使用して「Web 用の形式で保存」します。この項目はメニュー バーから見つけることができます。私がよく使っている方法は、ctrl+shift+alt+s の 4 つのキーを同時に押すことですが、これは非常に強力な操作のようです。もちろん、この記事で説明したアイデアを使用して、この単純な操作をアクションとして保存し、ショートカット キーを使用してすべてを実行することもできます。

【結論】 これから母は私のカットの心配をしなくて済みます。理想的には、この記事がアイデアやインスピレーションを提供できれば幸いです。複雑な PS 操作を単純なアクションのショートカット キーとして記録します。

[添付ファイル] では、誰でも選択できる 2 つのアクションが提供されます。

1. ワンクリック画像カット (「ワンクリック画像カット」アクションのみを含む)

2. アジャイル開発 (「ワンクリック画像カット」アクションおよび「ワンクリック Web 形式で保存」を含む) action)

元の記事、転載元を明記してください: Rang Zhou Fei [http://www.cnblogs.com/rangzf/]
この記事のアドレス: http://www.cnblogs.com/rangzf/p/3279848 .html

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。