ブログのデザインの設定に多くの時間を費やしましたが、なぜ画像がスマートフォンで正しく表示されないのですか？ 高品質の画像を使用するようにしましたが、画像の状態が悪いと表示が修正されません。
多くの人は、新しいデバイス（特にアップルのもの）画像の表示方法に影響を与える高度なディスプレイ技術を使用して、コンピューター上だけでなくスマートフォン上でも正しく表示されるようにします。
このチュートリアルでは、「 網膜準備 また、Retinaイメージの作成方法も示します。
しかし、始める前に、時間をかけて見てください WordPressのテーマをインストールする方法, どのように多くのプラグイン私はワードプレスにインストールする必要があります.
それでは仕事に取り掛かりましょう。
画像の説明網膜準備
デバイスの画面は過去数年にわたって品質が向上し続けており、特にAppleの画面は、非常に鮮明で目に見えるようにするために多くの作業を行ってきました。 テクノロジー」Retinaディスプレイ特定の適性を備えた特定のタイプのディスプレイを表すために使用されるAppleのブランド名です。
網膜スクリーンの目的 肉眼で見えるピクセルなしで、テキストと画像をできるだけ明確に表示します。 設計者にとっての課題は、デバイスの画面サイズとユーザーの画面への近さによって表示が異なることです。
画面の物理的な幅を水平に表示されるピクセル数で割ると、XNUMXインチあたりのピクセル数（1インチあたりのドット数のpppとも呼ばれるppi）。 " 高DPI 200インチあたりXNUMXピクセルを超えるデバイスを指すために使用されます。 これには、すべてのディスプレイデバイスが含まれます」 網膜 （Appleから）、および他のメーカーからのいくつかのデバイス。
Photoshopで「RetinaReady」画像を作成する方法
2倍または4倍の解像度で画像を操作すると、細かい部分をすべて表示するにはズームインする必要がありますが、非常に重いファイルはパフォーマンスの問題とファイルストレージの問題を引き起こします。
ほとんどのデザイナーにとっての解決策は、複数のレイヤーを作成してグループ化し、必要に応じてアクティブ化することです。 関数「comps」の使用 » フォトショップ 元の解像度で作業し、必要なフォーマットをエクスポートする（「網膜化」のようなアクションを使用する).
これら2つの方法の課題は、複数の画像を同時に表示できないことです。 必要なサイズで画像の違いを確認する必要がある場合は、それらを切り替えるかエクスポートする必要があります。
Photoshop愛好家にとって幸運なことに、Adobeは複数の画像を簡単に作成できる機能を追加しました。 これで、特徴的なアートボードを使用して複数のキャンバスを並べて作成し、ジェネレーターを使用して複数の画像サイズを作成できます。 それがどのように機能するか見てみましょう。
1-最初のアートボードを作成する
で導入された新しいアートボードツール、 PhotoshopのCC 2015、移動ツールの後ろに隠れています。 メニューのツールをクリックするか、Shift + Vを使用して「」を切り替えることができます。 変位 "そして" アートボード »：
作業平面を作成するには、領域をクリックしてドラッグします。 新しいアートボードは、デフォルト名「Artboard1」でレイヤーパネルに表示されます。
また読みます： フリーランサーが毎日のスケジュールを必要とする理由
2-アートボードを構成します
必要なレイヤーをアートボードに追加すると、レイヤーがネストされます（適切なレイヤー構造を作成できます）。 次の手順に進む前に、シェイプなどのさまざまなファイルを追加して、希望どおりに配置することをお勧めします。
3-アートボードを複製する
最初のアートボードがニーズを満たすように設定されたら、コンテキストメニューを使用して複製できます。 レイヤー領域の「アートボード1」を右クリックし、「アートボードの複製」を選択します。 これにより、すべてのコンポーネントと同じ構造を含む、別の同様の「アートボード」が作成されます。
発見するには： WordPressの記事やページを複製する方法
4-ワークトップを配置します（アートボード）
アートボードを使用する大きな利点は、すべての画像を同時に表示できることです。 これを行うには、必要に応じてワークトップを配置するだけです。 これを行うにはいくつかの方法があります。
作業平面を選択したときに表示されるパネルを使用して、作業平面の左上隅のX座標とY座標を入力します。
選択したアートボードを、 フォトショップ。 アートボードはインテリジェントにアクティブ化されるため、複数のアートボードを自動的に位置合わせして、それらの位置を前の間隔に固定することができます。
キーボードの矢印キーを使用して、選択した作業面を移動します。
次のチュートリアルも参照してください。 WordPressでもう動作しないメディアライブラリを修正する方法
5-アートボードのサイズを変更します（必要な場合）
アートボードのサイズを調整する必要がある場合は、いくつかのオプションがあります。
- アートボードを選択したときに表示されるハンドルを使用してサイズを変更します。
- [ファイル]メニューのすぐ下にあるオプションパネルを使用して、プリセットサイズ、固定の幅または高さを選択するか、縦向きと横向きを切り替えます。
- ワークトップを選択したときに表示される[プロパティ]パネルを使用して、サイズを変更し、事前定義されたサイズにアクセスします。
6-アートを作成する
これで、カウンタートップを操作し、コンポーネントを交換し、必要に応じて変更を加えることができます。 元の設定が変更されていないと仮定すると、すべてのコンポーネントが適切な場所にあるピクセルパーフェクトな画像が得られます。
リストもご覧ください あなたのページを作成するには、システムのドラッグ＆ドロップで26ワードプレスのテーマ
7-「生成」ツールを設定します
« 生成する »特別な命名構文を使用して、アートボード、レイヤー、またはグループをエクスポートできます。 これは、Web用に保存するためのショートカットです。 それを確保するために " 生成する PSDが有効になっています。「 [ファイル]> [生成]> [画像アセット] "（[ファイル]> [生成]> [画像] 資産):
8-アートボードの名前を変更します
生成« 宝品 のために 画像コンポーネントを保存する レイヤーセットまたはアートボードで設定されたオプションに基づいて作業しています。 設定できるオプションがいくつかあります。
- ファイル形式。 拡張機能を追加します（。JPG、.GIFまたは.PNG ）たとえば、関連するファイルを保存するには：header-main.png画像コンポーネントはPSDファイルと同じフォルダーに保存されますが、接尾辞として「-assets」が付けられます。
- ファイル圧縮. 拡張後、使用される圧縮のレベルを示す番号を追加できます。 ために " opt.jpg »パーセンテージを使用できます。pngの場合は、それぞれのビット（8、24、または32）を使用します。
- 出口スケール。 パーセンテージまたはピクセルのいずれかを追加することにより、出力スケールを設定できます（幅と高さ）画像名の前（たとえば、100％header-main.png8 ).
- より多くの画像。 同じアートボードの複数の画像をエクスポートできます（アートボード）コンマまたはプラス記号を使用して画像名を区切ります。 したがって、画像の各名前が一意である限り、各画像には独自のオプションを設定できます。
これらのオプションを組み合わせることで、アートボード用の複雑な画像コンポーネントを常に作成できます。
すべてのワークトップに標準の画像が必要な場合は、「 生成する デフォルトでそれぞれに適用するパラメーターを作成できます。 このパラメーターを作成するには、次のオプションを使用してドキュメントの上部に空のレイヤーを追加します。
- デフォルトのキーワード：ツールを終了するには、名前はこれで始まる必要があります " 生成する »デフォルトとして使用する自由。
- 出口スケール：出力スケールをパーセンテージまたはピクセルで設定できます（幅と高さ).
- フォルダ/接尾辞: 画像を保存するフォルダの名前を定義します、およびファイルの名前に追加するサフィックス。
要約
それだけです。 画像を拡大します 後者の動作を確認します。 必要に応じて、メディアライブラリにアップロードすることにより、WordPressブログで画像をテストできます。
必要に応じてお気軽にご質問ください。
プレミアムWordPressプラグインもご覧ください
他にも使えます WordPressのプラグイン モダンな外観を与え、ブログやウェブサイトの取り扱いを最適化します。
ここでは、そのためのプレミアムWordPressプラグインを提供しています。
1。 WPアルティメットソーシャル
これは、WordPressブログで必要になる可能性のあるすべてのソーシャルネットワーキング機能の究極のパックです。
私たちも読んでください 還元システムを統合する8 WordPressのプラグイン
主な機能は次のとおりです。 複数のソーシャルネットワークのアイコン、誰でもできるソーシャルシェアリング ウェブサイトのコンテンツを共有する （記事、ページ、画像、メディア）、人気のソーシャルネットワーク（Facebook、Twitter、Linkedin、GooglePlus、 Pinterest, ディグ、バッファ、 Reddit、Tumblr、 StumbleUponの, 興、Weibo、VK、Delicious）、ソーシャルメディア認証情報を使用したWebサイトへの接続、フォロワーの数を表示するカウンター、Webサイトなどの共有。
2。 WP Slickスライダー画像Carousel Pro
Visual Composerスイートの熱心なフォロワーである場合は、WP Slick Sliderプラグインを使用することを検討する必要があります。 ほとんど100の定義済みテンプレートを使用すると、コーディングしなくても、探しているものを確実に見つけることができます。
これは、特に 視覚的な作曲家。 その機能はとりわけあります：ドラッグアンドドロップをサポートする完全に応答性の高いレイアウト、 ショートコード, RTLおよび多言語サポート、美しいデザインなど
3。 WordPressソーシャルサイドバー
この名前 WordPressのプラグイン 後者の目的を大まかに説明する必要があります。 しかし、 WordPressのプラグイン Social Sidebar は、ウェブサイトにサイドバーを作成するのに役立ちます。 さまざまなソーシャルネットワークでコンテンツをすばやく共有する.
その機能は次のとおりです。 ワードプレスのテーマ、上から下まで構成する機能、いくつかの最近および最新のブラウザーとの互換性、 サイドバーを左から右に配置する可能性、ページの上または下に、ネイティブで4つの配色、レスポンシブレイアウトなどが用意されています。
その他の推奨リソース
ウェブサイトの構築と管理に役立つ他の推奨リソースをご覧ください。
- お使いの製品のデザインを作成するために7 WordPressのプラグイン
- DropBoxに保存するための4 WordPressプラグイン
- WordPressブログに無限スクロールを追加する方法
- あなたのブログに寄付を受け取るための10 WordPressプラグイン
まとめ
ここに ！ このチュートリアルは以上です。WordPressブログ用の「Retina」画像を作成できるようになることを願っています。
ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにさらに要素が必要な場合は、 WordPressブログの作成。
提案や意見がある場合は、セクションに残してください commentaires。 することを躊躇しないでください お気に入りのソーシャルネットワークで友達と共有する.
...
