目次
カットツール
カットプラグイン
cutterman
css3ps
SLICY
PSD to HTML
オンライン画像カットソフト
プロの画像カット Web サイト
概要
参考
ホームページ ウェブフロントエンド htmlチュートリアル 切削ツール/プラグイン紹介_html/css_WEB-ITnose

切削ツール/プラグイン紹介_html/css_WEB-ITnose

Jun 24, 2016 am 11:25 AM

カットツール

カットプラグイン

ここでのプラグインはすべてPSプラグインであり、比較的小さく、インストールと適用が簡単で、非常に柔軟です

cutterman

はプラグインですこれは Photoshop で実行され、必要なレイヤーを自動的に出力できるため、従来の手動による「Web で使用される形式のエクスポート」や、スライス ツールを使用して画像を 1 つずつ切り取るという面倒なプロセスを置き換えることができます。 さまざまな画像サイズ、形式、形状出力をサポートしているため、PC、iOS、Android などで簡単に使用できます。 たくさんの文法やルールを覚える必要はありません。クリックするだけで簡単にダウンロードできます

css3ps

非常に便利な Photoshop プラグインです。必要なレイヤーを選択し、プラグイン ボタン をクリックすると、レイヤーにオーバーレイされるスタイルが自動的に生成されます。グラデーション、境界線、影、テキスト関連、背景、背景色、角丸などが含まれます。これらの値を自分で書き込んだり、設定を 1 つずつ調整したりする必要はもうありません。生成されたスタイルは新しい Web ページで開きます。 (実際には、クリップボードに直接生成する方が良いです)

実は、phtotshop の cc バージョンには、CSS をコピーする機能が付属しており、レイヤーの CSS スタイルをクリップボードにコピーして貼り付けて使用することができます。しかし、実際に使ってみると、内部には冗長なスタイルがたくさんあるので、手動で削除する必要がありますが、これはまだ少し面倒です。興味のある学生は試してみてください

をクリックしてダウンロードしてください

SLICY

です。カッターマンに似たツール。オプションのレイヤーとグループのエクスポートをさまざまなサイズにエクスポートできます。現時点では Mac でのみ使用できるため、必要な写真を簡単にエクスポートできます。 公式ウェブサイト

PSD to HTML

PSD to HTML をクリックしてください。説明は非常に優れていますが、興味のある学生は購入して試すことができます。 49 ドルなので高くはありませんが、まあ、買えません。

オンライン画像カットソフト

ここで紹介するソフトは全て無料ソフトです 有料ソフトはかなり高価なので使用できません。 いくつかの小さな PSD ファイル (約 2,000 万と推定されており、4,000 万のページをアップロードするとクラッシュします) をアップロードしたり、オンラインで写真を切り取ったり、HTML や CSS を生成したりできます。

psdtoweb は、これまでで最も自動化された画像切り取りソフトウェアとして知られており、プロセス全体の操作が非常に簡単で、最大 80 MB のファイルをアップロードできます。小さいファイルを使ってみたのですが、30MBくらいのファイルをアップロードすると解析中に止まってしまったり、画像を切り取った後のラベルがdivやimgが中心になったりと理想的ではありませんでした。

psd2html コンバーターは非常に優れており、html と CSS を自動的に生成します。自動化の度合いは比較的高く、いくつかのシンプルな構成をサポートしており、ソースコードをプレビューして表示することもできるので、自動的に試すことができます。もちろん、コードをダウンロードしたい場合は、各 psd に対応するリソースをダウンロードするのに 3.50 ドルかかります。

PSD 2 CSS Online を試してみました。約 10MB の PSD ファイルは処理できますが、それより大きなファイルは正常にアップロードできません。小さな psd 処理の結果も理想的ではなく、div タグと img タグが大部分を占めます。

jadii は比較的便利でエレガントなウェブサイトのようで、操作プロセスも非常に簡単です。ただし、PSD をアップロードすると、Web サイトから返される HTML と CSS が空になります。マーク、機会があったらまた行って見てみます。

プロの画像カット Web サイト

psd2html は、タスクを引き受けて手動で画像をカットするオンライン Web サイトです。試したことはありませんが、プロが作るはずですが、非常に高価なので、自分でカットしたほうがいいかもしれません。お金持ちはやりたいことを自由にやることができます。

概要

  • 自動化が進んだソフトウェアはカスタマイズが少なくなります。しかし、現在のソフトウェアでは、レイアウト、タグの区別、DOM レベルの処理など複雑なことはできません。最終的には、ソフトウェアによって生成されたものは、ユーザーが自分のニーズに応じて変更する必要があります。図を自分で切り取るのが良いのか、それともソフトウェアに切り取って再構築させるのが良いのか、具体的な比較はありません。個人的には前者の方が好きです。小さなプラグインを使用すると効率が大幅に向上します
  • 小さな画像切り取りソフトウェアはより柔軟で実用的ですが、大きなプラグインでは依然として処理能力に制限があります。有料ソフトであっても、あまりオススメのソフトは見たことがありません
  • ソフトを使用する際には、ソースファイルのレイヤー名、グループ化、レイヤー分割方法など、ソースファイル psd の要件があります。この作業は 1 人で行うのが最善であり、一緒に作業する 2 人の間で明確な合意が必要です

参考

  1. PSD から HTML/CSS への変換のための無料オンライン ツール
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

WebページのPNG画像にストローク効果を効率的に追加する方法は?

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

< meter>の目的は何ですか 要素?

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか?

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

< datalist>の目的は何ですか 要素?

< Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

< Progress>の目的は何ですか 要素?

See all articles