شما زمان زیادی را برای تنظیم طراحی وبلاگ خود صرف کرده اید ، اما چرا تصاویر در تلفن هوشمند به درستی نمایش داده نمی شوند؟ شما اطمینان حاصل کرده اید که از تصاویر با کیفیت بالا استفاده می کنید ، اما وضعیت نامناسب تصویر صفحه را تصحیح نمی کند.

بسیاری از مردم متوجه نیستند که دستگاه های جدید (مخصوصاً اپل) برای اطمینان از نمایش صحیح نمایش داده شده در رایانه ها ، بلکه در تلفن های هوشمند ، از یک فناوری صفحه نمایش پیشرفته استفاده کنید که در نحوه نمایش تصاویر تأثیر می گذارد.

در این آموزش سعی خواهیم کرد تا اندکی از مفهوم " شبکیه چشم آماده و به شما نشان می دهد که چگونه یک تصویر شبکیه ایجاد کنید.

اما قبل از شروع ، وقت بگذارید تا نگاهی بیندازید چگونه برای نصب یک تم وردپرسچگونه بسیاری از پلاگین ها باید بر روی وردپرس نصب کنم.

بعد بیایید کار کنیم.

توضیحات در تصاویر آماده Retina Ready

در طی چند سال گذشته کیفیت صفحه نمایش دستگاه ها همچنان افزایش یافته است و به ویژه صفحات اپل کارهای زیادی انجام داده اند تا کاملاً واضح و قابل مشاهده باشند. فن آوری "نمایش شبکیه چشمآیا نام تجاری اپل برای توصیف نوع خاصی از صفحه نمایش با استعدادهای خاص استفاده می شود.

صفحه نمایش شبکیه هدف متن و تصاویر را تا حد ممکن واضح نشان دهید ، بدون پیکسل با چشم غیر مسلح قابل مشاهده است. چالش طراحان این است که نمایشگر بسته به اندازه صفحه دستگاه و مجاورت کاربر با صفحه متفاوت است.

با تقسیم عرض فیزیکی صفحه به تعداد پیکسل هایی که به صورت افقی نمایش داده می شوند ، پیکسل ها در هر اینچ را داریم (ppi ، همچنین به نقاط ppp برای نقاط در هر اینچ گفته می شود). " DPI بالا برای اشاره به هر دستگاهی که بیش از 200 پیکسل در هر اینچ داشته باشد استفاده می شود. این شامل همه دستگاههای نمایشگر " شبکیه چشم (از اپل) ، و برخی از دستگاه ها از تولید کنندگان دیگر.

نحوه ایجاد تصاویر "آماده شبکیه چشم" با فتوشاپ

کار با تصاویر با وضوح دو یا چهار برابر بدین معنی است که شما باید قادر به بزرگنمایی برای دیدن همه جزئیات کوچک باشید ، با این حال پرونده های بسیار سنگین باعث یک مشکل عملکرد و یک مشکل ذخیره سازی فایل ها می شوند.

راه حل برای بیشتر طراحان این بوده است که یا چندین لایه ایجاد کرده و آنها را در کنار هم گروه بندی کرده و در صورت لزوم آنها را فعال کنید. با استفاده از تابع "comps » فتوشاپ یا برای کار با وضوح اصلی و صادر کردن قالبهای مورد نیاز (با استفاده از عملی مانند "دوباره بکار").

چالشی که با این دو روش وجود دارد این است که شما نمی توانید چندین عکس را همزمان ببینید. اگر نیاز به تفاوت تصاویر در اندازه های لازم دارید ، باید بین آنها جابجا شوید یا آنها را صادر کنید.

خوش شانس ما علاقه مندان به فتوشاپ ، Adobe ویژگی اضافه کرده است که ایجاد تصاویر مختلف را آسان تر می کند. اکنون می توانید با استفاده از صفحه هنری مشخص ، چندین بوم را در کنار هم ایجاد کنید و با استفاده از ژنراتور ، چندین اندازه تصویر ایجاد کنید. بیایید ببینیم که چگونه کار می کند

1 - اولین Artboard خود را ایجاد کنید

ابزار Artboard جدید، معرفی شده در فتوشاپ CC 2015، در پشت ابزار حرکت پنهان شده است. می توانید روی ابزار موجود در منو کلیک کنید ، یا از Shift + V برای جابجایی بین "" استفاده کنید جایگزینی "و" صفحه تان »:

Artboard-Tool1-Photoshop-آموزش-وردپرس-ایجاد-تصاویر-شبکیه چشم آماده استبرای ایجاد صفحه کار ، یک منطقه را کلیک کرده و بکشید. صفحه هنری جدید با نام پیش فرض "Artboard 1" در صفحه لایه ها نمایش داده می شود.

دفعات بازدید: چرا آزادکاران نیاز به برنامه روزانه دارند

2 - Artboard خود را پیکربندی کنید

شما می توانید لایه های مورد نیاز خود را به مقوا خود اضافه کنید ، و لایه ها مانند آنها لانه می شوند (به شما امکان می دهد ساختار لایه ای مناسب ایجاد کنید) ما پیشنهاد می کنیم فایل های مختلف خود را مانند اشکال اضافه کنید تا قبل از رفتن به مرحله بعدی در حالت دلخواه قرار بگیرند.

3 - Artboard خود را کپی کنید

هنگامی که اولین تابلوی هنری شما برای پاسخگویی به نیازهای شما تنظیم شد ، می توانید با استفاده از منوی زمینه آن را کپی کنید. بر روی "Artboard 1" در قسمت لایه ها کلیک راست کرده و "Duplicate Artboard" را انتخاب کنید. این "Artboard" مشابه دیگری ایجاد می کند که شامل ساختار مشابه با تمام اجزای آن است:

تکراری artboard فتوشاپ

برای کشف نیز: چگونه به راحتی یک مقاله یا صفحه را در WordPress کپی کنید

4 - میز کار خود را قرار دهید (Artboard)

مزیت بزرگ استفاده از تخته های هنری این است که می توانید همه تصاویر خود را همزمان ببینید. برای این کار کافی است میز کار خود را مطابق با نیاز خود قرار دهید. چندین راه برای انجامش وجود دارد:

از صفحه ای استفاده کنید که هنگام انتخاب یک هواپیما کار ، مختصات X و Y را در گوشه سمت چپ بالای صفحه کار وارد کنید.

کادر انتخابی را به هر موقعیت دیگری در بکشید فتوشاپ. صفحه هنری به صورت هوشمند فعال شده است ، بنابراین می توانید چند صفحه هنری را به طور خودکار تراز کنید تا موقعیت آنها در فاصله قبلی قفل شود.

برای حرکت یک صفحه کار انتخابی از کلیدهای جهت دار روی صفحه کلید استفاده کنید.

همچنین آموزش ما را در اینجا مشاهده کنید: نحوه رفع کتابخانه رسانه ای که دیگر در WordPress کار نمی کند

5 - تابلوهای هنری خود را تغییر دهید (در صورت لزوم)

اگر لازم است اندازه تابلوهای هنری خود را تنظیم کنید ، دوباره چندین گزینه پیش رو دارید:

  • با استفاده از دسته هایی که هنگام انتخاب صفحه هنری ظاهر می شوند ، اندازه آنها را تغییر دهید.
  • برای انتخاب اندازه های از پیش تعیین شده ، عرض یا ارتفاع ثابت یا جابجایی بین حالت عمودی و افقی ، از پانل گزینه ها درست در زیر منوی "File" استفاده کنید.
  • برای تغییر اندازه و دسترسی به اندازه های از پیش تعیین شده ، از پانل "Properties" که هنگام انتخاب میز کار ظاهر می شود استفاده کنید.

خاصیت منطقه کار فتوشاپ

6 - هنر خود را خلق کنید

اکنون می توانید با میز کار خود کار کنید ، قطعات را جایگزین کرده و در صورت لزوم تغییراتی ایجاد کنید. با فرض اینکه تنظیمات اصلی شما بدون تغییر باشد ، اکنون تصاویر کاملاً پیکسلی و همه اجزا در جای مناسب خواهید داشت.

همچنین لیست ما را مشاهده کنید تم 26 وردپرس با کشیدن و رها کردن سیستم برای ایجاد صفحات خود را

7 - ابزار "Generate" را تنظیم کنید

« تولید »به شما امکان می دهد تخته های هنری ، لایه ها یا گروه ها را با استفاده از نحو خاص نامگذاری صادر کنید. این یک میانبر برای ذخیره در وب است. برای اطمینان از اینکه " تولید برای PSD شما فعال است ، به " پرونده> تولید> دارایی های تصویر "(پرونده> تولید> تصویر دارایی):

ابزار تولید فتوشاپابزار تولید فتوشاپ

8 - تخته های هنری خود را تغییر نام دهید

تولید « هنر برای عناصر تصویر را ذخیره کنید شما بر اساس گزینه های تعیین شده در مجموعه لایه ها یا در artboard خود کار می کنید. چند گزینه وجود دارد که می توانید تنظیم کنید:

  • فرمت فایل. یک برنامه افزودنی اضافه کنید (.jpg، .gif یا .png ) برای ذخیره پرونده مربوطه به عنوان مثال: header-main.png اجزای تصویر در همان پوشه فایل PSD ذخیره می شوند ، اما با "-assets" به عنوان پسوند ذخیره می شوند.
  • فشرده سازی پرونده.  بعد از پسوند ، می توانید یک عدد اضافه کنید که سطح فشرده سازی مورد استفاده را نشان می دهد. برای " opt.jpg »می توانید از درصد استفاده کنید و برای png از بیت های مربوطه استفاده کنید: 8 ، 24 یا 32.
  • مقیاس خروج. می توانید مقیاس خروجی را با افزودن درصد یا پیکسل تنظیم کنید (عرض در ارتفاع) قبل از نام تصویر (به عنوان مثال 100٪ header-main.png8 ).
  • تصاویر چندگانه. شما می توانید چندین تصویر از همان صفحه هنری را صادر کنید (صفحه تان) با استفاده از علامت ویرگول یا علامت بعلاوه برای جدا کردن نام تصاویر. بنابراین هر تصویر می تواند گزینه های خاص خود را داشته باشد به شرطی که هر نام تصویر منحصر به فرد باشد.

ترکیبی از این گزینه ها به شما امکان می دهد به طور مداوم اجزای پیچیده تصویر را برای تابلوهای هنری خود ایجاد کنید:

مدیریت اجزاء تصویر

اگر برای همه میزهای کار شما به تصاویر استاندارد نیاز است ، " تولید به شما امکان می دهد پارامتر ایجاد کنید تا به طور پیش فرض روی هر یک اعمال شود. برای ایجاد این پارامتر ، یک لایه خالی در بالای سند خود با گزینه های زیر اضافه کنید:

  • کلمه کلیدی پیش فرض: نام باید با این کار شروع شود تا ابزار باقی بماند " تولید »آزادی استفاده از آن به عنوان پیش فرض.
  • مقیاس خروج: به شما امکان می دهد مقیاس خروجی را با درصد یا پیکسل تنظیم کنید (عرض در ارتفاع).
  • پوشه / پسوند: نام پوشه ای را که باید در آن تصاویر ذخیره شود تعریف کنید، و پسوندی برای افزودن به نام پرونده ها.

خلاصه اجرایی

این تمام چیزی است که شما به آنجا رسیدید ، سعی کنید تصویر را بزرگنمایی کنید تا ببیند دومی چگونه رفتار می کند. در صورت لزوم ، می توانید با بارگذاری آن در کتابخانه رسانه خود ، تصویر را در وبلاگ وردپرس خود آزمایش کنید.

در صورت لزوم از ما سؤال کنید.

همچنین برخی از افزونه های برتر WordPress را کشف کنید  

می توانید از موارد دیگر استفاده کنید افزونه های وردپرس برای دادن ظاهری مدرن و بهینه سازی مدیریت وبلاگ یا وب سایت شما.

ما در اینجا برخی از افزونه های برتر وردپرس را به شما پیشنهاد می دهیم که در انجام این کار به شما کمک می کنند.

1. WP نهایی اجتماعی

این یک بسته نهایی از تمام ویژگی های شبکه های اجتماعی است که احتمالاً در وبلاگ وردپرس خود نیاز دارید.فایل wp-نهایی-اجتماعی

ما را نیز بخوانید پلاگین 8 وردپرس به ادغام یک سیستم کاهش

ویژگی های اصلی آن عبارتند از: آیکون های شبکه های اجتماعی متعدد، اشتراک اجتماعی است که به هر کسی اجازه می دهد تا محتوای وب سایت خود را به اشتراک بگذارید (مقالات ، صفحات ، تصاویر ، رسانه ها) در شبکه های اجتماعی محبوب (فیس بوک ، توییتر ، لینکدین ، ​​GooglePlus ، پینترست, کاربر، بافر ، ق، تامبلر ، تلو تلو خوردن, زینگ، Weibo ، VK ، Delicious) ، اتصال به وب سایت با اعتبار رسانه های اجتماعی خود ، پیشخوان برای نمایش تعداد دنبال کنندگان خود ، و اشتراک گذاری های وب سایت و دیگران.

دانلود | نسخه ی نمایشی | میزبانی وب

2. WP لغزان لغزنده تصویر چرخ فلک نرم افزار

اگر از طرفداران مشتاق مجموعه ویژوال کامپوزر هستید ، استفاده از افزونه WP Slick Slider گزینه ای است که باید در نظر بگیرید. تقریباً با قالب های از پیش تعریف شده 100 ، مطمئناً بدون برنامه نویسی چیزی مورد نظر خود را پیدا خواهید کرد.

کشویی WP نرم و صاف و تصویر چرخ فلک طرفدار

این گزینه ای است که واقعاً جدی باشد ، مخصوصاً برای کاربران ویژوال آهنگساز. ویژگی های آن از جمله موارد دیگر است: یک طرح کاملاً پاسخگو با پشتیبانی از کشیدن و رها کردن ، a کد کوتاه, RTL و پشتیبانی چند زبانهیک طراحی زیبا و موارد دیگر

دانلود | نسخه ی نمایشی | میزبانی وب

3. نوار کناری اجتماعی وردپرس

نام این پلاگین وردپرس باید تقریباً به شما بگوید که دومی برای چیست. اما ما خواهیم گفت که پلاگین وردپرس نوار کناری اجتماعی به شما کمک می کند تا یک نوار کناری در وب سایت خود ایجاد کنید تا به شما کمک کند به سرعت مطالب خود را در شبکه های اجتماعی مختلف به اشتراک بگذارید.

نوار کناری اجتماعی وردپرس

قابلیت های آن عبارتند از: ادغام خودکار با شما تم وردپرس، قابلیت پیکربندی آن از بالا به پایین، سازگاری با چندین مرورگر جدید و مدرن، امکان قرار دادن ستون های فرعی شما از چپ به راست، در بالا یا پایین صفحات شما ، 4 مجموعه رنگ بومی ارائه می شود ، یک طرح پاسخگو و موارد دیگر.

دانلود نسخه ی نمایشی | میزبانی وب

سایر منابع پیشنهادی

درباره سایر منابع پیشنهادی برای کمک به شما در ساخت و مدیریت وب سایت خود اطلاعات کسب کنید.

نتیجه

اینجا ! این برای این آموزش است ، امیدوارم به شما امکان ایجاد تصاویر "Retina" را برای وبلاگ وردپرس خود بدهید. 

با این حال ، شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری نیاز دارید ، با مشاوره راهنمای ما در مورد ایجاد وبلاگ وردپرس.

اگر پیشنهادی یا اظهار نظر دارید ، آنها را در بخش ما بگذارید نظر. دریغ نکنید با دوستان خود در شبکه های اجتماعی مورد علاقه خود به اشتراک بگذارید

...