- 92
- 112 655
designertofullstack
United States
Приєднався 19 січ 2022
MEET KELLY.
Hello, world. I’m an experienced, Mac-based, full-stack designer and author of the blog designertofullstack.com. Designer to Full Stack is where I write about what I do day-to-day in my professional career. I hold a BFA and MFA in Graphic Design and teach (for fun 🎉) as an instructor at West Virginia University. This UA-cam channel is where I record videos that supplement my blog posts.
Hello, world. I’m an experienced, Mac-based, full-stack designer and author of the blog designertofullstack.com. Designer to Full Stack is where I write about what I do day-to-day in my professional career. I hold a BFA and MFA in Graphic Design and teach (for fun 🎉) as an instructor at West Virginia University. This UA-cam channel is where I record videos that supplement my blog posts.
Squarespace: Target specific header nav links, like an external URL, & add an SVG or FA icon
Reference the full blog post: designertofullstack.com/style-an-html-pdf-link-with-the-css-attribute-href/
Font Awesome external link icon that we used: fontawesome.com/icons/arrow-up-right-from-square?f=classic&s=solid
Font Awesome external link icon that we used: fontawesome.com/icons/arrow-up-right-from-square?f=classic&s=solid
Переглядів: 1
Відео
How to make JPGs always open in Photoshop - For Designers using Adobe Photoshop and on Macs
Переглядів 89 годин тому
If you're new to Adobe Photoshop, or new to Macs, or maybe both, then you might be looking for how to open your JPG image files in Photoshop...by default! Fortunately, it takes just a few seconds to make this change on your Mac. Watch to follow along. The blog • designertofullstack.com/category/graphic-design/
Illustrator: What is this strange vortex of orange, green & blue lines? Perspective Grid Hide & Show
Переглядів 2719 годин тому
Hide and Show the Illustrator Perspective Grid (that strange grid or vortex of orange, green and blue lines OR that circle icon with a 3D cube in it) with the Mac key command: Shift Command Letter i Full blog post: designertofullstack.com/show-or-hide-the-perspective-grid-in-illustrator/
Shopify: Add International Phone Number Requirement to Shopify Checkout
Переглядів 1619 годин тому
Today, I was working on a no plugin, no custom script option for soliciting phone numbers on International orders to help with delivery. Although not perfect, I was able to use default options to display the phone field and change the text to notify International users that they should provide their phone numbers. Please note, in this solution, the logic does not actually require this field to ...
Show me how to create a conditional using the ACF Meta Key
Переглядів 9День тому
This video answers the question: What is the Meta Key for an ACF field? and What is the meta_key for a Group ACF Field? The video also shows you how to create a conditional using the ACF Meta Key and the Conditional Block plugin in Gutenberg's Block Editor templates. More ACF and WordPress Gutenberg Block Editor Tips: designertofullstack.com/tips-for-using-acf-in-gutenberg/ This post includes m...
Follow-up to: Logotype Exercises in Illustrator 2024, Learn how to combine letters to form logos
Переглядів 163Місяць тому
Original Video to Watch First: ua-cam.com/video/Oid5Jf2txZ8/v-deo.html Illustrator Logo Design Tutorial. Blog post: designertofullstack.com/tips-for-creating-a-logotype-using-two-letters-or-initials/
Adobe Illustrator 2024 Tutorial: Make a Scientific Color Wheel with Pie Slices
Переглядів 123Місяць тому
Color is fascinating. Learn to make Scientific Color Wheels with this Illustrator Tutorial video. In this demonstration, we use the Ellipse tool to make a circle and then split it into 12 even pie slices in Illustrator. With the Live Paint tool we fill each pie slice with a color swatch selected from Adobe's Scientific color palette. For additional resources, including animated gifs of this Sci...
SquareSpace: Help. How do I Make the Code Block Height Smaller? Web Design Tutorial.
Переглядів 39Місяць тому
If you’re looking to reduce the height of your SquareSpace Code block, the best way to do this is using Custom CSS. I demo how to change the height in this video and include the CSS in the first comment. For full instructions, read the blog post: designertofullstack.com/how-to-fix-the-code-block-in-squarespace-when-it-is-too-tall/ For more SquareSpace Tips including how to add a programmatic co...
Save Microsoft Word document as a PDF (on a Mac, with Adobe Cloud)
Переглядів 38Місяць тому
Microsoft Word documents are editable files that are not web-friendly; therefore, there are many times when you need to convert your Word document into a PDF. Here are the simple instructions for doing it; watch to follow along. You may also enjoy this video and blog post: ua-cam.com/video/xB7wVZW2nwY/v-deo.html designertofullstack.com/can-you-send-me-the-pdf-and-word-document/
Adobe Photoshop: Help my Clone Stamp Tool is Not Working
Переглядів 412Місяць тому
If you're struggling to get your clone stamp tool to work, you might be missing one of the small details shown in this video. For instance: 1) Did you select the correct layer sampling options? Your choices are: • Current Layer • Current & Below • All Layers 2) Did you SET where you're sampling from. Hold Alt key (Windows) or the Option key (macOS) on your keyboard and then click with your mous...
WordPress: ACF taxonomies in Field Groups. Don't forget to Toggle On the ability to SAVE.
Переглядів 76Місяць тому
Web Design Tutorial: If you're new to using taxonomies in ACF (Advanced Custom Fields), you should watch this video, especially if you need help saving your Relationship Taxonomies for a custom post type created with ACF. A simple toggle set to true will likely solve your issue. Try this toggle setting before testing each plugin for compatibility issues or changing your theme. If you're running...
Excel Tip: Combine First Name and Last Name columns into a single Full Name Column
Переглядів 13Місяць тому
This is an Excel trick that is extremely helpful when updating user lists for email campaigns. This formula allows you to create a new column labeled FULL NAME from a First Name and Last Name column. For more useful marketing email / user databases and MailChip/Excel tricks, read this post: designertofullstack.com/tips-for-preparing-customer-lists-for-email-marketing/
PhotoShop Transform Tips: Zoom and Constrain Proportions
Переглядів 56Місяць тому
This video quickly shows you what to do if you're trying to scale an image and can't see the Transform Controls (try zooming out, Command Minus Sign) or if you're accidentally stretching your image (use the corner anchor to scale/transform and make sure your proportions are linked/locked to change proportionally). Good luck! For more PhotoShop videos, subscribe and check out our blog: designert...
PhotoShop: Clipping Mask and Layer Mask. What's the same and different between these two masks?
Переглядів 96Місяць тому
In this demonstration, learn how the Clipping Mask or Layer Mask can be used to create similar effects and how they function differently. • See how to Create A Clipping Mask and How to Release a Clipping mask. • Watch to better understand how your layers need to be arranged for a Clipping Mask to work. For more Photoshop tips, check out our blog: designertofullstack.com/tag/photoshop/
Photoshop Newbie: Tricks for saving as a Jpg and also how to open JPGS by default in Photoshop
Переглядів 1072 місяці тому
This video shows you how to set the default program for opening JPGS as Adobe Photoshop on your mac. You may want to make similar settings for PSDT files and PNGs. This video also shows you how to find the option to Save as a JPG in Photoshop. Sometimes all your Saving options are hidden and you have to go to SAVE AS to see the options for PNGs or JPGs.
How to find the Query Loop Block Custom Settings in WordPress (and get back to it again)
Переглядів 962 місяці тому
How to find the Query Loop Block Custom Settings in WordPress (and get back to it again)
Add SquareSpace Font Awesome Icons - Especially If You Need More Than One Grouping of Social Icons
Переглядів 372 місяці тому
Add SquareSpace Font Awesome Icons - Especially If You Need More Than One Grouping of Social Icons
Update WordPress Menu after uninstalling/deleting WooCommerce: Replace with Shopify Custom Links
Переглядів 312 місяці тому
Update WordPress Menu after uninstalling/deleting WooCommerce: Replace with Shopify Custom Links
Testing Redirects in Smart Crawl Pro when moving Ecommerce store from Woocommerce to Shopify
Переглядів 382 місяці тому
Testing Redirects in Smart Crawl Pro when moving Ecommerce store from Woocommerce to Shopify
Removing Beaver Builder from your WordPress website
Переглядів 422 місяці тому
Removing Beaver Builder from your WordPress website
InDesign: Adjust alignment of content on and left and right page spreads in bulk
Переглядів 553 місяці тому
InDesign: Adjust alignment of content on and left and right page spreads in bulk
PhotoShop: Eyedropper Tool Not Working? I bet this will work. Choose All Layers
Переглядів 1,2 тис.3 місяці тому
PhotoShop: Eyedropper Tool Not Working? I bet this will work. Choose All Layers
Squarespace: Understanding Slugs and Linking to your Portfolio Component
Переглядів 244 місяці тому
Squarespace: Understanding Slugs and Linking to your Portfolio Component
Add Copyright Script to your Squarespace Site - Make your Copyright Date Line Update Automatically
Переглядів 804 місяці тому
Add Copyright Script to your Squarespace Site - Make your Copyright Date Line Update Automatically
Squarespace: how to add a vector SVG to your website
Переглядів 2524 місяці тому
Squarespace: how to add a vector SVG to your website
Squarespace: How to Add Anchors to Create Navigation on a Single Page Website
Переглядів 934 місяці тому
Squarespace: How to Add Anchors to Create Navigation on a Single Page Website
Photoshop: How to open a PSDT in Photoshop every time on a Mac
Переглядів 8775 місяців тому
Photoshop: How to open a PSDT in Photoshop every time on a Mac
Shopify: How to remove Shipping Calculated at Checkout in Shopify on Dawn Theme
Переглядів 2655 місяців тому
Shopify: How to remove Shipping Calculated at Checkout in Shopify on Dawn Theme
Thank you so much
Thanks a lot. I really dislike using grids but now I want to take my design into another professional level. Thanks for the quick tips
You're so welcome! Yes, utilizing grids will help you create professionally aligned designs! Good luck!
This is the only example I could find of how to do this! Thank you so much! What a life saver!
Thanks this helped me a lot!
I'm so glad I could help you!
This was such a great tip! Not intuitive at all - you saved my bacon! SUBSCRIBED
Right? I couldn't believe the solution was a toggle button! Thanks for subscribing!
Thanks mam❤
Most welcome 😊
THANK YOU!!!!!
You're very welcome!
This has been the most helpful advice I've found online regarding adding SVG's to SquareSpace! Thank you! By chance, do you know how to find the code of a personal design created in Adobe Illustrator?
So apparently because I reacted to a post on a photoshop page(not related to her), it "automatically" sends invites.
Hi - yep, you're correct. If you like a page's post on Facebook, that page now has the ability to send you an invite. They can send it individually, from that post one-by-one to each reactor, or in bulk from their meta business calendar page. All reactions are aggregated and an "automatic" option to invite everyone who has reacted is now available to the page owner.
How do you do it for older posts?
As a page, scroll through older posts on your feed, click the reaction icon with a number next to it, per post. That click will bring up a list of people who have reacted to the post. Next to each person you will have an active button that reads "invite," or an inactive button that says "invited" or "following." I hope this helps!
@@designertofullstack thank you!
Where and how to I click on option?
On your keyboard, Hold/Click the Alt key (Windows) or the Option key (macOS).
thank you sm!
No problem!!
love you:) Thank you for info..
You are so welcome! Happy to help.
great video, it helped me
Thank you so much; I'm so glad one (or all) of these Photoshop image colorizing techniques helped you out.
thank you!
Thank you so much, much appreciated!!
You are very welcome! I glad this helped you!
Does this still work in 2024? I’m from Australia so not sure if that makes a difference but this doesn’t come up for me at all. On the phone or desktop when I click the blue invite button, it doesn’t un highlight.
Yes, this still works in 2024; I just checked my account. As a business page, business.facebook.com/latest/content_calendar at this link, if you have enough uninvited likes, then Facebook adds a card in one of your calendar squares that allows you to bulk invite people who reacted to your post during the past week. As of Sept 21, 2024, I'm able to see this card in the US that reads, "24 people reacted to your posts. Invite people who reacted to your posts last week to follow your page."
When you're done watching this video, please watch the follow-up video titled, "Adobe Illustrator 2024 Tutorial: Make a Scientific Color Wheel with Pie Slices." It demonstrates how to add Scientific Colors to this HSB color wheel. ua-cam.com/video/cXmbFPeyY8M/v-deo.html
I suspect you might just have saved me a few hours - thank you for the video!
You are very welcome. I'm glad my troubleshooting with ACF likely saved you time!
Perfect Video! This was exactly what I was looking for. Thank a lot!!!
I’m so glad it helped!!!
Thanks....
You’re welcome. I’m glad this video helped you!
CSS: html.squarespace-damask .sqs-blockStatus, .sqs-block .removed-script { display: none !important; }
Hi Kelly, just subscribed to your channel. Thanks for the informative video about using code block to add svg elements to squarespace website. Do you know of any way to add bento grid Ui to squarespace using code block? Would you be interested in doing a new tutorial on it? Thanks in advance.
@designertofullstack how do you remove all the space at the bottom?
That's a great question! I've recorded a video and made a post for you. The solution is to use CSS to hide the "Preview Script Area" -- then you're able to adjust the height of your Code Block using the sides/corners/anchors as you'd expect. Take a look and please report back if this works for you! ua-cam.com/video/wyl8b8eTIh0/v-deo.html
Thank you so much.
You're welcome!
A M A Z I N G <3 Thank you very very much
You're welcome! I'm so glad this video did the trick!
Very helpful. pls make few tutorials on how to create beautiful pdfs like those are on internet step by step🙏. I like the way you teach.
I'm glad you found this video helpful. Please feel free to send me an email with examples of the PDFs you'd love to see how to create step-by-step and I'll take a look. designertofullstack.com/contact/#google_vignette
@@designertofullstack Wow mam thankyou for your reply sure i'll send you files very soon.
wow i love you thanks so much! How did this go over my head?
I'm glad this helped. In Photoshop, if something isn't working as expected, I always recommend: Look Up - check out your Details/Option bar. The setting that needs changed or clicked is almost in that area of your screen. Have fun designing!
This is relieving after watching so many other videos showing me just one type of solution... Thank you!
You are most welcome; there are always so many different ways to accomplish each task in Adobe programs.
believe me, iit's literally working, i can't believe. Thanks for this shortcut.
You're welcome!
Thank you, I was pulling my hair out trying to figure out what to do and you've made it simple!
Glad I could help! The carousel post on LinkedIn is definitely NOT straight forward.
Thank you SOO Much! this is Exactly what I needed, and there were NO other videos about it. You were so clear and to the point. I really appreciate it! Thank you
Thank YOU for this comment; I'm so pleased this video was helpful to you. If you ever have questions about Photoshop and can't find a video, feel free to contact me on my blog's Get in Touch form and I'll try to make a video answering your question. designertofullstack.com/contact/ - All the best!
how polite she is ;-; .............. I am so overwhelmed
You saved my life!!! thank you :)
Yay! I'm so glad this Photoshop video was helpful!
I could listen to you all-day
Thank you! This was driving me insane.
Glad it helped! You're welcome!
SUPERB! work in Indesign as well
defintly there not gonne put aggrasive upselling later because im gone use it for real
I hope Adobe does not add advertising in the future linked to the use of the QR generator, but for now, they do not.
So what does the person you invite see? Where is the invitation sent?
Great question. Your invite will be listed with other page invites. Navigate to Pages and then the tab called "Invites." You will see the person's name, who invited you, and what page they invited you to like. For images and additional details, check out this page: designertofullstack.com/are-you-a-business-trying-to-grow-your-followers-on-facebook-dont-forget-this-simple-task/#more-questions- How the invitation is sent is dependent on the user's notification preferences. Good luck!
<a href="www.yourlink.com" target="_blank"> <svg></svg> </a>
Amazing
Thank you! Cheers!
Its not showing when i export the image
Correct. The grid and guides in PhotoShop are design tools that are there to help you align the elements in your composition; they are not elements in your composition. I recommend using the line tool or the rectangle tool to trace the visual guide grid and to create a grid that is visible when exported from Photoshop as an image. You’ll need the elements of your grid to be items selectable on your artboards and layers panel. Good luck!
This was so helpful! Thank you!
You’re welcome!
Great, thanks for posting this. 24 years of using Photoshop - and this odd issue popped up and I had no idea what to do.
Glad this video helped; similar story as mine!
Thanks sooo much, I only recently started to use and learn illustrator so I as a TOTAL noob had to make this for a project. This saved me
I’m so glad these instructions helped you as a new user of illustrator. Keep up the learning - design is awesome!
great video thanks, how can i remove "taxes included" text
Sure. In the same file, main-product.liquid code, you can comment out the lines of code directly above "Shipping Calculated at Checkout." If you look at time code 1:05 in this video, you'll be commenting out lines 118 to 120. Alternatively, you can make changes without touching your code files by going to your Online Store > Theme > Actions > Edit Theme Language area. You can search for "Tax included" and "Shipping" and then change the verbiage or delete the words completely from these fields. I write more about this technique on this Shopify blog post. Take a look: designertofullstack.com/starting-a-shopify-store/
How do you access this if it only says "Schedule a Post or Story"
If you navigate to Meta Business (business.facebook.com) and click on Calendar, when there are users to invite, you'll see the option; otherwise, you'll only see "Schedule a Post or Story" and perhaps a time to schedule recommendation. Check back in a few days and you'll likely see it (especially if you make a new post). Good Luck!
thank you so much that helped me a lot
Glad it helped!
omg ur lifesaver tnx so much
You're welcome! So glad this helped you draw a path!
Example of code you can you use in the Squarespace code block: <p>Copyright © <script>now=new Date(); year=now.getFullYear(); document.write(year);</script> Company Name.</p> If you want to change the height of your Code Block, check out this video, as it can be done using custom CSS. ua-cam.com/video/wyl8b8eTIh0/v-deo.html
You're amazing. thank you so much!!!😄
You're so very welcome! I'm really glad this video helped!