Adobe XDが台頭してきていますが、まだまだPhotoshopでデータ作成が必要な場面も多いです。特にレスポンシブデザインの制作では、PC、タブレット、スマホそれぞれのデータを用意する必要がある一...
ろくでブログ
Adobe XDが台頭してきていますが、まだまだPhotoshopでデータ作成が必要な場面も多いです。特にレスポンシブデザインの制作では、PC、タブレット、スマホそれぞれのデータを用意する必要がある一...
「アイキャッチってなんだろう？」1,000個以上を制作して学んだこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザイナーの佐藤タカアキ（@sato_tkaaki）です。 僕は2年半くらい前にLIGのことを知って、デザイナー募集記事をきっかけにLIGへ入社しました。そして当時メディア事業部のデザイナーだった王さんからLIGブログのアイキャッチの仕事を引き継がれ、現在ではその制作数も1000を超えました。 そこで今回は、LIGブログのアイキャッチ画像について、制作過程や制作から学んだことなどをお話しします。 そもそも「アイキャッチって何？」という方は「ブログの集客を加速させる「アイキャッチ」とそのデザインについて」をご一読いただけますと幸いです。アイキャッチの概要や必要性、効果的な魅せ方について書いています。 LIGブログはなぜアイキャッチにこだわるのか 他のメディアではフリー写真素材をそのまま使ったり、ちょっとテキストを加えただけの写真を使ったりする中、LIGブログはやたら社員を出していたり、めっち
今どきデザインはこれ！拡散型シャドウの基本から作成方法まで（PSチュートリアル + HTML/CSSスニペット付）
最近ウェブサイトやUIデザインなどを見ていると、ふわりと浮いているような奥行き感を表現しているものがあります。これは拡散型シャドウ（英: Diffuse Shadow）と呼ばれる新しいグラフィックトレンドで、2016年に入って多く見かけるようになっています。 今回は、この拡散型シャドウの基本的な使い方や、PhotoshopやHTML/CSSなどによるさまざまなデザイン方法を、参考にしたいUIデザインと一緒に見ていきましょう。 拡散型ドロップシャドウって何？ 英語でもきちんとした名前はまだ決まっていないようですが、この拡散型シャドウ（英: Diffuse Shadow）と呼ばれるこのテクニックは、通常のドロップシャドウに比べ、奥行き感をより表現できます。フラットデザインから派生したスタイルのひとつとも言え、今のデザイントレンドを反映しています。 Image Source: VOID Conf
実践で使える！ 初心者のための画像加工テクニック – Engineer Woman
入社してから任されるDTPオペレーターとしてのお仕事。 50枚…100枚…!? たくさんの画像処理を「短時間でやって！」と頼まれたはいいけど…。思うように作業が進まず、壁にぶつかった経験がある、という方は多いのではないでしょうか。そこで、現場でじっさいに活用されている画像処理のテクニックをご紹介！ 「Bridgeで一括リネーム」、「Photoshopのアクション機能」、「ショートカットキー」の3つの合わせ技で、あなたの作業時間を短縮させます。 【作業環境】 Mac OS X El Capitan(バージョン10.11.1) Windows10 (動作確認用) Photoshop CC Bridge CC Bridgeで一括リネーム Webサイトなどで使用する画像では、名前のつけ方に規則性が必要です。けれど、クライアントから受けとった画像ファイルは、その名前がバラバラになっているケースも。そ
チームでWebサイトを制作する際に気をつけたい10のマナー
2013年9月26日 Webサイト制作, フリーランス Webサイトの制作会社で働いている人はもちろん、普段一人で活動しているフリーランサーの方も、フリーランサー同士が手を組んでWebサイト制作を行ったり、制作会社がフリーランサーに受注するなどで、複数の人でひとつのサイトを制作することもあると思います。そんな時に起こりやすいトラブルと、それを防ぐ方法を考えてみます。ちなみに今回はデザイナー目線での気づいた事です。プログラマーさん目線での気をつけたい事などあればお聞かせください :) ↑私が10年以上利用している会計ソフト！ デザイン時 1. レイヤーに名前をつける 「もらったPhotoshopファイルを開いたら、どれがどのレイヤーなのかさっぱりわからない！」なんて体験、ありませんでしたか？デザインファイルを共有する場合はレイヤーの管理がとても大切です。「レイヤー０」「レイヤー１」「レイヤー
LIGブログで1,000個も作ってきたアイキャッチのPSDデータを大放出中（1）社員編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの佐藤タカアキ（@sato_tkaaki）です。 早いものでLIGに入社してから1年半以上の月日が流れました。LIGブログのデザイナーとして撮影から一枚絵の作り込みまでを担当。数々の諸先輩方からフォローしていただきながら、主に記事のアイキャッチやLIGブログ内のバナー、背景ジャックをほぼ1人で作ってきました。 ふと立ち止まって、これまでに作ったアイキャッチを数えてみると、その数は1,000個をとうに超えています。そこでキリも良いですし、今までにLIGブログで使用してきたアイキャッチのPSDデータをジャンルごとに配布しちゃおうと思います。 Photoshopを扱いはじめたばかりで、やりたい表現のイメージは頭の中にあるのにどうやればいいのか分からない。チュートリアルを探してみたけど海外のものばかりだし、よくわからない。そんな方たちの手助けに少しでもなればと思います。僕自身
レスポンシブを前提にしたPhotoshopでのカンプ作成、ちゃんとできてますか？ - Tortoise Shell
レスポンシブを前提にしたカンプ作成、ちゃんとできてますか？ 変化の激しいWeb業界では、技術的変化やトレンドに合わせて現場でのワークフローも変わり続けています。 数年前まではPhotoshopやFireworksでしっかりとカンプを作りこんでスライスを切って、やっとコーディング…という流れでしたが、これも通用しなくなってきています。 今更書くまでもありませんが、今日ではエンドユーザーがWebを閲覧する環境も多様化しています。 そうすると、従来のデバイス毎にがっちりとカンプを作りこんで管理しておくというワークフローは無理が出てくるわけです。 今求められているのは、どのような環境からアクセスしても快適にコンテンツを見ることができるような、スケーラブル（拡張性のある）なレイアウトなのです。 そこで、カンプ作成の段階でもレスポンシブを前提としたワークフローの導入が必須になってきました。 とはいえ、
こんな簡単でいいの？便利すぎるPhotoshopのプラグイン23選
デザイン制作の大半をPhotoshopで作業する人も多くいらっしゃいます。 そんなPhotoshopですから、自分仕様に環境を整えておくことで作業の快適具合も大きく変わってきます。 今回は、Photoshopでの作業を効率化する使い勝手の良いプラグインを28個に絞りご紹介します。 フォトショッププラグインとは、標準機能を拡張するファイルのことです。必要に応じてインストールすることで作業効率を飛躍的にアップさせることが可能です。 全てインストールする必要はありませんが、気になるものがあれば是非一度使ってみてください。 便利すぎるPhotoshopのプラグイン23選 1.Velositey http://dandkagency.com/extensions/velositey わずか数回のクリックであっという間にホームページのレイアウトを作るプラグインです。 ヘッダからコンテンツ、フッターなど
EMBER買いました。めっちゃ良いです。 | keisuke tsukayoshi
いいな、参考にしたいなと思うデザインがあったときにキレイにスクショ管理できたり、アイコンやシェアボタンなどよく使うPSD素材なんかの管理にはいままでLittleSnapperを使っていたのですが、この度LittleSnapperがEMBERとして新たにリリースされたようなので早速買ってみました。 LittleSnapperと内容はほとんど一緒だし、そもそもLittleSnapperも4000円くらいしたので「なんでアップデートじゃないんだよ！なんで買い直さないといけないんだよ！！」みたいな愚痴は死ぬほど出てくるのですが…実際便利だしいいんです…うん…。 EMBERのつかいかた スクショ管理につかう 参考にしたいデザインがあったらChromeのEMBERエクステンションでEMBERに全画面保存できます。スクロールしないと表示しない系のサイトはEMBER内のブラウザで見たままのスクショが撮るこ
2015年の年賀状準備！PhotoshopとiPhoneで写真を鉛筆画に加工 - AIUEO Lab2
え、もう年賀状？！はい、もう年末まで残り4ヶ月をきってるので年賀状の季節です。 実をいうとわが家は毎年、年内に年賀状を出せていません。いつも年が明けてから出す年賀状…もう、そんな自分は卒業します！（それにしてもちょっと早すぎるけどね） 今回のデザインは、羊の写真を加工したものをはがきにプリントしようかなーと思っています。鉛筆画風がオシャレかななんて。 それでは、来年の干支『未（ひつじ）』を鉛筆画風に仕上げるために、まずは元になる羊の写真を探してみます。 スポンサーリンク 羊の素材を探す 今回はPhoto Pinで探します。「Sheep」と入れて検索。 Photo Pin : Free Photos for Bloggers via Creative Commons 親子ひつじ photo credit: EssjayNZ via photopin cc いとまきひつじ photo cred
マークアップからWebデザイナーへ５つのお願い ｜ Qrious Blog
NEW こんにちは。マークアップの胡夢です。 わたしが個人で請けている、外部のWebデザイナーさんから送られてくるデザインデータで、「これだけはやめて欲しい」って事をつらつらと書いてみます(´・ω・｀)ｷﾋﾞｼﾒ 基本的にPSD（Photoshopデータです、一応念のため）を頂いて、そこからマークアップに必要な画像を切り出して使うのですが、毎回苦労する羽目になっておりまして、同じように苦労しているマークアップさんの声をTwitter等で見かけるので、「Webデザインをやるなら、これくらいは知って置いて欲しいなぁ」という内容をまとめてみましたので、記憶に留めてもらえると非常に有り難いです。 お願い【１】レイヤーについて ●レイヤーの結合はホントにヤメテ！ わたしが対応するマークアップ案件はこういったことはほとんど無いのですが、コーディングをしたことがないデザイナーさんでこれをやっちゃう方が居
ウェブデザイナーの勉強にいい！デザインの基本原則からPhotoshopの実践的なテクニックまで学べる無料のeBook -Pixel Perfect Precision 3
デザイナーさん・ディレクターさんをはじめ、ウェブデザインに携わる全ての人に必携です！ デザインの基本原則をはじめ、Photoshopを使った実践的なさまざまなテクニックが学べるeBookを紹介します。無料なのに市販の書籍に負けない、いや人によってはそれ以上の価値ある内容がぎっしり詰まってます。 Pixel Perfect Precision 当ブログでもお馴染みのPixel Perfect Precisionの第3版が、昨日リリースされました（パチパチパチパチ） 内容も大きくバージョンアップし、ページ数も165ページから214ページへと大増量。 デザインにおける、配置の基本原則、可読性を考慮したテキスト、カラーマネジメントなどをはじめ、ファイルの効率的な管理方法、Photoshopでのウェブに最適な初期設定、レイヤー管理、Illustratorのウェブで使える実践的なテクニックなど、満載の
デザインのガイドラインや指示書の作成が驚くほど捗るPhotoshopの機能拡張 -Ink
PSDのレイヤーに配置した要素のサイズやエフェクトやフォントなどの情報を1クリックでドキュメント化するPhotoshopのプラグインを紹介します。 機能拡張は無料で利用でき、Photoshop CC/CS6に対応しています。 サイズやフォントの情報など、1クリックで作成してくれます。 Inkの特長 Inkのインストール Inkの使い方 Inkの特長 ウェブページなどのレイアウトやさまざまな要素のサイズ、形、カラー、エフェクト、フォントの種類・サイズなど、指定したレイヤー上にある情報を1クリックでPSD上にドキュメント化します。 Ink スタイルガイドなどでルールをしっかり決めておくと、デザインのアウトプットにぶれがなくなり、最終のプロダクトも想定通りに仕上がります。 Inkのインストール まずは、インストーラーをサイトからダウンロードします。 Ink CS 6にインストールしたので、その手
デザイン効率大幅アップ！Photoshopとスマホの画面がリアルタイムに同期される神アプリ『Skala Preview』
世の中にはこんなに便利なアプリがあったのかと驚きを隠せない霙(@xxmiz0rexx)です。なぜ今まで知らなかったのか！！なんて非効率な日常を送っていたのか！！悔やんでも悔やみきれないです本当に。。 というわけで、今日は存在を知って以来 毎日使ってしまっている超絶神アプリをご紹介させて頂きます:) スマートフォンサイトやアプリデザインに最適なのでマカーなあなたは是非チェックしてみてください！！ 『Skala Preview』とは Photoshopで開いているキャンバスをスマートフォンでリアルタイムプレビュー出来るアプリです！ 今までスマートフォン向けのデザインをする時は、Dropboxにpngを保存し、同期させ、実機で確認していた私。 同期にいちいち時間がかかり かなりストレスだったので、このアプリを知って大歓喜なのでございます♡ 公式サイト：Skala Preview, a Mac a
デザイン作業をしていると見落としがちなPSDファイルのエチケットがチェックできるオンラインサービス -PSD Validator
ウェブデザインのPSDファイルで、チーム内のデザイナーで共有してファイルを触る時、コーダーに渡す時など、より使いやすいPSDファイルにするためのエチケットが守られているかチェックできるオンラインサービスを紹介します。 レイヤー名が「レイヤー1」のまま、グリッドを使用していない、watermarkの入った素材を使ってるなどはいただけません。
photoshopでのウェブデザインの勘どころ | バニデザノート
Photoshopで複数ページのカンプデザインを展開するとき、ファイルは一括にするのか、それとも１ページごとに作成するのか、その際共通オブジェクトをどう扱うかといったデータ・ファイル管理についてまとめてみました。また、Photoshopでのウェブデザインの際に便利そうなツールや「やり方」も合わせて考えてみました。
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザイナーが知っておきたいPhotoshopのPSDファイル、レイヤー、エフェクト、フォントやテキスト、素材の効率的な管理方法
Loading...
3media.biz
