نحوه راه اندازی گوشی های هوشمند و رایانه های شخصی پرتال اطلاعاتی
  • خانه
  • ویندوز 8
  • Border-radius: گوشه های گرد در CSS. گوشه های گرد در فتوشاپ

Border-radius: گوشه های گرد در CSS. گوشه های گرد در فتوشاپ

درود دوستان. این مقاله به یک موضوع نسبتاً محبوب در بین وب مسترهای تازه کار اختصاص دارد - CSS گوشه های گرد... سوالاتی که من سعی خواهم کرد کشف کنم در مورد چگونگی ایجاد گوشه های گرد از عناصر سایت با استفاده از CSS بدون استفاده از هیچ تصویری است.

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

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

با این حال، گرد کردن گوشه ها با CSS روز به روز محبوب تر می شود. همانطور که قبلا متوجه شده اید، در این مقاله از ویژگی موجود در CSS 3 استفاده خواهیم کرد.

گوشه های گرد با CSS.

بنابراین، به عنوان مثال، یک عنصر بلوک DIV را می گیریم و گوشه های آن را گرد می کنیم. به عنوان مثال، اجازه دهید یک بلوک ایجاد کنیم و دقیقاً در کد HTML با استفاده از ویژگی style به آن خصوصیات اختصاص می دهیم. ابتدا یک عنصر بلوک داریم که با پس زمینه هر رنگی پر شده است:

به هر حال، اگر لازم است بدانید چه کد رنگی را در وب سایت خود یا هر سایت دیگری دارید، به کارتان خواهد آمد.

و به این صورت است که آن را در یک مرورگر وب خواهیم دید:

اکنون برای گرد کردن گوشه ها از ویژگی "border-radius" استفاده می کنیم که می تواند به عنوان شعاع حاشیه ترجمه شود. بله، دقیقاً همینطور، و آنطور که بسیاری ممکن است فکر کنند که این شعاع قاب یا هر چیزی است که به آن (حاشیه) می گویند، نیست. این ویژگی مسئول شعاع مرزهای عنصر است و نه برای مرزها یا مرزهای آن، که ممکن است وجود نداشته باشند. با این حال، ویژگی همچنان بدون مرز عنصر کار می کند. امیدوارم منظورم رو متوجه بشین. مقدار این ویژگی هر مقدار عددی قابل استفاده در CSS است، مانند درصد، پیکسل (px)، نقاط (pt) و غیره. بله، و باید در نظر داشت که این ویژگی در هر چهار گوشه یک عنصر به طور همزمان کار می کند، علاوه بر این، می توانید شعاع متفاوتی را برای هر گوشه تعیین کنید، اما بعداً در مورد آن بیشتر توضیح دهید. ابتدا شعاع گوشه های مستطیل خود را تنظیم می کنیم. بگذارید 5 پیکسل باشد:

سپس عنصر به شکل زیر خواهد بود:

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

شعاع حاشیه بالا-چپ: 5 پیکسل. / * گوشه بالا سمت چپ * / حاشیه-بالا-راست-شعاع: 5px; / * گوشه سمت راست بالا * / حاشیه-پایین-راست-شعاع: 5px; / * گوشه پایین سمت راست * / حاشیه-پایین-چپ-شعاع: 5px; / * گوشه سمت چپ پایین * /

یعنی اگر بخواهیم هر گوشه ای مقدار خودش را تعیین کنیم، چنین فرصتی داریم و برای اطمینان از این موضوع کد زیر را می گیریم:

و سپس به نتیجه زیر می رسیم:

همانطور که می بینیم، یک مقدار شعاع متفاوت برای مرز هر گوشه تنظیم شده است.
علاوه بر این، CSS به ما این امکان را می دهد که برای مرز هر گوشه مقداری را به صورت مختصر تعیین کنیم که به شکل زیر خواهد بود:

جایی که مقادیر به ترتیب زیر دنبال می شوند:

شعاع حاشیه: 5 پیکسل / * گوشه بالا سمت چپ * / 10 پیکسل / * گوشه سمت راست بالا * / 15 پیکسل / * گوشه پایین سمت راست * / 20 پیکسل / * گوشه پایین سمت چپ * /;

بر این اساس، بر اساس موارد فوق، مشخص می شود که به همین ترتیب می توانیم مرز شعاع را فقط برای سه (یک یا دو) گوشه تعیین کنیم:

در مرورگر وب به این صورت است:

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

در این مثال، ما فقط گوشه سمت چپ بالای عنصر را تحت تأثیر قرار دادیم:

اگر مقادیر را برعکس قرار دهید، عنصر به شکل زیر خواهد بود:

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

و نتیجه زیر را بگیرید:

حالا بیایید به یک مثال پیچیده تر نگاه کنیم:

در این حالت مقدار قبل از علامت اسلش (/) به شعاع افقی گوشه و بعد از علامت به شعاع عمودی اشاره می کند. در این حالت، مقادیر به این صورت به یکدیگر مرتبط خواهند شد:

شعاع حاشیه بالا-چپ: 20 پیکسل 15 پیکسل؛ حاشیه-بالا-راست-شعاع: 10px 25px; حاشیه-پایین-راست-شعاع: 40px 15px; شعاع حاشیه-پایین-چپ: 10px 25px;

و نتیجه به این صورت خواهد بود:

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

گرد کردن گوشه ها در مرورگرهای وب مختلف.

در اینجا لازم به ذکر است که این ویژگی توسط همه نسخه های مرورگر پشتیبانی نمی شود. این ویژگی در IE9 +، Firefox 4+، Chrome، Safari 5+ و Opera پشتیبانی می‌شود.
اما برای برخی از نسخه های مرورگرهایی که از این ویژگی پشتیبانی نمی کنند، ویژگی های غیر استانداردی وجود دارد که به اصطلاح یک پیشوند یا پیشوند به ویژگی اضافه می کنند.
Chrome قبل از نسخه 4.0، Safari قبل از نسخه 5.0، iOS از ویژگی غیر استاندارد -webkit-border-bottom-left-radius استفاده می کنند.
فایرفاکس قبل از نسخه 4.0 از ویژگی غیر استاندارد -moz-border-radius-bottomleft استفاده می کند.
در این صورت، باید با استفاده از این پیشوندها، ویژگی را کپی کنیم. به عنوان مثال، اگر ویژگی مرز گوشه سمت چپ بالا را به مقدار پنج پیکسل تنظیم کنیم:

شعاع حاشیه بالا-چپ: 5 پیکسل.

سپس خاصیتی که آن را با استفاده از پیشوندها کپی می کند به شکل زیر خواهد بود:

Webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; شعاع حاشیه-بالا-چپ: 5px;

من واقعاً امیدوارم که توانسته باشم همه چیز را به وضوح توضیح دهم و اکنون متوجه شده اید که چگونه فقط با استفاده از CSS گوشه های گرد ایجاد کنید.
موفق باشی!

همه مرورگرهای مدرن از استانداردهای نشانه گذاری فرامتن HTML5 و شیوه نامه های CCS3 پشتیبانی می کنند. و اگر سایت شما (قالب) از استانداردهای مدرن پشتیبانی می کند، می توانید بدون استفاده از ویرایشگرهای گرافیکی، تغییراتی در طراحی مانند گرد کردن گوشه ها، سایه ها، پر کردن گرادیان ایجاد کنید.

وب مسترها معمولاً از گوشه های گرد برای بلوک ها و فریم ها در وب سایت ها استفاده می کنند. در این مقاله به شما خواهم گفت که چگونه گوشه های تصاویر و عکس های سایت را بدون استفاده از برنامه های شخص ثالث و فقط با استفاده از CSS گرد کنید.

برای اینکه مثال های ارائه شده در مقاله به درستی روی صفحه نمایش شما نمایش داده شوند، باید از آخرین نسخه مرورگرها، فایرفاکس، کروم و نسخه های مبتنی بر آنها استفاده کنید: مرورگر Yandex، Amigo و غیره.

گوشه های گرد برای بلوک های DIV

با توجه به استاندارد CSS3، به طوری که بلوک DIVگوشه های گرد داشت، باید مدل دهی شود شعاع مرزی، برای مثال مانند این:

شعاع حاشیه: 10 پیکسل.

برای وضوح، بیایید دو بلوک با گوشه های صاف و گرد ترسیم کنیم:

بلوک زاویه راست

بلوک گوشه گرد

گرد کردن گوشه های تصاویر

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

این تصویر بدون پردازش CSS است

حالا با گوشه های گرد:

شعاع حاشیه: 10 پیکسل.

برای اینکه کاملاً "زیبا" شود، از ابتدا لبه ها را اضافه می کنیم ...

شعاع حاشیه: 10 پیکسل. حاشیه: 5px #ccc solid;

و سپس سایه ها:

شعاع حاشیه: 10 پیکسل. حاشیه: 5px #ccc solid; box-shadow: 0 0 10px # 444;

گزینه زیر (گوشه های گرد با سایه بدون حاشیه) بسیار شبیه به پد ماوس است:

شعاع حاشیه: 10 پیکسل. box-shadow: 0 0 10px # 444;

و در نهایت، تمسخر کامل تصویر

شعاع مرزی: 50%; حاشیه: 5px #cfc solid; box-shadow: 0 0 10px # 444;

اگر تصویر را در یک پنجره جدید باز کنید، می بینید که آن (تصویر) بدون تغییر است و تمام گوشه ها، سایه ها و غیره فقط نتیجه پردازش هستند. CSSاستایل با مرورگر شما

انحراف غزلی کوچک

سبک مرزاندازه تصویر را با مقدار حاشیه افزایش می دهد. اگر مقدار مشخص شده باشد حاشیه: 5 پیکسل، سپس تصویر نهایی 10 پیکسل گسترده تر و بلندتر خواهد شد. این را در نظر بگیرید، در برخی موارد ممکن است طرح بندی سایت "برود".

یک سبک جعبه-سایهبر اندازه تصویر تأثیر نمی گذارد، به نظر می رسد سایه بر روی عناصر همسایه اجرا می شود. هنگام استفاده از آن، طرح بندی سایت آسیب نمی بیند.

نحوه گرد کردن گوشه های تصاویر در وردپرس

در تمام مثال‌های بالا، استایل‌ها را مستقیماً در تگ‌های html کد نوشتم. به عنوان مثال، دومی شبیه به این است:

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

به عنوان مثال، برای تمام تصاویری که هیچ ترازبندی برای آنها مشخص نشده است، در فایل style.cssبرای قالب وردپرس خود، موارد زیر را بنویسید:

Alignnone (شعاع حاشیه: 10 پیکسل؛ حاشیه: 5 پیکسل #cfc جامد؛ کادر سایه: 0 0 10 پیکسل # 444؛)

یا سخت ترین روش برای تمام عکس های موجود در سایت. سبک را برای همه برچسب‌ها لغو کنید IMG:

Img (شعاع حاشیه: 10 پیکسل؛ حاشیه: 5 پیکسل #cfc جامد؛ کادر سایه: 0 0 10 پیکسل # 444؛)

گزینه دوم نه تنها برای وردپرس، بلکه برای هر CMS مناسب است. و حتی برای یک ساده Htmlصفحات در صورتی که هنگام نمایش تصاویر، برچسب IMGهیچ کلاس سبکی اختصاص داده نمی شود. اما مراقب باشید. اگر گزینه های نمایش برچسب را لغو کنید IMGشما ظاهر تمام تصاویر موجود در سایت را تغییر خواهید داد!

به جای نتیجه گیری

تمام مثال‌های این مقاله مشروط هستند و فقط برای نشان دادن برخی از امکانات CSS برای پردازش تصویر و نشان دادن چقدر ساده است.

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

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

نشانه گذاری مستقیم (جدول دوم در چیدمان سلول های ردیف بالا متفاوت است):

Curabitur a ultricies urna Phasellus mollis
eget venenatis est tortor et est. 0
Fusce sollicitudin metus quis libero auctor vestibulum. 0
نولا گراویدا اورنا اوگ. Nunc iaculis bibendum.
وستیبولوم تمپور Laoreet eros semper ut.
Vivamus quis nisi lacus. Cras id felis eu purus tempor dictum in at lorem. facilisis iaculis magna diam id quam. eleifend Pellentesque cursus, nunc ut facilisis hendrerit

1. گوشه ها را مستقیماً روی میز گرد کنید (تگ میز).

BCcontentTables (حاشیه: 1px جامد #CCCCCC؛ عرض: 100%؛ moz-border-radius: 10px؛ / * Firefox * / -webkit-border-radius: 10px; / * Safari، Google Chrome * / -khtml-border-radius : 10px؛ / * KHTML * / -o-border-radius: 10px؛ / * Opera * / -ms-border-radius: 10px; / * IE8 * / border-radius: 10px; / * CSS3 * / سرریز: پنهان ؛ حاشیه: 0.7em خودکار؛)

2. هر گونه پس زمینه را از خط اول حذف کنید.

Tr.bCTable_Header (پس‌زمینه: هیچ؛)

3. با استفاده از کلاس شبه: first-child و combinator، اولین سلول جدول را انتخاب کنید. گوشه سمت چپ بالای سلول اول را گرد کنید. پس زمینه سطر اول از پس زمینه سلول های این سطر تشکیل شده است.

Tr.bCTable_Header: first-child> td: first-child (border-radius: 10px 0px 0 0; -webkit-border-radius: 10px 0 0 0; -moz-border-radius: 10px 0 0 0; -ms- border-radius: 10px 0 0 0; -o-border-radius: 10px 0 0 0; -khtml-border-radius: 10px 0 0 0;) tr.bCTable_Header td (رنگ: سفید؛ اندازه قلم: 110%; رنگ پس زمینه: # 00843C؛)

4. با استفاده از کلاس شبه: last-child و combinator، آخرین سلول در ردیف اول را انتخاب کنید. برای آن، گوشه سمت راست بالا را گرد کنید.

Tr.bCTable_Header: first-child> td: last-child (border-radius: 0 10px 0 0; -webkit-border-radius: 0 10px 0 0; -moz-border-radius: 0 10px 0 0; -ms- border-radius: 0 10px 0 0; -o-border-radius: 0 10px 0 0; -khtml-border-radius: 0 10px 0 0;)

5. گوشه های پایین خط آخر را گرد کنید. فراموش نکنید که پس زمینه را از خط آخر حذف کنید. پس زمینه خط توسط پس زمینه سلول های آخرین خط تنظیم می شود.

BCcontentTables tr: آخرین فرزند (شعاع حاشیه: 0 0 10px 10px؛ -webkit-border-radius: 0 0 10px 10px؛ -moz-border-radius: 0 0 10px 10px؛ -radius10px 0 0 10px: -ms10px 10px؛ -o-border-radius: 0 0 10px 10px؛ -khtml-border-radius: 0 0 10px 10px؛ پس زمینه: هیچکدام؛)

6. سپس، بر اساس قیاس با نقاط 3-4 در خط آخر، گوشه های خانه اول و آخر را گرد کنید.

BCcontentTables tr: آخرین فرزند td (رنگ پس‌زمینه: # F1F1F2;) -moz-border-radius: 0 0 0 10px؛ -ms-border-radius: 0 0 0 10px؛ -o-border-radius: 0 0 0 10px؛ -khtml-border-radius: 0 0 0 10px;). bContentTables tr: آخرین فرزند td: آخرین فرزند (شعاع مرزی: 0 0 10px 0؛ -webkit-border-radius: 0 0 10px 0؛ -moz-border-radius: 0 0 10px 0; -ms-border- شعاع: 0 0 10 پیکسل 0؛ -o-border-radius: 0 0 10px 0؛ -khtml-border-radius: 0 0 10px 0؛)

پشتیبانی از مرورگر

CTRL + N را انتخاب کنید یا تابع "Create" را در فهرست منوی کشویی "File" انتخاب کنید. در مرحله بعد، از همان لیست، عملیات "Import" را انتخاب کنید یا با کلیدهای ترکیبی CTRL + I آن را فراخوانی کنید. سپس مسیر فایل تصویر را در کادر محاوره ای مشخص کرده و روی دکمه Import کلیک کنید. مال شما در این مورد نمایش داده خواهد شد.

در نوار ابزار، Node Editor را پیدا کنید و ابزار Shape را انتخاب کنید. همچنین با فشردن کلید F10 می توان این ابزار را فراخوانی کرد.

در سمت راست گوشه ای که می خواهید گرد کنید، روی حاشیه تصویر کلیک چپ کنید. علاوه بر چهار گوشه، یک گره جدید در تصویر ظاهر می شود. سپس در پنل Node Editor گزینه Convert Line To Curve را انتخاب کنید. علامت های گرد در سمت چپ جزئیات جدید ایجاد شده ظاهر می شوند.

در همان فاصله از گوشه، یک گره جدید در سمت عمود بر تصویر اضافه کنید. بدون تغییر ابزار Shape، روی گره گوشه اصلی دوبار کلیک کنید، حذف می شود. گوشه گرد تصویر بلافاصله نمایان می شود. می توانید شعاع گرد کردن گوشه را با استفاده از علائم خط راهنما تغییر دهید.

به روشی بسیار ساده (شامل یک شی برداری) همه چیز ممکن است گوشه هایک تصویر مستطیل شکل داشته باشد. بدون توسل به روش فوق برای ویرایش گره ها، در کنار تصویر وارد شده با ابزار Rectangle یک مستطیل هم اندازه بکشید یا با کلید F6 ابزار را فراخوانی کنید.

با ابزار Shape که قبلاً با آن آشنا هستید، روی مستطیل کلیک کنید و هر یک از گره های آن را با ماوس به مستطیل بکشید. گوشه ها گرد خواهند شد. شعاع گرد کردن را می توان با همان ابزار تنظیم کرد.
تصویر خود را با فلش Pick Tool علامت گذاری کنید.
بعد، در لیست منوی اصلی، "Effects" را پیدا کنید و گزینه "PowerClip" و از لیست کشویی تابع "Place Inside Container" را انتخاب کنید. از فلش پهن برای اشاره به مستطیل گردی که کشیده اید استفاده کنید. این تبدیل به یک قاب می شود که تصویر شما را در خود جای می دهد.

توجه داشته باشید

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

توصیه مفید

با استفاده از عملکرد "PowerClip" می توانید تصاویر را در فریم های مختلف از عجیب ترین شکل ها قرار دهید.

منابع:

  • راهنمای رسمی کار با کورل دراو، ام. متیوز، سی. متیوز، 1997
  • چگونه گوشه های تیز را اتو کنیم؟

شما نیاز خواهید داشت

  • - کامپیوتر
  • - برنامه Adobe Photoshop
  • - عکس

دستورالعمل ها

روی لایه Background کلیک راست کنید، Duplicate Layer را انتخاب کنید و OK (یا Ctrl + J) را بزنید. سپس یک لایه جدید ایجاد کنید (Ctrl + Shift + N)، آن را بین پس‌زمینه و کپی آن همانطور که در تصویر نشان داده شده است قرار دهید (می‌توانید آن را با مقداری رنگ، به عنوان مثال سفید پر کنید). لایه قفل شده را خاموش کنید (روی "چشم" در سمت چپ کلیک کنید) یا حذف کنید.

ابزار Rectangle را در پالت ابزار پیدا کنید و آن را با دکمه سمت چپ ماوس نگه دارید. یک منوی اضافی در صورت نیاز ظاهر می شود (ابزار مستطیل گرد). تنظیمات را در قسمت بالا مانند تصویر تنظیم کنید و قسمت Radius را به دلخواه تغییر دهید (هر چه بیشتر گوشه ها گردتر شوند و تصویر بیشتر برش داده شود).

سپس، در عکس، قطعه ای را که می خواهید استفاده کنید (مثلاً به عنوان آواتار) انتخاب کنید. اگر اشتباه کردید، Esc را فشار دهید و انتخاب را تکرار کنید. پس از انتخاب قطعه مورد نظر بر روی آن کلیک راست کرده و Make Selection ... را انتخاب کرده و OK کنید.

تمام شد، اکنون یک لایه عکس گوشه های گرد دارید. حالا لایه 2 (لایه ای که به عنوان پس زمینه عمل می کند) را می توان با هر رنگی پر کرد یا شفاف گذاشت.

ویدیو های مرتبط

توجه داشته باشید

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

رنگ پس‌زمینه (لایه 2) را که نزدیک‌ترین رنگ به رنگ صفحه‌ای که در آن عکس را ارسال می‌کنید، انتخاب کنید. سپس فایل را با فرمت jpg ذخیره کنید.

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

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

عکسی را که قصد ویرایش آن را داریم در فتوشاپ باز کنید.

سپس یک کپی از لایه آبشار به نام ایجاد کنید "زمینه"... برای صرفه جویی در زمان، از کلیدهای داغ استفاده می کنیم CTRL + J.

کپی به منظور دست نخورده ماندن تصویر اصلی ایجاد می شود. اگر (ناگهان) مشکلی پیش آمد، می‌توانید لایه‌های بد را حذف کرده و دوباره شروع کنید.

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

من مقدار را روی 30 پیکسل قرار می دهم تا نتیجه بهتر دیده شود.

حالا باید شکل به دست آمده را بکشیم تا کل بوم پر شود. فراخوانی تابع "تحول آزاد"کلیدهای داغ CTRL + T... یک قاب روی شکل ظاهر می شود که می توانید از آن برای حرکت، چرخش و تغییر اندازه شی استفاده کنید.

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

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

این تابع باعث می شود که اشیا به طور خودکار به عناصر ساختاری و مرزهای بوم "Snap" بپیوندند.

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

لایه آبشار اکنون فعال و آماده ویرایش است. ویرایش شامل حذف موارد غیر ضروری از گوشه های تصویر است.

معکوس کردن انتخاب با کلیدهای میانبر CTRL + SHIFT + I... اکنون انتخاب فقط در گوشه ها باقی می ماند.

مقالات مرتبط برتر